Как сделать трансляцию на сайте
Связь в реальном времени может понадобится в разных ситуациях, например, для проведения онлайн-трансляций. Онлайн-трансляции позволяют обмениваться информацией с неограниченным количеством людей. Можно собирать небольшие группы и транслировать свой контент, либо же организовывать большие встречи.
Для проведения онлайн-трансляций обычно используются специальные программы и сторонние сервисы, но бывает необходимо сделать онлайн-трансляцию на своем сайте. Для неподготовленного пользователя это достаточно сложная задача и здесь потребуется помощь специалиста.
Типы контента для онлайн-трансляций
Онлайн-трансляции могут подразумевать трансляцию различных данных, обычно это текст, аудио или видео данные:
Как сделать онлайн-трансляцию на сайте
Для этого можно использовать сторонние сервисы и просто подключить их на свой сайт, однако это не так эффективно, как разработка и внедрение собственной системы трансляции на своем сайте. Что может включать в себя создание онлайн-трансляции на сайте:
Технология WebRTC
Что такое WebRTC? Это новейшая технология, которая позволяет организовывать коммуникации в режиме реального времени. Наиболее эффективна она для проведения трансляций, в которых принимают участие два человека. А для проведения групповых конференций потребуется использоваться сторонние сервера для маршрутизации потоков.
Для реализации больших конференций на сайте можно разработать свою систему распределения потоков или использоваться для этой цели сторонние сервера, разработчики которых уже решили данную проблему. Но данные возможности обычно платные, поэтому лучше один раз потратиться на реализацию своей системы. Особенно это актуально, если требуется сделать защищенную трансляцию, где нужна повышенная безопасность – когда все потоки должны шифроваться, передаваться и обрабатываться только своими средствами.
Таким образом, чтобы сделать онлайн-трансляцию на своем сайте (текст, аудио или видео чат), прежде всего необходимо определиться с количеством участников. Для одного или двух участников задача может быть решена при помощи новой технологии – WebRTC, а для большего количество участников дополнительно потребуется реализации системы маршрутизации потоков.
Как настроить трансляцию на сайт с любой камеры видеонаблюдения
В начале 2016 года сервис для организации трансляций «Линия» подвергся неожиданному испытанию на прочность. А все благодаря событиям в сафари-парке, где в одном вольере жили самые распиаренные в стране тигр и козел. 31 декабря 2015 года в эфире национального телевидения было объявлено о начале прямой трансляции, которая была организована с помощью нашего сервиса. Практически сразу после этого не выдержал нагрузки как сайт парка, так и наши серверы.
В течение пары часов трансляция была восстановлена, добавлены необходимые мощности для более чем 2 500 000 подключений к IP-камерам. За следующую неделю в сервис были добавлены серверы в Голландии и США, разработана функция защиты трансляции. В общем, мы сделали все, чтобы наш сервис выдерживал любой объем желающих посмотреть популярную трансляцию. В этом конкретном примере аудитория составила более 10 млн человек.
С тех пор популярность этой услуги только растет. Мало того, что это прекрасный маркетинговый инструмент, который можно применить абсолютно в любом бизнесе, так еще и приносит приятные бонусы в виде улучшения поведенческих характеристик сайта и повышения доверия к компании, продукту или услуге.
Помимо Амура и Тимура, на нашей практике есть множество интересных примеров. Это и сеть цветочных магазинов, и стационар в клинике для домашних животных, и спортивные события. В общем, для бизнеса это просто кладезь идей, которые мы рассмотрели подробно и с примерами в этой статье.
От идеи к реализации. Как все организовать максимально выгодно
Потоки камер «из коробки» не предназначены для трансляции на сайте, поэтому лучше использовать программное обеспечение для видеонаблюдения. У тех, кто ранее установил такую систему, лишних затрат будет по минимуму или вообще не будет.
Остальным можно воспользоваться бесплатной демоверсией программы для видеонаблюдения «Линия» для Linux. Для трансляции понадобится только камера, с которой мы будем забирать поток и видеосервер на Linux.
Причем физический сервер – совсем не обязательный элемент. Можно установить «Линию» на VPS. Выбрать подходящий виртуальный сервер поможет множество обзоров как на Geektimes и Habrahabr, так и в других источниках.
Настройка трансляции возможна с помощью клиента «Линия» для Windows. Даже в демоверсию программного обеспечения мы заложили много полезных фишек, в том числе возможность оповещения при пропаже сигнала с камеры.
Размещение трансляции на сайте
После установки и проверки всех компонентов системы можно размещать трансляцию на вашем сайте. Создать собственный дизайн плеера можно, используя возможности html5 video + css.
API cистемы видеонаблюдения «Линия» позволяет получить как текущий кадр, так и H.264 поток (hls, flv).
Но идеального решения для всех платформ не существует. Так, Internet Explorer может проигрывать только flv, Chrome в последнее время активно блокирует flash, в iOS не работает hls.js.
Решить это можно, написав обработчик на JavaScript или PHP, или использовать наше готовое решение — a.devline.ru/html5.
Безопасность превыше всего
Рассмотрим ситуацию, в которой ваша идея трансляции «выстрелила», и теперь тысячи людей со всего света заходят на ваш сайт ежечасно. Некоторые из них совсем не с добрыми намерениями, поэтому необходимо защититься от хотлинка, скрыть данные авторизации и IP-адрес сервера, настроить кеширование и так далее.
Тут на помощь приходит nginx, прописываем пару строк в конфиге, и сервер будет давать доступ только по ссылке следующего вида:
Мы все сделали за вас
Все вышеперечисленное можно не делать самому, а просто воспользоваться нашим готовым решением — rtsp.me. Для работы сервиса не нужно быть пользователем программного обеспечения «Линия», достаточно иметь IP-камеру или DVR, поддерживающий RTSP-потоки. Оборудование должно быть со статическим IP-адресом и проброшенными портами.
Вы получаете защищенную трансляцию с поддержкой звука, возможность переключения между первым и вторым потоком. Посетители сайта не увидят реального логина и пароля от вашего видеосервера, ретранслятор продублирует видео, если смотрящих больше, чем один.
А наличие небольшого логотипа внизу плеера позволяет предоставлять услуги бесплатно. Лого можно убрать, выбрав один из платных тарифов.
Также пользователям сервиса доступна функция Timelapse — видео из серии кадров с вашей камеры видеонаблюдения. Десять дней с циклической записью, каждый кадр делается раз в десять минут. Файл создается раз в 24 часа, битрейт выходного видео − 2 Мб/с. Существует платная версия с неограниченной глубиной архива в оплаченный период, а также с индивидуальными настройками периодичности создания кадров, времени создания записи, битрейта видео.
Какой вариант организации трансляции вы бы выбрали? Может быть, у вас уже есть трансляция на сайте? О чем она и во сколько вам обходится?
Как отображать потоковое видео с помощью HTML5
Основы
Пару вещей которые стоит запомнить:
Есть интересный момент, когда речь идет о воспроизведении видео в полноэкранном режиме. По умолчанию, большинство браузеров отключают эту функцию, но вы можете обойти это, вставив следующий JavaScript код:
Причиной того что видео не работает на сайте может быть отсутствие доступа к серверу, некорректное имя файла, не полный исходный URL или просто Apache (если вы используете его), не распознает тип расширения или тип mime.
Настройка Apache Web Server
Вам нужно добавить mime типы в расширение, либо в файл apache.conf или в mime.conf. После внесения измененный перезапустите сервер.
Как реализовать с flash
1. Загрузить SWFObject из Git или с других источников.
2. Разместить его на странице:
Этот код должен быть размещен в шапке файла.
3. Вы можете реализовать его с помощью тэга Object tag или:
4. Теперь вам нужно прописать следующее:
FlowPlayer
Есть несколько вариантов для реализации FlowPlayer. FlowPlayer.org имеет две версии: флэш-плеер под названием Flowplayer flash и HTML5 implementation. Вторая имеет бесплатный вариант для разработчиков, в то время как для flash нужно купить лицензию.
Некоторые встраивают плеер на сайт в то время как хостинг видео находится в другом месте. Мы же встроим видео плеер в наш сайт и разместим файлы локально. Для этого нужно:
1. Убедиться, что следующие файлы загружены:
3. В теле вашей веб-страницы, вам нужно установить плеер с src файлом:
В этом примере я использовал переменную, основанную на выборе пользователя из предыдущей страницы.
Не то, что вы создали файл и идентификатор нам нужно установить вверх код, который на самом деле запускает файл.
Вы добавили файл и id, теперь нужно прописать код который запустит файл:
Советы эксперта как организовать онлайн трансляцию в популярных соцсетях
Как организовать онлайн трансляцию? Этот вопрос возникает у каждого, кто начинает вести обучение или бизнес в интернете. Ведь через онлайн трансляцию проще воздействовать на эмоции: мимика, жесты, живой голос привлекают и создают ощущение личного присутствия, вызывают доверие.
Поэтому прямые эфиры и вебинары продают лучше, чем текст. В последние пару лет самые популярные социальные сети ФБ, Инстаграм, ВК, YouTube предоставляют нам этот уникальный инструмент для развития и продвижения, но… Разумеется всегда существуют НО, которые не дают его использовать! Это убеждения и страхи, что вы:
В этой статье я, как онлайн тренер с 5-летним опытом прямых эфиров за плечами и практикой работы на телевидении, постараюсь максимально подробно ответить на вопрос: как организовать онлайн трансляцию в самых популярных соцсетях и чувствовать себя во время них комфортно и уверенно.
Подготовку нужно проводить в трех направлениях. И начинать надо отнюдь не с того, чтобы быстренько освоить запуск трансляции. Какую бы соцсеть вы не выбрали, в настройках будущего прямого эфира надо будет обязательно указать тему и описание. Поэтому начните с того, что вы хотите сказать и как эта информация может решить проблемы людей. А с датой и временем проведения вы определились?
Первый этап — ментальная и информационная работа
Создание информационного поля обеспечит вам присутствие зрителей в реальном времени. Но те, кого тема заинтересует, но они не могут присутствовать на онлайн трансляции — посмотрят её в записи. Их будет гораздо больше, всегда помните об этом, и не расстраивайтесь, если в назначенное время вас будут смотреть пара человек — это нормальное для начинающих явление. А с теми кто придет, обязательно наладьте диалог: задавайте вопросы, читайте их ответы в чате и поблагодарите за то, что они с вами.
Вот теперь можно перейти к второму этапу — техническим настройкам.
Как создать трансляцию онлайн с веб камеры
На заре моих прямых эфиров я пользовалась встроенной в старенький ноутбук веб камерой, поэтому изображение было темным и слегка размытым. Стоило мне настроить средний план и занять получше освещенное место, как звук становился очень далеким и тихим, а микрофона-петлички у меня на тот момент не было. Оставалось только с печалью смотреть на такие записи трансляций — дальнейшему использованию они не подлежали.
Поэтому не зацикливайтесь на мысли о том, что сделать проще — подумайте о перспективе для которой гораздо важнее фактор лучше, качественнее. Ведь записанная трансляция — это видеоконтент, его можно скачать из соцсети и загрузить на видеоканал, встроить на сайт. Более того, вы можете обнаружить, что проведенный эфир вполне мог бы стать для вас лид магнитом или даже частью платного курса.
Стоит помнить о том, что проведение прямых трансляций по мобильному интернету с телефона или беспроводной сети WI-FI чревато нестабильностью передачи потокового видео. Если вы заинтересованы видеозапись эфира сохранить, то проводное соединение с ноутбука или компьютера с использованием веб камеры бесспорно качественнее, и вы получите запись без помех и застывших кадров.
На сегодняшний день с компьютера или ноутбука можно создать трансляцию онлайн с веб камеры в любой из 3-х популярных соцсетей: Facebook, ВКонтакте и YouTube. В ФБ и YouTube есть возможность запустить трансляцию без использования видеокодера. Во ВКонтакте обязательно нужно будет установить на компьютер специальную программу для обеспечения вещания.
Как организовать онлайн трансляцию в новом FB live producer
Чтобы настроить трансляцию Facebook live, там где поле “Создание публикации” смотрите на нижнюю строку — дополнить публикацию фото/видео и отметить друзей. Прямой эфир откроется, если нажать на три точки.
После выбора откроется новая страница. И скорее всего, на черном поле вы увидите надпись: Невозможно найти камеру или микрофон — пожалуйста, подключите ваше устройство и проверьте правильность разрешений в вашем браузере.
Поэтому скрольте страницу ниже к разделу с настройками. Из 3-х предложенных способов выбирайте самый простой — “камера”. Если у вас подключена одна веб камера, не стоит беспокоится и ничего не придется выбирать, информация о ней и микрофоне отобразиться в нужных окнах.
После этого, обратите внимание на левую колонку, и заполните поля: тема трансляции и описание. Тут же можно настроить кто увидит ваш прямой эфир, и вариантов немало. Для теста можно выбрать “только я”, но не забудьте переключить на “общедоступная”, когда будете выходить в реальный прямой эфир. Тут же можно выбрать где проводить трансляцию:
Все эти настройки можно сделать буквально за 10-15 минут до начала трансляции. А в назначенное время нажмите голубую кнопку в левом нижнем углу “выйти в эфир”. Во время эфира у вас будет возможность не только видеть предпросмотр с вашей веб камеры внизу справа, но и комментарии в левой колонке. После окончания “завершите прямой эфир”, после чего появится новое окно со стрелкой “переход к публикации” — там вы найдете запись.
Но, если вы захотите запланировать свою трансляцию заранее, то вам нужно будет установить на компьютер видеокодер. Среди таковых бесспорный лидер — OBS, он же «Open Broadcaster Software». Программа бесплатная и имеет достаточно широкий функционал. К примеру, она также может записывать видео через веб камеру и совмещать в кадре ваше живое видео и слайды презентации.
Как технически организовать онлайн трансляцию через Youtube с веб камеры
Чтобы организовать онлайн трансляцию через YouTube с веб камеры без установки видеокодера, обязательно нужен аккаунт Google. Зарегистрируйтесь на почте Gmail и вы автоматически станете обладателем канала на YouTube с возможностью размещения видеороликов.
Но для проведения прямых эфиров этого недостаточно. Поэтому вам придется пройти стандартную процедуру подтверждения своего аккаунта с помощью телефона. Спустя 24 часа. зайдите в раздел “Статус и функции”. Вы должны увидеть, что вам разрешено проводить прямые трансляции (значок “включено”) Вот краткий пошаговый план, что делать дальше:
Чтобы остановить эфир, нужно нажать ту же кнопку. Запись вашей трансляции сохранится, если она длилась менее 12 часов. Кроме того, YouTube сразу же предложит “изменить в творческой студии”, что по-русски означает обработать в видеоредакторе.
В “Творческой студии” в разделе “Трансляции”, будет сохраняться информация обо всех ваших эфирах (будущих и прошедших) Так что в перспективе – это один из способов наполнения вашего канала полезным контентом.
Третий этап — подготовка себя и места для эфира
Те, кто уже попробовал общаться со своей аудиторией с помощью онлайн трансляций в социальных сетях, знают — этот процесс “затягивает”! Ведь прямые эфиры — это некий обмен энергией с аудиторией. Живое слово гораздо яснее и действеннее, чем написанный текст. Особенно, когда ты не гуру копирайтинга и писательского мастерства.
Самый простой способ организовать видеотрансляцию на сайте
На моей первой работе в соцпакет помимо бесплатных обедов входила видеотрансляция из столовой — по известному всем сотрудникам адресу можно было в прямом эфире посмотреть, есть ли свободные столики, чтобы не усугублять страдания пережившего в ожидании обеда половину рабочего дня организма ещё и стоянием в очереди. Для сисадмина магия не очень сложная, зато для большинства работников — очень нужная. Но прогресс не стоит на месте, и наладить публичную трансляцию практически с любой камеры сегодня смог бы любой из тех, кто обедал тогда в той столовой.
Мало кто знает, но в Ivideon есть очень полезная и совершенно бесплатная функция, которая позволяет открыть доступ к камере и встроить ее в свой сайт или в блог буквально в пару кликов: не нужно разворачивать сервера и собственную CDN, если вещание планируется глобальным, не требуется ставить стриминговое ПО вроде VLC, Wowza, RED5 и полностью отвечать за трансляции от и до. Всю основную работу сделает облако Ivideon.
Подключение камеры
В качестве источника видеосигнала для Ivideon может работать почти всё, что угодно:
В последнем случае не требуется даже наличия компьютера с работающим Ivideon Server. Есть как внутренние камеры для помещений, так и уличные варианты. Причем у некоторых из них присутствует встроенная возможность подключения через 3G или Yota за счет установки соответствующего USB-модема.
Настройки публичности
Конечно, Ivideon это прежде всего сервис приватного видеонаблюдения. Камера, подключенная к Ivideon сама сообщает о подозрительном движении или звуке, записывает событие в облако и информирует об этом владельца, например, при помощи push-уведомления.
Если мы хотим использовать камеру для трансляции на нашем сайте, её требуется сделать публичной.
Делается это буквально за пару кликов:
Нажимаем на кнопку настроек под изображением с камеры камеры в личном кабинете Ivideon и выбираем пункт меню: “Публичный доступ”:
В результате открывается окно, где выполняются все основные настройки:
Последний шаг позволяет просто включать/выключать публичный доступ к уже настроенной трансляции. Вот и весь мануал — всё действительно настолько просто.
Встраивание
Код видеотрансляции встраивается как обычный iFrame — например, Ютуба. Трансляция будет работать и на сторонних ресурсах, которые поддерживают iFrame — например, встраивать трансляции Ivideon можно в ЖЖ или Blogger.com.
Возникла также идея добавить прямые трансляции Ivideon в список поддерживаемых ресурсов и на Хабре. Напрашиваются разные варианты их полезного применения: например, образовательный хаб можно оживить прямыми трансляциями интересных лекций. Хаб «Офисы IT-компаний» — трансляциями из этих самых офисов. А там, глядишь, и в хабе «Космонавтика» можно будет показывать запуски ракет в прямом эфире. Наверняка, это не все возможные варианты полезного для Хабра применения такого функционала. deniskin эту идею поддержал и пообещал в будущем встроить ivideon в число поддерживаемых видеосерверов на Хабре.
В сухом остатке использование Ivideon даёт следующее:
Ivideon TV
Поддержка публичных камер в Ivideon это дополнительная опция, которая, вдруг, стала популярной. В какой-то момент нам стало интересно объединить все открытые пользователями камеры в единый каталог. Мы назвали его Ivideon TV.
По нему можно «побродить» и посмотреть варианты камер, которые пользователи открывают и т.д. Все камеры проходят премодерацию: в Ivideon TV не будет трансляций, в которых люди самовыражаются с помощью отсутствия одежды.
Кстати, важно понимать, что качество трансляции камеры прежде всего зависит от самой камеры, которую поставил пользователь и доступного на его стороне интернет-канала для передачи видео с этой камеры. Некоторые используют 3G, что, порой, становится заметно при просмотре. В Ivideon TV присутствуют как очень качественные, так и дешевые китайские камеры, поэтому качество изображения очень разное.
Есть много интересных камер с несколькими миллионами просмотров. Некоторое время назад по понятным причинам стали популярны камеры из Крыма (кликабельно):
Теперь, судя по подсказкам Гугла, приоритеты немного поменялись, но смысл тот же. Какой подарок археологам будущего — наше время оставит после себя безбрежное количество исторических свидетельств. Изучая камеры на картах на Ivideon TV, я только пожалел, что таким образом мы можем путешествовать только сквозь пространство, а не сквозь время. Видеотрансляция из прошлого без возможности влиять на события — это ли не идеальная концепция путешествий во времени? Может быть и до этого дело когда-нибудь дойдёт.