- PVSM.RU - https://www.pvsm.ru -
Предлагаю мой опыт организации живой HD видеотрансляции на сайте, который может быть интересен Вам благодаря следующим особенностям:
или хотя бы потому, что в нем есть немного хака. Если описанные особенности кажутся Вам, как минимум, взаимоисключающими — тогда прошу под кат!
Для начала пару вводных слов о трансляции живого видео на сайте вообще (если эта тема для Вас не нова — смело пропускайте).
Для того, чтобы увидеть «картинку» с камеры на странице сайта, можно пойти несколькими путями.
Первый, самый простой — использовать IP камеру со встроенным веб-сервером и «белым» IP адресом:
Тогда на странице сайта необходимо вставить iframe со страницей для гостевого просмотра живого видео IP камеры.
Преимущества весьма «вкусные»:
Но недостатки таковы, что область применения такого решения остается весьма узкой:
Большей гибкостью и надежностью обладает решение с собственным видеосервером. Он кодирует видео из любого источника и передает поток на медиасервер, на котором специальное ПО (Adobe Flash Streaming Server, Wowza, Erlyvideo, Red5 и др.) раздает видео всем желающим. Схема примерно такая:
Немногие преимущества
… с лихвой перекрываются недостатками
… которые определяют для такого решения нишу профессиональных видеотрансляций, где требуется минимальная задержка живого видео, а вопрос сложности и стоимости отходит на второй план.
Для типичного сайта наиболее интересным выглядит решение, когда медиасервер располагается на мощностях крупных дата-центров, а видеотрансляция предлагается как сервис. Схема:
Преимущества:
Основной недостаток один: для таких сервисов трансляция видео — вторичная задача. Первичная — получение прибыли. Поэтому при любой возможности будут вставляться «палки в колеса»: хочешь HD качество — плати, отсутствие рекламы — доплати еще; возможность вставки трансляции на свой сайт и кастомизации плеера тоже зачастую входит в платный пакет услуг.
Стоит упомянуть, что как и в любой сфере услуг, периодически появляются сервисы-выскочки, предлагающие все тоже, только бесплатно/дешевле. Мое мнение таково: либо такой демпингующий сервис создавался без должного расчета, вскоре не справится с нагрузкой и его ждет учесть наподобие stickam [2]; либо наоборот: есть четкий расчёт, и сначала ведется демпинг бесплатными (дешевыми) сервисами для привлечения аудитории, а затем будет проводиться жесткая политика монетизации, все вдруг станет платным и обрастет баннерами. Поэтому я беру во внимание только сервисы, которые работают уже много лет, и не будут слать вам email c сюрпризами «такая-то функция теперь платная» или «мы совершенствуемся! обновите ваш код на сайте» в самый неподходящий момент.
Рассматривая бесплатные и доступно дешевые пакеты услуг броадкаст-сервисов, я остановился на ustream.tv. Даже в бесплатном пакете услуг он сочетает такие замечательные качества, как:
Единственный недостаток — показ рекламы поверх видео (в бесплатном пакете) — можно легко обойти.
Зарегистрировавшись на ustream.tv [3], в меню пользователя выбираем «Dashboard»
Затем раскрыв список кнопкой "больше [4]" выбираем "удаленный [5]"
Запоминаем Ваш «RTMP URL» и «Ключ потока».
Теперь скачиваем [6] и устанавливаем Adobe flash media live encoder (требуется регистрация на сайте adobe).
В главном окне Adobe flash media live encoder вставляем скопированный адрес «RTMP URL» в поле «FMS URL», а «Ключ потока» — в «Stream»
Основные параметры, которые нужно настроить перед трансляцией:
Device — видеоисточник. Источником может быть не только веб-камера, но и любое другое DirectShow-совместимое устройство (ТВ-тюнер, плата видеозахвата, программная эмуляция устройства и т.п.). По запросу «Virtual webcam» можно подобрать программу (например, «ManyCam») после установки которой в системе появится виртуальная веб-камера, источником видео для которой может быть все что угодно — видеофайлы, реальная веб камера, изображения, рабочий стол и т.п. с переключением «на лету». Также источником может быть выбран драйвер IP камеры, который преобразует RTSP, MJPEG и другие виды видеопотоков с вебкамеры в виртуальные DirectShow устройства. Такой драйвер доступен, например, на сайте [7] программы webcam 7.
Format — тип сжатия (h.264/VP6). Рекомендую использовать VP6 — c ним сайт принимает больший битрейт.
Frame rate — количество кадров в секунду.
Bit Rate — битрейт [8] (степень сжатия). Больше битрейт — качественней картинка — больше задержка от реального времени. Рекомендую значения от 256 до 2048. С большими — трансляция может и не пойти.
Нажимаем Start — трансляция запущена! На сайте ustream по ссылке "Перейти к каналу [9]" попадаем на страницу с трансляцией, нажимаем «Поделиться», "<>", «Копировать в буфер обмена». Теперь у вас есть код для вставки на страницу Вашего сайта вида:
<iframe width="480" height="302" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct" scrolling="no" frameborder="0" style="border: 0px none transparent;"> </iframe> <br /><a href="http://www.ustream.tv/" style="padding: 2px 0px 4px; width: 400px; background: #ffffff; display: block; color: #000000; font-weight: normal; font-size: 10px; text-decoration: underline; text-align: center;" target="_blank">Broadcasting live with Ustream</a>
от которого Вы сразу можете отбросить часть после закрывающего тега </iframe>
, добавить ключ autoplay=true
для автоматического начала трансляции, а также установить нужные Вам размеры видео, поменяв соответственно значения width
(ширина) и height
(высота) тега iframe
на нужные вам. Получится что-то вроде:
<iframe width="1920" height="1080" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>
Вставив скопированный код на страницу своего сайта, Вы уже получите рабочую видеотрансляцию, но с бонусами в виде рекламы до двадцати двух секунд при открытии трансляции
и всплывающими поверх видео баннерами
что не есть хорошо. Для того, чтобы сервис перестал показывать рекламу, нужно представиться «бедными родственниками» — показать сервису, что видео у нас такое маленькое, что даже размещать на нем рекламу зазорно. Меняем размеры видео на, скажем, 96х65 точек:
<iframe width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>
и реклама чудесным образом пропадает! Как, впрочем, и смысл трансляции (в таком разрешении). Поэтому сразу после нашего маленького обмана нужно «сбросить маску» — вернуть размер видео к нормальным значениям. В этом нам поможет javascript. Присваиваем iframe
какой-либо id
(в примере — «UstreamIframe») и дополняем код маленьким скриптом:
<iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>
<script>
document.getElemetntById('UstreamIframe').style.cssText = "width:1920px;height:1080px;";
</script>
Готово! Видео есть, рекламы нет. Но испытания показали, что при работе на слабых или сильно загруженных другими задачами процессорах, флэш может не зафиксировать маленький размер видеоролика, а сразу увидеть увеличенный до нормальных значений с помощью javascript. Решением «в лоб» было бы добавление таймера, благодаря которому возврат размера ролика происходил бы после отрисовки DOM элементов, но это не «тру», хотя и рабочее решение. Правильно было бы возвращать размер непосредственно после инициализации соединения flash с серверами ustream. Для этого потребуется воспользоваться API ustream, благо оно доступно и в бесплатном пакете. Все что нужно для подключения API — добавить в секцию head
внешний скрипт:
<script src="http://static.ustream.tv/js/libs/ustream-embedapi.js"></script>
А также вынести изменение размера в отдельную функцию, которая будет вызываться, когда flash скажет серверам ustream, что нам рекламу показывать не нужно
<iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="border: 0px none transparent;"></iframe>
<script>
function restoreSize()
{
document.getElemetntById('UstreamIframe').style.cssText = "width:1920px;height:1080px;";
}
//объект для доступа к API Ustream
$ustreamAPI = UstreamEmbed('UstreamIframe');
$ustreamAPI.addListener('playing', restoreSize);
</script>
Этого достаточно для борьбы с рекламой, но осталась еще «фирменная» панель управления Ustream, с их логотипом-ссылкой и кнопками, позволяющими кому угодно взять код и вставить себе. Бороться с этим легко средствами CSS и уже подключенным API. Оборачиваем iframe
в div
, а высоту iframe
намеренно cделаем больше высоты div
так, чтобы не поместилась ровно нижняя панель Ustream. Тогда благодаря CSS свойству overflow
ее не будет видно:
<div>
<iframe id="UstreamIframe" width="96" height="65" src="http://www.ustream.tv/embed/123456?v=3&wmode=direct&autoplay=true&adfree=1" scrolling="no" frameborder="0" style="margin-top: -96px;border: 0px none transparent;"></iframe>
</div>
<script>
$videoW = 1920; //Ширина вашего видео
$videoH = 1080; //Высота вашего видео
window.skipAd = function ()
{
$extraH = 200;
$barH = 32; //высота элементов управления Ustream
$videoContainer.style.height = ($videoH+$extraH)+"px";
$videoContainer.style.width = $videoW+"px";
$videoContainer.style.marginTop = "-"+($extraH/2-$barH/2)+"px";
$videoContainer.parentNode.style.width = $videoW;
$videoContainer.parentNode.style.height = $videoH;
}
$videoContainer = document.getElementById('UstreamIframe');
$videoContainer.parentNode.style.overflow = 'hidden'; //можно перенести в CSS
$ustreamAPI = UstreamEmbed('UstreamIframe');
$ustreamAPI.addListener('playing', skipAd);
</script>
Теперь у Вас есть чистое видео без «довесков». Что не есть хорошо — возможность управлять видео все же нужна. Средствами Ustream API вы легко можете создать собственные элементы управления для нужных Вам действий. Добавим, например, в код страницы кнопки «Пауза», «Проигрывание», «Выключить/включить звук»:
<button onclick="$ustreamAPI.callMethod('play')"> [ > ] Play </button>
<button onclick="$ustreamAPI.callMethod('pause')"> [ || ] Pause </button>
<button onclick="$ustreamAPI.callMethod('volume', 0)"> [ ? ] Mute </button>
<button onclick="$ustreamAPI.callMethod('volume', 100)"> [ )) ] Unmute </button>
… и они сразу будут работать. Полный список команд — в официальной документации Ustream Embed API [10]
Полностью собранная демо-станица (не будет работать с localhost из-за кроссдоменной политики!):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Video stream demo</title>
<script src="http://static.ustream.tv/js/libs/ustream-embedapi.js"></script>
</head>
<body>
<div>
<iframe id=UstreamIframe width="96" height="65" src="http://www.ustream.tv/embed/11435186?v=3&autoplay=true&wmode=direct&adfree=1" scrolling="no" frameborder="0" style="margin-top: -96px;border : 0px none transparent;"></iframe>
</div>
<button onclick="$ustreamAPI.callMethod('play')">[ > ] Play</button>
<button onclick="$ustreamAPI.callMethod('pause')">[ || ] Pause</button>
<button onclick="$ustreamAPI.callMethod('volume', 0)">[ ? ] Mute</button>
<button onclick="$ustreamAPI.callMethod('volume', 100)">[ )) ] Unmute</button>
<script>
$videoW = 1920; //Ширина вашего видео
$videoH = 1080; //Высота вашего видео
window.restoreSize = function ()
{
$extraH = 200;
$barH = 32;
$videoContainer.style.height = ($videoH+$extraH)+"px";
$videoContainer.style.width = $videoW+"px";
$videoContainer.style.marginTop = "-"+($extraH/2-$barH/2)+"px";
$videoContainer.parentNode.style.width = $videoW;
$videoContainer.parentNode.style.height = $videoH;
}
$videoContainer = document.getElementById('UstreamIframe');
$videoContainer.parentNode.style.overflow = 'hidden';
$ustreamAPI = UstreamEmbed('UstreamIframe');
$ustreamAPI.addListener('playing', restoreSize);
</script>
</body>
</html>
Если Ваш сайт использует SSL, то в адрес ролика на ustream также нужно будет добавить https (https://www.ustream.tv/embed/123...)
Пользуюсь сервисами Ustream.tv уже два года, и, как ни странно, условия они не ужесточают. Вероятно, в связи с возросшей нагрузкой, сервер редко стал принимать потоки больше 2,5Мбит/сек, поэтому, для надежности, использую поток не более 2Мбит/с.
Надеюсь, представленный опыт поможет Вам создать качественную видеотрансляцию на своем сайте или страничке в соцсети!
Автор: WinZ
Источник [11]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-razrabotka/33946
Ссылки в тексте:
[1] хостинга: https://www.reg.ru/?rlink=reflink-717
[2] stickam: http://www.stickam.com
[3] ustream.tv: http://www.ustream.tv/login-signup
[4] больше: http://habrastorage.org/storage2/352/985/65d/35298565d4d274460617efa4e6cfe028.png
[5] удаленный: http://habrastorage.org/storage2/faf/0a8/67a/faf0a867afcd1a0c22a450e7b49d04d8.png
[6] скачиваем: http://www.adobe.com/products/flash-media-encoder.html
[7] сайте: http://www.webcamxp.com/download.aspx
[8] битрейт: http://ru.wikipedia.org/wiki/%D0%91%D0%B8%D1%82%D1%80%D0%B5%D0%B9%D1%82
[9] Перейти к каналу: http://habrastorage.org/storage2/2a4/0ef/608/2a40ef6089c1e3615aa08162133e4846.png
[10] документации Ustream Embed API: http://developer.ustream.tv/embedapi
[11] Источник: http://habrahabr.ru/post/179169/
Нажмите здесь для печати.