Pull to refresh
8
Karma
0
Rating

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

Flashphoner corporate blog Website development *Development of mobile applications *Browsers Development of communication systems *

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

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

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

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

Flashphoner corporate blog JavaScript *Programming *Safari Browsers

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

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

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

Flashphoner corporate blog Website development *Programming *Browsers Development of communication systems *


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

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

Flashphoner corporate blog Website development *Programming *Browsers Development of communication systems *


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

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

Flashphoner corporate blog Website development *Programming *Development for iOS *Development of mobile applications *

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

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

Flashphoner corporate blog Website development *JavaScript *Programming *Browsers

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

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

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

Flashphoner corporate blog Website development *JavaScript *Programming *Browsers

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
Views 17K
Comments 1

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

Flashphoner corporate blog Website development *JavaScript *Programming *Browsers
Есть 10 пользователей, которые стримят видео с веб-камеры по WebRTC. Нужно вывести снапшоты (thumbnails) их стримов на одной веб-странице, чтобы выглядело примерно так:


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

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

Flashphoner corporate blog Website development *Development for iOS *Development of mobile applications *Development for Android *
В этой статье покажем 7 технологически разных способов отображения видеопотока с IP-камеры с поддержкой RTSP на web-странице браузера.

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

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

Flashphoner corporate blog Development for iOS *Development of mobile applications *

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

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

Flashphoner corporate blog Programming *Browsers Development of communication systems *


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

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

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

Flashphoner corporate blog Website development *JavaScript *Programming *Development of communication systems *
Facebook и YouTube предоставляют сервисы трансляций, которые позволяют вещать Live-видеопотоки на широкую аудиторию зрителей. В этой статье мы расскажем, как захватить видеопоток с веб-страницы по технологии WebRTC и отправить этот видеопоток одновременно в Facebook и на YouTube для прямой трансляции — сразу в два сервиса.
Читать дальше →
Total votes 15: ↑14 and ↓1 +13
Views 14K
Comments 0

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

Flashphoner corporate blog Website development *JavaScript *Programming *Development of communication systems *
Flashphoner.createSession(...).createCall({callee:'+74957718000'}).call();

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

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

Flashphoner corporate blog Firefox Website development *JavaScript *Programming *

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

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

Flashphoner corporate blog Website development *JavaScript *Programming *Development of communication systems *

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

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

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

Flashphoner corporate blog Website development *JavaScript *Programming *Development of mobile applications *

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

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

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

WebRTC, Safari

Flashphoner corporate blog Website development *JavaScript *Programming *Development for iOS *

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


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

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

Flashphoner corporate blog Website development *JavaScript *Programming *Development of mobile applications *

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

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

Flashphoner corporate blog Website development *JavaScript *Programming *Development of mobile applications *

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

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

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

Website development *JavaScript *Google Chrome Browsers Development of communication systems *
Tutorial


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

Information

Rating
Does not participate
Registered
Activity