Как стать автором
Обновить

Компания Flashphoner временно не ведёт блог на Хабре

Сначала показывать

Проблема первого зрителя, или непростая конвертация WebRTC видеопотоков в HLS

Время на прочтение7 мин
Количество просмотров5.5K


Егор закрыл крышку ноутбука и потер красные от недосыпа глаза. "Клиенты продолжают жаловаться на зависания стрима, новый пакет исправлений совсем не помог! Что же делать с этим (censored) HLS?" — произнес он в пустоту кабинета.

Читать дальше →
Всего голосов 6: ↑6 и ↓0+6
Комментарии21

Индикатор качества канала серверного WebRTC через TCP

Время на прочтение5 мин
Количество просмотров3.3K


Publish и Play


Существует две основных функции работы WebRTC на стороне сервера в области потокового видео: публикация и воспроизведение. В случае публикации видеопоток захватывается с вебкамеры и двигается от браузера к серверу. В случае воспроизведения, поток двигается в обратном направлении — от сервера к браузеру, декодируется и воспроизводится в браузерном HTML5 <video> элементе на экране устройства.

Читать дальше →
Всего голосов 5: ↑5 и ↓0+5
Комментарии1

Как готовить RTSP на сайте в 2020 году, или почему кабаны не успеют убежать

Время на прочтение7 мин
Количество просмотров35K


RTSP — это простой сигнальный протокол, который уже много лет не могут ничем заменить, и надо признать, что не особо стараются.


Скажем, есть у нас IP камера с поддержкой RTSP. Всякий, кто щупал трафик акула-кабелем, расскажет, что там сначала идет DESCRIBE, потом PLAY, и вот полился трафик напрямую по RTP или завернутый в тот же TCP канал.

Читать дальше →
Всего голосов 11: ↑11 и ↓0+11
Комментарии15

Динамическая CDN для WebRTC стриминга с низкой задержкой и контролем доступа к потокам

Время на прочтение4 мин
Количество просмотров1.7K


В первой части мы развернули простую динамическую CDN для трансляции WebRTC потоков на два континента и убедились в том, что задержки в такой CDN действительно низкие, на примере таймера обратного отсчета.


Во второй части мы добавили в CDN выделенные серверы для задач транскодирования, чтобы обеспечить нашим зрителям качество трансляции в зависимости от используемых ими устройств и качества канала. Таким образом, все публикуемые потоки в нашей CDN доступны всем зрителям.


Теперь допустим, что предприятие выходит на этап монетизации и часть потоков должны быть доступны бесплатно, часть — по подписке. Или, например, вебинары для внутреннего обучения сотрудников транслируются одновременно, но для разных филиалов потоки разные, и открывать техники продаж, применяемые в Юго-Восточной Азии, для менеджеров из СНГ нежелательно.

Читать дальше →
Всего голосов 4: ↑4 и ↓0+4
Комментарии2

Динамическая CDN для WebRTC стриминга с низкой задержкой и транскодингом

Время на прочтение5 мин
Количество просмотров2.6K


В первой части мы развернули простую динамическую CDN для трансляции WebRTC потоков на два континента и убедились в том, что задержки в такой CDN действительно низкие, на примере таймера обратного отсчета.


Однако, кроме низкой задержки, важно обеспечить зрителям хорошее качество трансляции, ведь за это они и платят. В реальной жизни, каналы между Edge серверами и подписчиками могут быть разными по пропускной способности и качеству. Например, мы публикуем поток разрешением 720p с битрейтом 2 Мбит/с, а пользователь играет его на Android-смартфоне, используя 3G подключение в зоне неуверенного приема сигнала, и максимальное разрешение, при котором картинка будет плавной, всего 360p с битрейтом 400 Мбит/с.

Читать дальше →
Всего голосов 6: ↑5 и ↓1+8
Комментарии3

Динамическая CDN для WebRTC стриминга с низкой задержкой

Время на прочтение5 мин
Количество просмотров3.4K


Ранее, анализируя возможности стандартных конфигураций серверов в Digital Ocean с точки зрения WebRTC стриминга, мы отмечали, что один сервер может обслужить до 2000 зрителей. В реальной жизни часто встречаются случаи, когда одного сервера недостаточно.


Допустим, любители азарта в Германии смотрят в реальном времени скачки в Австралии. Поскольку скачки — это не только конный спорт, но и большие выигрыши, при вовремя сделанных ставках, то видео должно быть доставлено с минимально возможными задержками.

Читать дальше →
Всего голосов 7: ↑7 и ↓0+7
Комментарии0

Облачный WebRTC стриминг на DigitalOcean

Время на прочтение5 мин
Количество просмотров4.2K


Известный облачный хостинг DigitalOcean с недавних пор обзавелся собственным магазином с готовыми образами, из которых можно быстро развернуть какой-либо сервер приложений. Совсем, как AWS, только DO, для тех, кто уже пользуется услугами этого провайдера. Давайте посмотрим, как, имея аккаунт DO, развернуть простой сервер за 10$ в месяц для стриминга WebRTC на базе Flashphoner WebCallServer, и чем такой сервер может быть полезен.

Читать дальше →
Всего голосов 10: ↑10 и ↓0+10
Комментарии2

Создаем живую потоковую CDN для видеотрансляций WebRTC с низкой задержкой

Время на прочтение11 мин
Количество просмотров7.7K

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

С высокой задержкой вы успеете сказать «двести тысяч три» и продать лот еще до того как видео дойдет до участников. Чтобы участники аукциона успели вовремя среагировать, задержка должна быть гарантированно низкой.

В общем, низкая задержка жизненно необходима в любом около игровом сценарии, будь-то онлайн видео аукцион, видеотрансляция скачек с лошадками или интеллектуальная онлайн игра «Что Где Почему» — и там и там требуется гарантированно низкая задержка и передача видео и аудио в реальном времени.
Читать дальше →
Всего голосов 8: ↑8 и ↓0+8
Комментарии2

iOS Safari 11 теперь умеет WebRTC

Время на прочтение8 мин
Количество просмотров16K

Пару недель назад состоялся релиз новых айфонов и iOS 11, который невозможно было не заметить. C релизом произошло еще одно, безусловно важное для разработчиков, событие: в браузере Safari появилась долгожданная поддержка WebRTC.

Вообразите на минуту, миллионы айфонов и айпадов по всему миру стали уметь реалтаймовое аудио и видео в браузере. Пользователям iOS и Mac стали доступны полнофункциональные браузерные видеочаты, воспроизведение живых трансляций с низкой (менее секунды) реалтаймовой задержкой, звонки, конференции и многое другое. К этому долго шли и наконец это случилось.
Читать дальше →
Всего голосов 6: ↑6 и ↓0+6
Комментарии1

Тянем ролик с YouTube и раздаем по WebRTC в реалтайме

Время на прочтение7 мин
Количество просмотров24K


Задача следующая. Провести совместный просмотр ролика с YouTube в реальном времени несколькими пользователями. Зрители должны получать видео одновременно, с минимальной задержкой.
Читать дальше →
Всего голосов 33: ↑31 и ↓2+29
Комментарии32

Межсерверное WebRTC

Время на прочтение5 мин
Количество просмотров7.1K


WebRTC умеет работать Peer-to-Peer и Peer-to-Server, где в роли пира, как правило выступает браузер или мобильное приложение. В данной статье мы расскажем о работе WebRTC в режиме Server-to-Server, для чего это нужно и как это работает.
Читать дальше →
Всего голосов 12: ↑9 и ↓3+6
Комментарии0

Зачем мы сделали VOD на WebRTC

Время на прочтение4 мин
Количество просмотров5.8K

VOD — это про video on demand, т.е. проигрывание обычных роликов, как это делается на YouTube или другом стриминговом сервисе. WebRTC — это видео реалтайм с низкой задержкой. Вы спросите — как эти две вещи могут быть связаны? Заходите под кат за подробностями.
Читать дальше →
Всего голосов 8: ↑5 и ↓3+2
Комментарии4

Встраиваем WebRTC плеер для живых трансляций с вебкамер и IP камер

Время на прочтение4 мин
Количество просмотров10K

Всем известно, каким образом внедряется обычный плеер для видеороликов (VOD — видео по требованию). Как правило, это плеер, который скачивает контент фрагментами по HTTP и играет эти фрагменты в <video/> элементе браузера.

В этой статье мы расскажем о внедрении WebRTC-плеера для воспроизведения живых (Live) потоков с веб-камер и IP камер.
Читать дальше →
Всего голосов 7: ↑5 и ↓2+3
Комментарии0

Транслируем WebRTC, RTSP и RTMP потоки на Media Source Extensions по протоколу Websocket

Время на прочтение4 мин
Количество просмотров20K

Media Source Extensions


Media Source Extensions (далее MSE) — это API браузера, позволяющее играть аудио и видео через соответствующие HTML5 тэги <audio/> и <video/>.

Чтобы проиграть кусок аудио или видео, нужно скормить этот chunk в данный элемент через MSE API. На основе MSE построены HLS-плееры. HLS фрагменты передаются в MSE и отображаются в плеере.

Давайте посмотрим на его Can I Use подробнее.
Читать дальше →
Всего голосов 5: ↑5 и ↓0+5
Комментарии1

Делаем превью-снимки WebRTC видеопотока в PNG картинках

Время на прочтение2 мин
Количество просмотров3.8K
Есть 10 пользователей, которые стримят видео с веб-камеры по WebRTC. Нужно вывести снапшоты (thumbnails) их стримов на одной веб-странице, чтобы выглядело примерно так:


Можно просто воспроизвести видео вместо картинок, но давайте посчитаем каким будет битрейт, если каждый из потоков занимает 1 Mbps полосы. Если воспроизводить все десять, получится 10 Mbps. Не многовато для превьюшек?
Читать дальше →
Всего голосов 10: ↑10 и ↓0+10
Комментарии8

7 способов отобразить видео с RTSP IP-камеры на веб-странице и 2 в мобильном приложении

Время на прочтение5 мин
Количество просмотров179K
В этой статье покажем 7 технологически разных способов отображения видеопотока с IP-камеры с поддержкой RTSP на web-странице браузера.

Браузеры, как правило, не поддерживают RTSP, поэтому поток будет конвертироваться для браузера через промежуточный сервер.
Читать дальше →
Всего голосов 13: ↑13 и ↓0+13
Комментарии4

Как мы публиковали iOS приложение для видеочата в App Store

Время на прочтение9 мин
Количество просмотров4.7K

В этой статье мы расскажем как собирали свое первое WebRTC-приложение для iOS и размещали его в App Store, с чем пришлось при этом столкнуться и что из этого вышло.
Читать дальше →
Всего голосов 9: ↑5 и ↓4+1
Комментарии12

Задержка в онлайн-трансляциях с веб-камеры, бессердечная ты стерва

Время на прочтение12 мин
Количество просмотров11K


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

Далее мы покажем что происходит с задержкой на примере реализации WebRTC и как при использовании WebRTC удается сохранить задержку на низком уровне, пригодном для комфортного общения.
Читать дальше →
Всего голосов 9: ↑9 и ↓0+9
Комментарии7

Транслируем видеопоток с веб-страницы по WebRTC на Facebook и YouTube одновременно

Время на прочтение6 мин
Количество просмотров16K
Facebook и YouTube предоставляют сервисы трансляций, которые позволяют вещать Live-видеопотоки на широкую аудиторию зрителей. В этой статье мы расскажем, как захватить видеопоток с веб-страницы по технологии WebRTC и отправить этот видеопоток одновременно в Facebook и на YouTube для прямой трансляции — сразу в два сервиса.
Читать дальше →
Всего голосов 15: ↑14 и ↓1+13
Комментарии0

Несколько строк JS кода для звонка из браузера на мобильный телефон

Время на прочтение6 мин
Количество просмотров16K
Flashphoner.createSession(...).createCall({callee:'+74957718000'}).call();

В этой статье мы расскажем как сделать кнопку для звонка со страницы сайта на мобильный или городской номер телефона.
Читать дальше →
Всего голосов 11: ↑4 и ↓7-3
Комментарии3