3 июня 2009 г. ffmpeg Flash flowplayer FLV Nginx PHP yamdi Сервисы FreeBSD

Видеосервис своими руками и организация псевдостримминга

Сегодня я расскажу как работают "видеохостинги" и мы разработаем свой "видеосервис" для закачивания видео-файлов, с последующим конвертирование и созданием картинки для превью. Далее организуем показ во флеш-плеере и эмулируем стримминг (для перемотки на не загруженные части видео-файла).

Для всего этого нам понадобиться:

• Флеш-плеер для проигрывания видео-файлов - flowplayer
• Программа для конвертирования видео-файлов - ffmpeg
• Расширение PHP для получения превью-изображения - php-ffmpeg и библиотека для работы с графикой - GD
• Эмуляция потокового видео (псевдостримминг) с помощью утилиты yamdi, модуля для nginx - http_flv_module и плагина для flowplayer - flowplayer.pseudostreamming

Серверная ОСь по традиции - FreeBSD.

Установка необходимых нам утилит

ffmpeg

Для того чтобы конвертировать видео, нам необходимо установить утилиту ffmpeg. Есть еще аналогичная утилита - mencoder, тоже очень хорошая, но ffmpeg более популярен, поэтому именно его буду сейчас использовать. Эти утилиты с переменным успехом конкурируют между собой, поэтому также рекомендую посмотреть на mencoder в свободное время.

# cd /usr/ports/multimedia/ffmpeg
# make config

и выбираем LAME (lame MP3 codec)

# make install

Windows сборки ffmpeg: http://ffmpeg.arrozcru.org/builds/

yamdi

Далее, необходимо установить утилиту yamdi, которая вшивает мета-данные в видео-файл. Мета-данные необходимы для индексирования файла, то есть для того, чтобы можно было в еще не скачанном (не буферизированном) файле при перемотке перемещаться по индексам.

# cd /usr/ports/multimedia/yamdi
# make install

nginx

Теперь подошло время для nginx, который будет отдавать индексируемый (с помощью yamdi) видео-файл. На его месте может быть и lighttpd или еще какой-нибудь другой веб-сервер. Но я поддержу отечественного производителя! :)

# cd /usr/ports/www/nginx
# make config

и выбираем HTTP_FLV_MODULE, далее

# make install

Ну или просто при установке укажите опцию "--with-http_flv_module".

nginx-0.7.52. Теперь и под Windows: http://rmcreative.ru/blog/post/nginx-0.7.52-teper-i-pod-windows

Можно конечно использовать в качестве бекенда - PHP, например с помощью такого кода:

$start = (int) @$_GET['position'];
if ($start < 0) die("You fucking idiot");
// open file for reading
$fp = fopen($file, 'r+');
$fsize = filesize($file);
if ($start > 0)
{
    // seek to requested position
    fseek($fp, $start);
    // FLV header for the movie part. Magic. Just trust me.
    // Header code is completely taken from flv4php project
    $header = "FLV" . pack('C', 1 ) . pack('C', 5 ) . pack('N', 9 ) . pack('N', 9 );
    header("Content-Length: " . (strlen($header) + $fsize - $start));
    echo $header;
} else {
    header("Content-Length: " . $fsize);
}
set_time_limit(0);
while(!feof($fp)) {
    print(fread($fp, 1024));
    usleep(1000);// limit download speed
}
fclose($fp);

Но мне удобнее использовать для этого модуль nginx'а, да и быстрее будет.

php5-ffmpeg

Это расширение PHP нам понадобиться для того чтобы получать информацию о видео-файле, а также для получения видео-фрейма для превью. Также необходимо установить библиотеку GD и сам PHP в частности.

# cd /usr/ports/graphics/php5-ffmpeg
# make install

php5-ffmpeg для Windows: http://pyha.ru/forum/attachment/1256/1317.0 и http://pyha.ru/forum/attachment/1257/1317.0

Можно конечно получать информацию путем обращения к

# ffmpeg -i /path/filename.flv

и делать превью

# ffmpeg -i /path/filename.flv  -an -ss ВРЕМЯ_ПОЗИЦИИ_В_СЕКУНДАХ -r 1 -vframes 1 -s 320x240 -y -f mjpeg /path/filename.jpg

Но мне нравиться использовать расширение, это удобнее.

И перегрузите apache или nginx, смотря как вы используете PHP.

Конвертирование видео и получение изображения для превью

Для начала нам надо указать путь до исходного и результирующего файлов, прописать пути до превью-файлов, а также указать минимальную позицию фрейма для создания превью.

// Путь до залитого видео-файла, например временный файл полученный по $_FILES['tmp_file']
$inputPath = $_FILES['tmp_file'];

//Путь до результирующего файла, то есть отконвертированный и прошитый мета-данными видео-файл
$outputPath = "/path/video/filename.flv";

// Указываем минимальную позицию фрейма для захвата превью
$previewFrameMin = '3'; 

// Путь до превью-файла
$previewPath = "/path/preview/filename.jpg";

// Путь до мини-превью
$previewMiniPath = "/path/preview/filename_mini.jpg";

// Массив для сбора ошибок
$errorInfo = array();

Конвертируем исходный файл во временный, в формате FLV и разрешением 320x240, использую в качестве аудио-кодека mp3lame с частотой 44100, остальные настройки по умолчанию. Временный файл нужен для того, чтобы yamdi смог вшить мета-данные, так как он не может вшить в исходный файл.

/* 
 * Конвертируем FLV во временный файл ($outputPath . '_temp').
 */
passthru(
    '/usr/local/bin/ffmpeg -i ' . escapeshellarg($inputPath) .
        ' -f flv '.
        ' -s 320x240 '.
        ' -acodec libmp3lame '.
        ' -ar 44100 '.
        escapeshellarg($outputPath . '_temp'),
    $errorInfo['ffmpeg']
);

Прошиваем в видео-файл мета-данные для индексирования. Утилита yamdi написана на Си и работает очень быстро! А также удаляем временный файл.

/*
 * Прошиваем metadata (позиции ключевых фреймов) для перемотки
 */
passthru(
    '/usr/local/bin/yamdi -i ' . escapeshellarg($outputPath . '_temp') . 
        ' -o ' . escapeshellarg($outputPath),
    $errorInfo['yamdi']);

/*
 * Удаление временного файла, он нам уже не нужен...
 */
unlink($outputPath . '_temp');

Теперь получаем информацию о видео-файле и получаем объект фрейма для превью.

/*
 * С помощью расширения php5-ffmpeg получаем информацию о видео-файле
 */
$movie = new ffmpeg_movie($outputPath);

/*
 * Вычисляем время воспроизведения видеофайла
 */
$duration = $movie->getDuration();

/*
 * Вычисляем количество кадров
 */
$frameCount = $movie->getFrameCount();

/*
 * Вычисляем позицию фрейма для его захвата
 */
$framePosition = ($frameCount > $previewFrameMin) ? $frameCount / 2 : $previewFrameMin;

/*
 * Получаем объект фрейма для превью
 */
$preview = $movie->getFrame($framePosition);

А теперь получим и сохраним наши превьюшки.

/*
 * Записываем в файл - Превью (320x240)
 */
imagejpeg ($preview->toGDImage(), $previewPath);

/*
 * Записываем в файл - Мини-превью (160x120)
 */

$previewMini = imagecreatetruecolor(160, 120);

$r = imagecopyresized(
    $previewMini,
    $preview->toGDImage(),
    0, 0, 0, 0,
    160, 120,
    320, 240
);

imagejpeg($previewMini, $previewMiniPath);

Все, файл отконвертирован в FLV и прошит мета-данными, также созданы превью, теперь займемся выводом видео-файла - клиенту.

Плеер и показ видео

Почему flowplayer?

Сначала нам понадобится флеш-плеер, умеющий проигрывать видео в формате FLV и показывать картинки в формате JPEG (для превью).

Из всех аналогов (смотрите ниже, в "Полезные ссылки -> Видео-плееры") мне больше всего понравился flowplayer, он:

• Кроссбраузерный и очень гибкий, и удобный в настройке
• Бесплатный для некоммерческого использования, а коммерческая версия стоит его возможностей!
• Имеет Flash и Javascript API, также поддерживает библиотеку JQuery (там доп. фишки какие-то)
• Имеет кучу полезных плагинов
• Умеет работать со стриммингом и псевдостриммингом
• Легко поменять шаблоны оформления и языковые шаблоны для настройки локализованного интерфейса
• Обширная документация, имеет достаточно большое сообщество в собственном форуме, а также оказывает бесплатную поддержку для коммерческой версии
• Поддерживает плейлисты и имеет полноэкранный режим
• Поддерживаемые форматы: FLV, SWF, MP3, MP4, H.264 video, JPG, PNG
• Сырцы открыты!

Остальное описание возможностей на официальном сайте: http://flowplayer.org/

Настройка flowplayer

С плеером мы определились, теперь надо его настроить для показа видео. В дистрибутив плеера входит:

• flowplayer-3.1.1.swf - сам плеер
• flowplayer.controls-3.1.1.swf - flash-controls
• flowplayer-3.1.1.min.js - это так называемый js-api

Для реализации псевдо-стримминга нам не хватает flowplayer.pseudostreaming-3.1.2.swf, который можно скачать и ознакомиться с использованием тут: http://flowplayer.org/plugins/streaming/pseudostreaming.html.

Для работы со всеми видами стриминга есть титуриал: http://flowplayer.org/documentation/configuration/streaming.html

Итак, приступим:

<!-- Подключаем js-api -->
<script type="text/javascript" src="/swf/flowplayer-3.1.1.min.js"></script>

<!-- Настраиваем плеер -->
<script type="text/javascript">
    flowplayer(
        "player",
        "/swf/flowplayer-3.1.1.swf",
        { 
            playlist: [
                {
                    url: 'http://example.com/preview/filename.jpg' 
                }, 
                { 
                    url: 'http://example.com/video/filename.flv',  
                    autoPlay: false,
                    autoBuffering: false,
                    provider: 'pseudo'
                }
            ],
            plugins: {
                pseudo: { 
                    url: '/swf/flowplayer.pseudostreaming-3.1.2.swf' 
                }
            }
        }
    );
</script>

<!-- DIV в который мы поместим плеер --> 
<div style="width:416px;height:312px;display:block;padding:10px;" id="player"></div> 

Все опции указанные в настройках можно посмотреть тут: http://flowplayer.org/documentation/configuration/clips.html

Настройка http_flv_module

Теперь настроим nginx на отдачу файла со смещением, для эмуляции стримминга.

location ~ \.flv$ {
                flv;
                root /path/video;
        }

То есть, говорим nginx'у чтобы он для расширения "flv" использовал модуль http_flv_module и указываем в root путь до видео-файлов. Документация по http_flv_module: Директивы модуля ngx_http_flv_module

Ну вот и все, теперь у вас полноценный "видеосервис"!

Полезные ссылки

ffmpeg
Работа с видео на php с помощью php ffmpeg
Продвинутый метод воспроизведения flash-видео на веб-страницах (или эмулируем стрим-видео)
Наносим водяной знак на видео с помощью ffmpeg
Как же работают видеохостинги? Часть первая. Сборка.
Как же работают видеохостинги? Часть вторая. Ffmpeg.

Видео-плееры
Подборка видео-проигрывателей на флэше
Видео и аудио плееры для сайтов
Идеальный видео-плеер
Идеальный видеоплеер. Не утопия

/*
 * Удаление временного файла, он нам уже не нужен...
 */
unlink($outputPath . '_temp');
/*
 * С помощью расширения php5-ffmpeg получаем информацию о видео-файле
 */
$movie = new ffmpeg_movie($outputPath);