Рубрики
WordPress Софт

Как осуществить простейшую веб-трансляцию (веб-камера + VLC media player (Windows) + WordPress + FlowPlayer)

Задача такова: с минимальными усилиями вставить живое видео с домашней веб-камеры на сайт под управлением WordPress.

Будем считать, что веб-камера уже подключена, настроена и нормально работает.

Подготовка:

  • Скачать и установить VLC media player для Windows (откройте ссылку, на главной странице большая синяя кнопка “Download VLC”). VLC будет осуществлять кодирование и потоковое вещание.
  • Скачать FlowPlayer (понадобится для тестирования, а также если ваш сайт не на движке WordPress). FlowPlayer  – это flash-плеер, который будет непосредственно осуществлять показ видео. В принципе его можно заменить любым другим плеером, который вам больше по вкусу.

Настройка VLC:

  • Открыть VLC media player.
  • Для начала просто просмотреть видео с веб-камеры в VLC плеере. В главном меню открываем Медиа -> Открыть устройство захвата:

    Тестируем веб-камеру + VLC
    Тестируем веб-камеру + VLC
  • В графе “Название видео-устройства” выбираем свою веб камеру (у меня Logitech Webcam 250). В графе “Название аудио-устройства” выбираем микрофон веб-камеры (у меня Microphone Logitech Mic (Webcam 250)). После этого нажимаем кнопку Воспроизвести. Если все правильно, вы увидите видео со своей веб-камеры.
  • Убедившись, что камера работает переходим к настройке потокового вещания. Открываем Медиа -> Потоковое вещание -> закладка Устройство захвата. Также как и в предыдущем пункте выбираем устройство захвата видео и аудио. Нажимаем на кнопку Поток.
  • В открывшемся окне находим кнопку Следующий, нажимаем ее и затем еще раз. В итоге вы должны увидеть вот такое окно:
    VLC - потоковое вещание
    VLC - потоковое вещание

    В поле “Строка ввода для генерируемого потока” вставляем:

    :sout=#transcode{vcodec=h264,vb=300,ab=64,fps=25,width=256,height=192,acodec=mp3,samplerate=44100}:duplicate{dst=std{access=http{mime=video/x-flv},mux=ffmpeg{mux=flv},dst=:7777}}

    Рассмотрим параметры подробнее:
    vcodec=h264 – видео кодек H264;
    acodec=mp3 – аудио кодек;
    vb=300 – видео битрейт (чем выше, тем выше качество и требования к полосе пропускания);
    ab=64 – аудио битрейт (чем выше, тем выше качество и требования к полосе пропускания);
    fps=25 – кол-во кадров в секунду;
    width=256, height=192 – соответственно ширина и высота изображения;
    samplerate=44100 – частота дискретизации звука.

    Эти параметры можно варьировать и тем самым улучшать/снижать качество изображения ну и как следствие требования к полосе пропускания. Что касается конкретных цифр, то они взяты мной с videolan.org из примера для простых веб-трансляций. Для просмотра в небольшом окне плеера (до 640х480) качество вполне нормальное )

    dst=:7777 – важнейший параметр, определяющий сетевой порт (TCP) по которому будет осуществляться вещание. В моем случае: 7777 (вы можете выбрать любой другой не занятый порт). Порт должен быть открыт в брандмауэре. Если подключение к Интернет осуществляется через роутер, то на роутере необходимо дополнительно настроить форвардинг этого порта.

    После настройки параметров, нажимаем на кнопку Поток.

  • Если все работает правильно, то должен загореться индикатор работы на веб-камере, а также в строке состояния VLC плеера должна быть надпись “Потоковая передача”:

    Идет потоковая передача
    Идет потоковая передача
  • Чтобы окончательно убедиться, запускаем Flowplayer на локальном компьютере. Для этого распаковываем ранее скачанный архив (можно прямо на рабочий стол, чтобы поближе).  В архиве папка example, в ней файл index.htm – открываем его в блокноте. Ищем строку: http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv и заменяем ее на http://localhost:7777, где 7777 ранее выбранный порт веб-трансляции. Сохраняем файл, и запускаем его двойным щелчком. Откроется браузер по-умолчанию. Если это эксплорер, то вы увидите вверху предупреждение о заблокированном содержимом – все разрешаем. В итоге откроется страница с плеером. Загрузка трансляции может занять до 30 сек. В начале (10-15  сек.) могут быть проблемы с качеством (например у меня все зеленое).

Вставляем трансляцию на сайт WordPress:

  • Необходимое условие: интернет-провайдер должен предоставить вам внешний статический или внешний динамический ip-адрес. В случае внешнего динамического адреса (на сегодняшний день наиболее часто встречающийся тип адреса) необходимо дополнительно настроить сервис DDNS.
  • Устанавливаем и активируем плагин FV WordPress Flowplayer (из множества других плагинов, он мне понравился больше всего). После установки достаточно вставить на страницу следующий шорттег:
    [ flowplayer src='https://89.235.17.66:7777' width=520 height=330 autoplay=true ]

    где 89.235.17.66 – ваш внешний ip-адрес или доменное имя DDNS, 7777 – порт веб-трансляции.

  • Внимание! Если вы подключены к Интернет через роутер, ввидео на сайте может не проигрываться (для вас). Убедиться, что трансляция работает, можно, открыв сайт с любого другого компьютера не из вашей локальной сети (например попросить зайти на сайт друга).

171 ответ к “Как осуществить простейшую веб-трансляцию (веб-камера + VLC media player (Windows) + WordPress + FlowPlayer)”

поток в vlc начинается, даже могу к нему подконектить 2 vlc с параметрами, http://ip_компа:7777 . Но никак не могу сделать через веб, данный способ не работает, говорит файл не найден. Как поймать этот поток на html ?

Если к Интернет подключаетесь через маршрутизатор, то убедитесь, что на нем открыт порт (настроен port forwarding или virtual server).
Также для чистоты эксперимента на компе с которого идет трансляция отключите все имеющееся в наличии фаерволы.

Не удается проверить на локалке: “В архиве flowplayer не оказалось папки Example. Файл index есть только в корне, а указанной в статье строки в этом файле нет. Куда вставить строку, чтобы сделать тест?”

можете скопировать содержимое файла Index?

Многое изменилось с тех пор как я статью писал…

Пример использования теперь располагается в index.html.

В нем находим код:

<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
      <video>
         <source type="video/webm" src="http://stream.flowplayer.org/bauhaus/624x260.webm">
         <source type="video/mp4" src="http://stream.flowplayer.org/bauhaus/624x260.mp4">
         <source type="video/ogv" src="http://stream.flowplayer.org/bauhaus/624x260.ogv">
      </video>
   </div>

И заменяем на:

<div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
      <video>
         <source type="video/mp4" src="http://localhost:7777">      
      </video>
   </div>

Сам не тестировал, но должно сработать

с учетом прошедшего времени – как бы Вы сейчас порекомендовали решить такую задачу – трансляцию с веб/ip на сайт?

Сейчас появилось много сайтов, выполняющих роль медиа-сервера.
Например http://www.livestream.com/support/faq или twitch.tv.
Это гораздо лучше чем стримить напрямую. Вам необходимо доставить данные до сервера, а уже раздачу конечным пользователям он берет на себя.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *