Pull to refresh
8
0
Send message

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

Reading time11 min
Views7.6K

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

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

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

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

Reading time8 min
Views16K

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

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

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

Reading time7 min
Views24K


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

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

Reading time5 min
Views7K


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

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

Reading time4 min
Views5.6K

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

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

Reading time4 min
Views9.7K

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

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

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

Reading time4 min
Views20K

Media Source Extensions


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

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

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

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

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


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

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

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

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

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

Reading time9 min
Views4.6K

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

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

Reading time12 min
Views11K


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

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

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

Reading time6 min
Views16K
Facebook и YouTube предоставляют сервисы трансляций, которые позволяют вещать Live-видеопотоки на широкую аудиторию зрителей. В этой статье мы расскажем, как захватить видеопоток с веб-страницы по технологии WebRTC и отправить этот видеопоток одновременно в Facebook и на YouTube для прямой трансляции — сразу в два сервиса.
Читать дальше →
Total votes 15: ↑14 and ↓1+13
Comments0

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

Reading time6 min
Views16K
Flashphoner.createSession(...).createCall({callee:'+74957718000'}).call();

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

А ваша вебкамера работает в новом Firefox 53?

Reading time2 min
Views6.3K

В недавнем апдейте Firefox 53, возможно пропала поддержка некоторых веб-камер либо произошли какие-то сдвиги в WebRTC API. Сейчас разбираемся. Мы заметили это на тестах. Если в Firefox 52 видео корректно захватывалось со всех вебкамер, участвующих в тестировании, то в FF 53 некоторые камеры выпали, а именно встроенные камеры. Стоит заметить, что баг воспроизводится только со встроенными камерами под Windows 7 и Windows 8. Не воспроизводится с USB-камерами на Windows 10 и совсем не воспроизводится на Mac OS.
Читать дальше →
Total votes 11: ↑7 and ↓4+3
Comments13

Трансляция RTMP видеопотока из Live Encoder на WebRTC

Reading time7 min
Views34K

HTTP протоколы доставки видеоконтента, такие как HLS и DASH давно потеснили Flash в нише воспроизведения онлайн-видео контента в браузерах.

Тем не менее, изначально флэшовый протокол RTMP, остается одним из самых популярных способов доставки Live видео от источника видео до сервера ретранслятора. RTMP продолжают использовать такие сервисы, как Facebook Live, Youtube Live, и другие, где требуется вещать живое видео и проводить трансляции. Таким образом, несмотря на предсказания и констатации скорой кончины Flash, протокол RTMP все еще на коне и не уступает своих позиций в нише видеотрансляций.
Читать дальше →
Total votes 10: ↑8 and ↓2+6
Comments1

Запись WebRTC видеопотока с веб-камеры браузера с буксировкой на Amazon S3

Reading time6 min
Views7.9K

Amazon S3 — это файловое облачное хранилище, которое используют такие известные сервисы как Dropbox, Trello и миллионы других проектов. Несмотря на сбой 28 февраля 2017 года, в результате которого кое-где перестали работать даже холодильники, S3 остается, пожалуй, самым популярным распределенным хранилищем, в котором пользователи и бизнес хранят фотки, видео, бэкапы и другой полезный контент.

Web Call Server — это медиасервер с поддержкой технологии WebRTC и записи видеопотоков из браузеров и мобильных устройств. HTML страница в браузере или мобильное приложение может захватить видеопоток с веб-камеры и отправить на сервер для дальнейшей ретрансляции и записи.

В этой статье мы расскажем как записать видеопоток со страницы браузера Google Chrome с последующей отправкой mp4-файла в хранилище Amazon S3.
Читать дальше →
Total votes 6: ↑6 and ↓0+6
Comments0

WebRTC, Safari

Reading time8 min
Views10K

В апреле прошлого года по сети прокатился пресс-релиз о том, что Apple выкатывает поддержку WebRTC в браузерах Safari для Mac OS и iOS. С момента выхода пресс-релиза скоро пройдет ровно год, как Apple продолжает выкатывать WebRTC для Safari. Ждем.


Однако ждут не все. Кому-то требуется реал-тайм видео в Safari прямо сейчас и в этой статье мы расскажем как обходиться без WebRTC в браузере iOS Safari и Mac OS Safari и чем можно его заменить.
Читать дальше →
Total votes 17: ↑16 and ↓1+15
Comments0

Разработка WebRTC видеочата между iOS, Android и браузером

Reading time10 min
Views19K

В предыдущей статье мы описывали принципы разработки видеочата между браузером и Android — устройством. Теперь же попробуем усложнить задачу и заимплементить трехсторонний видеочат на следующих платформах: Google Chrome на десктопе, Android приложение на планшете, и iOS приложение для Apple iPhone.
Читать дальше →
Total votes 18: ↑14 and ↓4+10
Comments1

Разрабатываем видеочат между браузером и мобильным приложением

Reading time11 min
Views24K

Империи зла нередко получают лучи ненависти со стороны конечных пользователей. Не смотря на это, Uber частично оплачивает наши поездки, хоть и временно, а Google придал значительное ускорение технологии WebRTC, которая бы так и оставалась проприетарной и сильно платной софтиной для узких целей b2b, если бы не ИЗ.

После появления WebRTC, видеочаты стало делать проще. Появились различные API и сервисы, серверы и фреймворки. В данной статье мы подробно опишем еще один способ разработки видеочата между веб-браузером и нативным Android-приложением
Читать дальше →
Total votes 24: ↑20 and ↓4+16
Comments8

Развертывание многопользовательской WebRTC трансляции с web-камеры через сервер за 3 минуты

Reading time8 min
Views28K


В данной статье мы расскажем как разработать многопользовательскую WebRTC видео трансляцию из браузера через свой сервер ретранслятор. Трансляция будет идти из браузера Google Chrome и обычной USB вебкамеры. Для трансляции видео будет создана отдельная HTML — страница Streamer, а воспроизведением будет заниматься HTML-страница Player.
Читать дальше →
Total votes 21: ↑14 and ↓7+7
Comments13

Information

Rating
Does not participate
Registered
Activity