Как запустить видео звонки в браузере? В чем преимущество технологии Web RTC? Как можно это использовать на реальных проектах?

1. ВЕБ ОБЩЕНИЕ В РЕАЛЬНОМ ВРЕМЕНИ
ЕВГЕНИЙ ДОРОШ, SENIOR DEVELOPER
ASCII-Camera

2. 1844

3. 1920

4. Потоковый сервис при малом расходе

5. Революционный способ делать звонки

6. Прорывная технология общения в интернете

7. iRTC

8. 1920
A Peer-to-Peer Web

9. Набор простых API в браузере и мобильном
приложении для обеспечения peer-to-peer
обмена аудио, видео и пользовательскими
данными в реальном времени
https://webrtc.org

10. ЧТО ЭТО ЗНАЧИТ?
1. Захватывать видеопоток с камеры и аудиопоток с микрофона.
2. Проигрывать видео и аудио (через HTML5 video и HTML5 audio).
3. Устанавливать UDP или TCP соединение между двумя браузерами,
как через промежуточный сервер, так и напрямую, включая nat
traversal.
4. Стримить по установленному соединению видео, аудио и
пользовательские данные.

11. ОПЯТЬ ТЕОРИЯ … ?
НЕТ! НАЧНЁМ С ПРАКТИКИ!

12. ОБЩЕНИЕ ‘ИЗ БРАУЗЕРА’
https://getaroom.io/20dd5d

13. Я СДЕЛАЮ ВАМ СЕЛФИ!
http://bit.ly/2ev3983
Перейдите по ссылке в
Chrome на Android
Подключитесь к wifi:
EugeneAndroidAP
qwerty12

14. https://webtorrent.io/
ТОРРЕНТЫ В ВЕБЕ!

15. WEB RTC JS APIS
• getUserMedia(): захват аудио и видео.
• MediaRecorder: запись аудио и видео.
• RTCPeerConnection: передача аудио и видео между
пользователями.
• RTCDataChannel: передача пользовательских данных
между участниками.
https://webrtc.github.io/samples/
Много классных примеров

16. ЧТО С БРАУЗЕРАМИ И ПЛАТФОРМАМИ?
Частично. Сделали свою «альтернативную»
реализацию, которая называется «ORTC».
Interner Explorer не поддерживается
Не поддерживает. Однако Apple подтвердила
работу над реализацией стандарта в своём
браузере

17. TEST: EXAM PROJECT

18. TEST: EXAM PROJECT

19. ВСЕ ЭТО КРУТО, А В ЧЕМ ПОДВОХ?
СИГНАЛИЗАЦИЯ
• Сетевая информация для Peer to Peer
подключения
• Мета информация о поддерживаемых кодеках
и отправка контрольных сообщений в
реальном времени (разрешение, битрейт …)
NODE.JSPHP RUBY PYTON .NET JAVA
Не входит в спецификацию WebRTC и обычно реализуется на

23. ВСЕ ЭТО СЛОЖНО! ДОЛЖНО БЫТЬ
ПРОЩЕ!
https://skylink.io/https://tokbox.com/
+ есть PHP клиент для REST - нет PHP клиента
- нет поддержки Safari + есть поддержка Safari
(плагин)
ВСЕ ПЛАТНО

24. ЧТО ЕЩЁ УМЕЮТ СЕРВИСЫ КРОМЕ
СИГНАЛИЗАЦИИ?
• Запись разговора
• Авторизация участников (генерация сессий)
• Поддержка большого числа участников (MTU)
• Связывание с SIP клиентами
• Единая библиотека для Browser API and
мобильных клиентов

25. TEST: EXAM PROJECT

26. TEST: EXAM PROJECT
FRONT END

27. TEST: EXAM PROJECT
BACK END (PHP, SLIM FRAMEWORK)

28. Спасибо!
Email: e.dorosh@itransition.com
Skype: itevgenius
Евгений Дорош
Room: 211
http://bit.ly/2e3ikFK
ASCII-Камера