Рубрики
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)”

блин только не ругайте за глупый вопрос а куда этот шорттэг вставлять и как?? в самом индексе?

Шорттег — это только для сайта на WordPress! Вставляешь его в редакторе записи или страницы.

Если сайт не на WordPress, тогда вручную заливаешь flowplayer на сайт, и вставляешь код на нужную страницу.

все понял) просто не знал куда именно вставлять его.. оказывается прям в текст)

Спасибо большое)

Спасибо, с этим разобрался.. Терь другая задача стала. FV WordPress ….,не активируется! Какие угодно имеет файлы. только не установочный. Да простят мне мое тугоумие в этой сфере..

Проще всего устанавливать плагины из самого WordPress’a. Захордишь в раздел Плагины -> Добавить новый. Находишь FV WordPress Flowplayer, устанавливаешь, затем активируешь…

Посмотри там должен быть где-то указан адрес flowplayer.flv — это демонстрационный видеофайл. Вот его и надо заменить на адрес твоего потока.

Как продолжение написаной выше инструкции не может ли кто то обьяснить как добавлять файлы в трансляцию не вводя каждый раз настройки потока ?  Пример: запустили трансялцию файла, все нормально, ставим задачу после этого файла пустить следующий, пока что получается так, что необходимо создать новую трансляцию и поставить ее в плейлист но при этом трансляция на сайте остановится и пользователю необходимо будет перегрузить страницу  да и постоянно копировать и вставлять данные в «Строку ввода для генерируемого потока» не очень весело.  Возможно есть вариант управлять текущим плейлистом из другой проги ?

А вот такой вопрос: если сайт самописный, не на WordPress? Ваш вариант сработает?
Заранее спасибо.
Кстати написано просто и доступно, чем и привлекло ;)

Спасибо! Долго я искал возможности запуска видео с веб камеры на своём сайте, со своего сервера, но помогла Ваша статья, едиственное с чем долго боролся, это этот флеш плеер перекрывал моё выпадающее css меню, z-index помог только в опере и файрфоксе, а вот в гугле, сафари и IE9  не хотел под меню залазить, но выход нашёлся, в js к плееру поменял параметр wmode, точнее какой то  заменил на wmode  value="transparent" и всё заработало как надо. Теперь дорабатываю напильником до идеального состояния))

…если не затруднит вложить ещё пару примеров самих плееров, а то всё, что ни пробовал  проигрывает только .flv =( , так же пробовал на одной странице запустить две копии разными потоками 95.31.30.87:7777  и 95.31.30.87:7778  flowplayer, тот который второй просто не загружается=(
Заранее спасибо.

А все равно надо кодировать в flv… Это если хочешь во flash-плеере проигрывать. Есть вариант с Windows media player, но он глючной и только под Эксплорер.

Понимаю, что уже надоел своей некомпетентностью, но для меня очень важно докопаться до истины))). Добавил тот плагин, всё равно не кажет.. Друг мне помогает — прислал такую ссылку:
<embed height=»306″ width=»304″ autoplay=»yes» autostart=»1″ showstatusbar=»1″ showdisplay=»0″ showcontrols=»0″ name=»MediaPlayer» src=»http://83.174.199.149:8003″ pluginspage=»http://www.microsoft.com/windows/windowsmedia/download/» type=»application/x-mplayer2″>
но почему-то у него показывает, у меня нет(( может скорость инета маленькая???  И ещё, у него тоже показывает только в firefox , а в IE не показывает…
Я так понимаю, что это самые азы в этом вопросе, а у меня, к сожелению, вместо них пробел(((
 

Знаешь, я ведь тоже не профи в этом вопросе… так, на базовом уровне прикоснулся )

Но вот что я понял после того как исследовал поток с вашей камеры.

В vlc открыл поток без проблем. Камера использует кодек wmv2 (по данным vlc). Это плохо для вставки в веб-сайт, т.к. wmv не проигрывается во флэш плеерах (flowplayer отпадает). Также это означает, что об универсальности и доступности на всех браузерах можно забыть. Мне почти удалось подключиться к потоку через Windows Media Player … но оказалось, что нет нужного  кодека. Это плохо — скорее всего у большинства пользователей его тоже не будет. Также вычитал, что решения которые работают в эксплорере несовместимы с фаерфоксом и наоборот…

Что можно сделать. Если есть доступ к настройкам камеры, попытаться как-то ее перенастроить (не знаю как, с такими девайсами сам в живую не сталкивался). Второй вариант — использовать отдельный комп с vlc для перекодирования потока в flv (сайт забирает поток не напрямую с камеры , а с этого компа).

Может кто еще что-то дельное посоветует?

Огромное спасибо за помощь!!! А то я уже не знал, что делать. Теперь буду общаться с городским узлом связи — пусть что-то делают с этим (грёбаным) wmv2 (сколько крови он мне попил, пока выяснилось, что причина кроется именно в нём). Может они организуют вещание со своего какого-нибудь компа…

привет! нужна помощь, помогите, пожалуйста! я вообще не спец по веб-камерам, по их трансляции, однако заданием сверху было предписано организовать на городском сайте трансляцию с веб-камер ОВД города…Мне дали IP- адреса пяти камер (там только порты разные), на сайте ссылку делаю на айпишники эти — безрезультатно, белая чистая страница…(сайт на Word Press) что делать??? как тут быть?

Просто ссылка и не должна открываться.

Чуть выше смотри раздел «Вставляем трансляцию на сайт WordPress».

Установи Flowplayer, пропиши адрес к веб-камере. Должно заработать.

Проблемы начались уже с показом в Flowplayer. Почему — то не показывает…хотя та же ссылка через VLC показывает… Плагин установил в Word Press,добавил на страницу соответствующую строку как указано выше (со данным мне айпишником, но на странице появился только html — код… Что не так делаю?(((

почувствовал себя идиотом))) убрал, но всё равно пишет в  плеере «200 stream not found и т.д.
 

При кодировании в h264 потока с IP камеры, плееры не могут просто за него зацепиться первые 30-60 секунд, просто белый/черный фон (зависит от плеера) и идет время.
При кодировании, например, в FLV1, таких проблем не было.

Хм… А какие параметры системы? Какую версию VLC используете? Когда вылетает есть сообщение об ошибке?

vlc -vvv —logo-file=/home/nemesis/Картинки/logos2.png —logo-position=6 —logo-transparency=100 rtsp://192.168.0.5:1554  —http-caching=5000 —rtsp-caching=5000 —sout \
‘#transcode{vcodec=FLV1,width=500,height=375,sfilter=logo}:std{access=http{mime=video/x-flv},dst=0.0.0.0:8086,mux=ffmpeg{mux=flv}}’ —ttl=5

во время трансляции постоянное сообщение  «vbv buffer overflow».

а потом «stream_out_transcode stream out debug: late picture skipped» и все, в эфире ноль.

vlc 1.0.2. Goldeneye

Советую обновиться до последней версии (1.1.4 сейчас кажется).

vbv buffer overflow — можно попробовать уменьшить битрейт

Насчет «stream_out_transcode stream out debug: late picture skipped» — загляни в Гугл, там очень много на эту тему.

И тут не все гладко.
Запускаю поток, цепляюсь браузером — ок. Еще пару тройку окошек открываю — ок.
Но если пройдет пара тройка минут — всё. Новые клиенты не могут подключиться к трансляции. Старые, что характерно, продолжают нормально работать.
Ребутил роутер, перезагружал иис — бесполезно. Помогает только перезапуск целиком влц. Не сталкивался?

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

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


Срок проверки reCAPTCHA истек. Перезагрузите страницу.