Пользователь
0,0
рейтинг
9 мая 2013 в 15:47

Разработка → Приручаем Ustream.tv для HD видеотрансляции на собственном сайте без показа рекламы



Предлагаю мой опыт организации живой HD видеотрансляции на сайте, который может быть интересен Вам благодаря следующим особенностям:

  • нулевые финансовые затраты и отсутствие рекламы
  • устойчивость к наплывам посетителей
  • видео высокой четкости

или хотя бы потому, что в нем есть немного хака. Если описанные особенности кажутся Вам, как минимум, взаимоисключающими — тогда прошу под кат!

Для начала пару вводных слов о трансляции живого видео на сайте вообще (если эта тема для Вас не нова — смело пропускайте).

Для того, чтобы увидеть «картинку» с камеры на странице сайта, можно пойти несколькими путями.
Первый, самый простой — использовать IP камеру со встроенным веб-сервером и «белым» IP адресом:



Тогда на странице сайта необходимо вставить iframe со страницей для гостевого просмотра живого видео IP камеры.

Преимущества весьма «вкусные»:
  • не требуется ПК работающий 24/7
  • мобильность — IP камера компактна и может быть подключена по WiFi
  • нет зависимости от сторонних сервисов и ресурсов
  • возможность записи трансляции на TF карту

Но недостатки таковы, что область применения такого решения остается весьма узкой:
  • максимум 2-8 одновременно просматривающих
  • ненадежность, возникающая из 1 пункта: достаточно злоумышленнику открыть с десяток страниц с видеотрансляцией, и (обычная) камера перестанет отвечать на новые запросы.

Большей гибкостью и надежностью обладает решение с собственным видеосервером. Он кодирует видео из любого источника и передает поток на медиасервер, на котором специальное ПО (Adobe Flash Streaming Server, Wowza, Erlyvideo, Red5 и др.) раздает видео всем желающим. Схема примерно такая:



Немногие преимущества
  • гибкость в плане выбора источника видео
  • количество просматривающих зависит только от мощности сервера, на котором располагается сайт
  • запись видео неограниченного TF-картой объема

… с лихвой перекрываются недостатками
  • высокая сложность реализации
  • большинство программных решений — платные.
  • практически невозможно реализовать в условиях дешевого виртуального хостинга сайта
  • неприспособленность к внезапным наплывам посетителей

… которые определяют для такого решения нишу профессиональных видеотрансляций, где требуется минимальная задержка живого видео, а вопрос сложности и стоимости отходит на второй план.

Для типичного сайта наиболее интересным выглядит решение, когда медиасервер располагается на мощностях крупных дата-центров, а видеотрансляция предлагается как сервис. Схема:



Преимущества:
  • не страшны внезапные резкие повышения нагрузки. Другими словами, публикация ссылки на (очень) популярном ресурсе не будет приводить к отказу системы.
  • сервисы стараются сделать пользование ими максимально простым. В том числе и в вопросе вставки трансляции на свой сайт.
  • запись видео
  • готовые средства аналитики
  • трансляция может параллельно проводиться и на самом сайте broadcast-сервиса, обладающего немалой аудиторией.

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

Стоит упомянуть, что как и в любой сфере услуг, периодически появляются сервисы-выскочки, предлагающие все тоже, только бесплатно/дешевле. Мое мнение таково: либо такой демпингующий сервис создавался без должного расчета, вскоре не справится с нагрузкой и его ждет учесть наподобие stickam; либо наоборот: есть четкий расчёт, и сначала ведется демпинг бесплатными (дешевыми) сервисами для привлечения аудитории, а затем будет проводиться жесткая политика монетизации, все вдруг станет платным и обрастет баннерами. Поэтому я беру во внимание только сервисы, которые работают уже много лет, и не будут слать вам email c сюрпризами «такая-то функция теперь платная» или «мы совершенствуемся! обновите ваш код на сайте» в самый неподходящий момент.

Рассматривая бесплатные и доступно дешевые пакеты услуг броадкаст-сервисов, я остановился на ustream.tv. Даже в бесплатном пакете услуг он сочетает такие замечательные качества, как:
  • отсутствие искусственных ограничений на размеры видео. Сможете ли вы транслировать ваше видео — зависит от битрейта и кодека. Максимальный битрейт, который принимал от меня сервис в 2013 году — 2,5Мбит/с с кодеком VP6 (6Мбит/с в 2011). А какие при этом будут размеры видео — сервису не важно. и 1х1, и 1920х1080 транслируются без проблем.
  • отсутствие ограничения на вставку видеотрансляции на сторонние ресурсы
  • поддержка внешнего источника видео

Единственный недостаток — показ рекламы поверх видео (в бесплатном пакете) — можно легко обойти.

Итак, что же нужно сделать чтобы получить качественную видеотрансляцию на своем сайте?


Зарегистрировавшись на ustream.tv, в меню пользователя выбираем «Dashboard»



Затем раскрыв список кнопкой "больше" выбираем "удаленный"

Запоминаем Ваш «RTMP URL» и «Ключ потока».



Теперь скачиваем и устанавливаем 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 устройства. Такой драйвер доступен, например, на сайте программы webcam 7.

Format — тип сжатия (h.264/VP6). Рекомендую использовать VP6 — c ним сайт принимает больший битрейт.

Frame rate — количество кадров в секунду.

Bit Rateбитрейт (степень сжатия). Больше битрейт — качественней картинка — больше задержка от реального времени. Рекомендую значения от 256 до 2048. С большими — трансляция может и не пойти.

Нажимаем Start — трансляция запущена! На сайте ustream по ссылке "Перейти к каналу" попадаем на страницу с трансляцией, нажимаем «Поделиться», "<>", «Копировать в буфер обмена». Теперь у вас есть код для вставки на страницу Вашего сайта вида:

<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>

от которого Вы сразу можете отбросить часть после закрывающего тега , добавить ключ 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

Демо


Полностью собранная демо-станица (не будет работать с 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
карма
6,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (10)

  • +16
    Честно говоря не вижу ничего хорошего в том, что бы дополнительно обманывать хорошие, бесплатные сервисы требующие только небольшого просмотра рекламы. И так АдБлоки и прочие радости режут ее в 90% случаев. Содержать и администрировать видео-сервис с огромной хай-лоад нагрузкой и очень дорогими каналами/серверами очень непросто, неужели нельзя потратить 10-15 сек при старте ролика для выражения элементарного уважения к администрации ресурса?
    • +2
      согласен.
      однако, полагаю, если подобное будет действительно доставлять хоть сколько-нибудь значимые убытки, то они поручат программистам закрыть подобные элементарные дыры. Или вообще разрешить встраивание видео только на доменах, которые укажут при создании броадкаста (вещания) пользователи (что вполне логично). Примерно так сделано на других броадкаст-сервисах.
      Возможно, у ustream есть причины не делать так — примерно два года я думал, что эту возможность вот-вот прикроют, но увидев, что ужесточать условия они не собираются, я сделал эту маленькую заметку на любимый хабр. Готов убрать ее, ни на чем не настаиваю.
  • 0
    подскажите а как туда вставить ссылку на поток, который уже идет с сжатием? только он без adobe flash media encoder, сжимается vlc
    • 0
      Проблема не в сжатии. Видео нужно отдавать по проприетарному протоколу RTMP. Не так много программ умеют с ним работать. Поэтому без использования Flash Media Live Encoder (FMLE) обойтись сложно.
      Единственное что приходит в голову для связи VLC -> FMLE, это использовать VLC -> DirectShow мост, а получившиеся DirectShow подцеплять в FMLE, либо более реалистичный, но менее элегантный вариант, попросить VLC отдавать поток по RTSP в localhost, а в FMLE выбрать драйвер RTSP -> DirectShow (см ссылку в статье) в котором подцепить RTSP поток с localhost. Если кто подскажет более красивое решение, много людей будут благодарны, ведь VLC судя по разным статьям в интернете умеет отдавать RTMP c помощью ffmpeg.
      • 0
        Извините может быть в чем то повторю вопрос. Но тоже интересует как взять чужую трансляцию в Rtmp с тогоже ustream.tv и отправить ее потом через Htttp с инкапсуляцией ts.Читал что есть тунелирование rtmp в rtmpt. И собственно как узнать Rtmp url и ключ потока не своей трансляции?
        Программы по типу getflv или Jaksta Streaming Media Recorder легко перехватывают и пишут поток с ustream.tv но от них невозможно добиться его ретрансляции.
        А vlc не хочит принимать Rtmp, хотя пишут что может если добавить rtmp dump. При этом вещать в Rtmp, vlc умеет.
  • 0
    А есть ли решение для такой ситуации — хочу захватывать видео с HDMI-источника и транслировать хотя бы на десяток пользователей? В частности интересно, каким образом организуются спортивные sopcast-трансляции и иже с ними. Имеется источник трансляции в неплохом качестве, хотелось бы его расшарить друзьям, ну и самому иметь возможность гарантировано посмотреть трансляцию, если я не дома, но интернет у меня есть. Может кто наталкивался, или сам писал подобные гайды?
    • 0
      Плата захвата с HDMI и далее либо вещать при помощи ее родного софта, либо VLC. Человек на десять думаю простая трансляция потянет зависит от мощностей компьютера. А если надо больше то можно раздать через Torrent stream(P2P), ustream.tv или подобные сервисы.
  • 0
    видимо решение подойдет только для небольшого сайта, на котором не большая посещаемость. Мне кажется, что если такое реализовать на сайте с хоть сколько-нибудь приличной посещаемостью, то сайт засветится в их статистике и они могут обратить на него внимание. Тогда порежут просто по домену. А если на небольшом сайте, так у них сотней стримеров больше, сотней меньше, тысячей зрителей больше, тысячей меньше — совсем ни на что никак не влияет.
    • 0
      Наоборот: ограничение на вставку видео на чужие домены — платная услуга Ustream («Embed Control»).
      То есть, ustream предоставляет удобную кнопку «получить код для вставки на свой сайт» прямо на видео (в меню «Поделиться»), и берет деньги за возможность броадкастеру «порезать по доменам» свою трансляцию (от 500$/мес).
      Так что видео, располагающееся на не на их домене, точно никак не будет выделяться в статистике.
      Дополнительно, в бесплатном тарифе нет ограничения на трафик («viewer hours»).
      Плюс к этому, рекламу и баннеры они убирают сами, штатными скриптами.
      Хотя, конечно, установить свои правила для отдельного ненавистного сайта им никто не запретит.

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