Jump to content
sash

Трансляция видеопотока на сайте

Recommended Posts

Добрый, столкнулся с небольшой дилеммой при выборе конечного решения. Хочу интегрировать "видео стену" в самописную панель управления датчиками, оборудованием.

 

Сервер системы (apache + php), а так же сервер devline и сами камеры будут жить внутри изолированной локальной сети. В качестве оборудования клиента - браузер с компьютера, планшета, телефона.

На "видео стене" будет одновременно показываться 4-6 камер. Управление не требуется - просто "прямой эфир". Начал копать смотреть http://devline.ru/aboutweb/ , плюс все это запускать.

 

//данные смотрел через диспетчер закладок chrome, 4 камеры 720p

 

 

1) самый простой способ через тег IMG, с минимум усилий, но нагрузка процессора составила около 5% постоянно + трафик 2,5 мбита

<img src="http://server:9786/cameras/1/video?authorization=Basic%20***">

плюсы - кроссбраузерность, требует мало озу

минусы - нагрузка, постоянный трафик

 

 

2) использовать flash плеер, например uppod с трансляцией потока .flv / .m3u8

<object type="application/x-shockwave-flash" id="lbPub" name="lbPub" data="uppod.swf" width="640" height="360">
<param name="bgcolor" value="ffffff">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<param name="flashvars" value="uppod=video&st=video.txt&comment=&poster=http://server:9786/cameras/1/image?authorization=Basic%20***&file=http://server:9786/cameras/1/streaming/main.m3u8?authorization=Basic%20***&uid=lbPub">
</object>

плюсы - трафик "всплесками" - при загрузке следующего куска, нагрузки почти никакой, требует мало озу

минусы - нет флеша - нет видео, iOS пролетает

 

 

3) использовать html5 video + hls. Это может быть hls.js от devline, скрипты от videojs

<head>
<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>
 
<body>
<video id=example width=600 height=300 class="video-js vjs-default-skin" controls>
<source src="http://server:9786/cameras/6/streaming/main.m3u8?authorization=Basic%20***" type="application/x-mpegURL">
</video>
 
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.5.1/videojs-contrib-hls.js"></script>
<script>var player = videojs('example'); player.play();</script> 
</body>

плюсы - кроссбраузерность, трафик "всплесками" - при загрузке следующего куска, нагрузки почти никакой

минусы - память утекает при просмотре, 400-600 мегабайт озу - легко! все что подгружает - уходит в память (blob)

 

 

Есть еще вариант с перекодированием видеопотока, с условиями - если PC - показываем флеш, если телефон - HLS...

А каково мнение разработчиков? Может какие вариации упустил?

Share this post


Link to post
Share on other sites

Добавлю  

1. hls.js  - IOS из коробки в пролете.  IE в пролете.

2. Flash активно "выпиливается", хотя по моему мнению на данный момент это лучшее решение.

3. Лайфхак 

<video poster='http://demo.devline.ru:1818/cameras/1/video?resolution=640x480&authorization=Basic%20Z3VhcmQ6'></video>

>Есть еще вариант с перекодированием видеопотока

Зачем?

У вас же есть (apache + php)

Смотрите User-Agent

если IE то FLASH

если iOS то native hls

для остальных hls.js

Share this post


Link to post
Share on other sites

Ну да... упустил html конструктор на сайте

https://devline.ru/translation/

 

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

А возможно ли в miniflashflv убрать нижнюю панель совсем?

Share this post


Link to post
Share on other sites

Здравствуйте!

 

А возможно ли в miniflashflv убрать нижнюю панель совсем?

 

 

Уточняю, сообщу дополнительно (#9896).

Share this post


Link to post
Share on other sites

Добавлю  

1. hls.js  - IOS из коробки в пролете.  IE в пролете.

2. Flash активно "выпиливается", хотя по моему мнению на данный момент это лучшее решение.

3. Лайфхак 

<video poster='http://demo.devline.ru:1818/cameras/1/video?resolution=640x480&authorization=Basic%20Z3VhcmQ6'></video>

 

Ой, вчера пропустил ваше сообщение.

 

1. HLS у меня нормально "видел" iOS. Да, было не видео в контейнере, а просто "видео по клику", хз как описать правильнее. Но смысл - работает. Не 4 камеры одновременно...

 

2. Flash - "да" - выпиливается, и "да" - все равно отличное решение в плане гибкости, выбора и нагрузки

 

3. Забавно ) В принципе, это аналог IMG будет

 

 

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

Share this post


Link to post
Share on other sites

Кстати, есть еще не менее важный момент - задержка, она на потоках везде разная. Понятно, что надо учитываться буферизацию, но тем не менее M-JPEG поток - имеет наименьший лаг относительно "реальности"

Share this post


Link to post
Share on other sites
Кстати, есть еще не менее важный момент - задержка, она на потоках везде разная.

 

 

Для второго и последующих подключений она должна быть меньше на всех потоках кроме M-JPEG

Share this post


Link to post
Share on other sites

Кстати, есть еще не менее важный момент - задержка, она на потоках везде разная. Понятно, что надо учитываться буферизацию, но тем не менее M-JPEG поток - имеет наименьший лаг относительно "реальности"

hls всегда будет иметь задержку

сначала надо собрать ts (видеофайл)

потом создать манифест (m3u8)

потом клиенту нужно его загрузить и показать пользователю 

-- 

меньше задержки будет в Наблюдательном посте.

Share this post


Link to post
Share on other sites

К сожалению те камеры, которые доступны - время сильно гуляет, появлюсь на объекте - задам локальный сервер времени (камеры в изолированной подсети), тогда смогу предоставить для статистики достоверные данные

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×