Организация онлайн трансляции на сайте
1 Декабрь 2011Комментариев: 22
Допустим что у вас есть (или будет) IP камера (желательно Axis) и есть желание показывать на своем сайте видео с этой камеры в прямом эфире, будь то семинар, какое либо мероприятие, двор за окном, ну или себя любимого решили показать всем на обозрение))
Ну чтож, ничего сложного. В этой статье будет подробно расписано как это сделать.Итак, для начала нам понадобится установить видеосервер.
Для этих целей я использовал популярный видеостриминговый сервер Wowza. Решение платное, но есть пробная версия, позволяющая произвести одновременно 10 подключений, для начала хватит и столько.
Идем на сайт разработчика и скачиваем необходимую нам версию.
Первоначальная настройка также доступна на сайте разработчика (кто не в ладах с английским вот хороший перевод этой статьи).
Сервер установили и настроили, теперь необходимо разместить на сайте flash плеер, поддерживающий протокол RTMP (ведь именно по нему наш сервер будет передавать видео на плеер).
Выбор конечно есть, вот на мой взгляд самые лучшие представители:
- Flowplayer
- JW Player
- Uppod
Я перепробовал все эти плееры. У каждого есть свои достоинства и недостатки, но я все таки остановился на Flowplayer, т.к. к нему написано огромное количество дополнительных модулей, удобное управление, практически нет глюков, а также очень хорошая (что немаловажно) поддержка со стороны разработчиков на форуме.
Для установки нам понадобиться скачать с сайта сам плеер, а также RTMP плагин для него и скопировать все эти файлы к себе на веб сервер (предварительно разархивировав).
Далее необходимо разместить код плеера на страницу, где планируется транслировать видео.
Рабочий пример кода плеера.
<script src="flowplayer-3.2.6.min.js"></script> <div id="player" style="display:block;width:640px;height:480px;"></div> <script type="text/javascript"> $f("player", "flowplayer-3.2.7.swf", { clip: { scaling: 'fit', url: 'camera.stream', autoBuffering: true, bufferLength: 60, provider: 'rtmp', autoPlay: false }, plugins: { controls: { url: 'flowplayer.controls-3.2.5.swf', play: true, volume: true, mute: true, time: true, stop: false, fullscreen: true, scrubber: true, width: '100%', left: '1px', backgroundColor: 'rgba(0, 0, 0, 0)', backgroundGradient: 'none', volumeColor: '#4599ff', tooltipColor: '#000000', tooltipTextColor: '#ffffff' }, rtmp: { url: 'flowplayer.rtmp-3.2.3.swf', netConnectionUrl: 'rtmp://<адрес сервера>/live/' } } }); </script>
Что мы имеем в итоге. При открытии страницы с трансляцией, плеер обращается к видеосерверу по адресу rtmp://<адрес сервера>/live/camera.stream и забирает с него поток по протоколу RTMP.
Никаких особых сложностей эта настройка предоставить не должна, но если есть какие-нибудь вопросы, или что-то не понятно, прошу в комментарии, постараюсь на все ответить.
Анатолий
Май 19, 2012 @ 03:05:07
Тоже склоняюсь к камерам AXIS и схема с Wowza сервером действительно стабильная! Про RTMP плагин узнал из вашей статьи, спасибо. О моем опыте работы с Wowza можете почитать тут http://itmultimedia.ru/translyaciya-izobrazheniya-s-ip-kamery-v-set-internet/
Павел
Июл 05, 2012 @ 20:13:15
Помогите настроить, с виду вроде просто неполучается
LinHunt
Июл 06, 2012 @ 09:29:09
Что именно у вас не получается? Напишите, постараюсь помочь.
Георгий
Сен 29, 2012 @ 02:28:23
А как переделать RTMP на обычный HTTP чтоб вебкака работала в «лайфе»?
LinHunt
Сен 29, 2012 @ 22:53:22
В статье как раз и описывается случай, когда вебкамера будет транслироваться в онлайне, через плеер на странице. Или вы что-то другое имели ввиду?
Георгий
Сен 29, 2012 @ 02:37:47
можно ли проверить работает ли система локально по программе Денвер 3?
LinHunt
Сен 29, 2012 @ 22:48:03
Конечно можно. Ставите на локальный сервер вовзу (есть пакеты и для Windows), а на веб сервере делаете страницу с плеером.
Никита
Июл 25, 2013 @ 01:39:46
Здравствуйте, как поставить себе на Сайт этот телеканал глас rtmphttp://www.glas.org.ua/video.html через Flowplayer протокол rtmp. Пытался по инструкции, ничего не получилось..
LinHunt
Июл 27, 2013 @ 00:21:00
Здравствуйте!
Во первых можно просто попробовать вставить их плеер себе на страницу. Может получится.
А так, смотрите в исходном коде страницы, там ссылка вида:
rtmp://gigaz.wi.com.ua/hallDemo/glassua&autoPlay=true&width=640&height=480&autoHideControlBar=false
Вот ее и попробуйте вставить в FlowPlayer.
Также не забывайте, что со стороны сервера очень просто разрешить доступ к потоку только определенным IP адресам, и если они это сделали, то у вас ничего не получится.
Никита
Июл 30, 2013 @ 11:05:57
А обойти ограничение по ip можно? Они как раз и закрыли доступ по ip
LinHunt
Сен 06, 2013 @ 11:14:55
Даже не знаю, но думаю что никак. На то оно и ограничение по ip
Алексей
Июл 29, 2013 @ 13:56:04
Добрый день.
стоит wowza на виртуальной машине, IP Камера RVi, с помощью примеров-плееров в самой вовзе получается получить картинку с камеры.
Делаю все по вашей инструкции, в логах вовзы написано, что стрим пошел, но страничке в браузере картинки нет.
LinHunt
Сен 06, 2013 @ 11:16:49
Добрый день!
Наверно уже поздно и вы все сделали сами. Но если нет, пришлите ссылку на страницу, попробую помочь.
эдуард
Ноя 24, 2013 @ 17:46:59
плеер UPPOD
Илья
Апр 17, 2014 @ 10:22:33
Здравствуйте! Пробовали ли вы другие медиасерверы для трансляции с видеокамеры. Например: http://itmultimedia.ru/media-servera-flash-media-server-wowza-erlyvideo-red5/
Евгений
Янв 20, 2015 @ 21:05:22
Добрый день.
Надеюсь что не некропостинг…)
Проблема 1 в 1 как у Алексея (Июл 29, 2013 @ 13:56:04) Поставил wowza на вирт. машину, IP Камера AXIS, со странички, которая в примерах wowza по rtmp картинка идет, через VLC идет. Скопировал Ваш код в HTML страницу – ничего не получается, в окне вовзы написано: stream play camera.stream -в браузере картинки нет. Помогите пожалуйста разобраться чем затык.
Дмитрий
Сен 08, 2015 @ 15:44:12
Такая же проблема Как у Евгения.flowplayer.rtmp-3.2.3 Грузит. поток вроде как по логам пошёл. но тут же плеер дохнет. flowplayer.rtmp-3.2.13 вообще не подаёт признаков жизни.
Eugen
Янв 25, 2016 @ 13:23:40
А что если у меня не rtmp, а rtsp?
LinHunt
Фев 15, 2016 @ 18:34:15
RTSP у вас должна отдавать камера на вовзу, а вовза уже в свою очередь раздает именно RTMP
Александр
Авг 19, 2016 @ 14:47:01
Помогите настроить плеер, не воспроизводит видео, ссылка рабочая
LinHunt
Авг 29, 2016 @ 00:42:25
Напишите код, который вы используете, посмотрю.