Практические занятия и демонстрации по WebRTC

• Необходимо наличие камеры (по умолчанию поддерживается на ноутбуках и мобильных устройствах).

• Потоковая передача видео с вашей камеры:

  • Исходный код: /docs/demo-01/index.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/demo-01/index.html.

• Потоковая передача видео через RTCPeerConnection:

  • Исходный код: /docs/demo-02/index.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/demo-02/index.html.

• Обмен данными через RTCDataChannel:

  • Исходный код: /docs/demo-03/index.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/demo-03/index.html.

• Получение информации о камере:

  • Исходный код: /docs/tinywan-demo-01/index.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/tinywan-demo-01/index.html.

• Создание приложения для фотосъёмки:

  • Исходный код: /docs/tinywan-demo-02/index.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/tinywan-demo-02/index.html.

• Изменение медиапотока, добавление CSS-фильтров:

  • Исходный код: /docs/tinywan-demo-03/index.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/tinywan-demo-03/index.html.

• Как использовать микрофон (Vue3):

  • Исходный код: /docs/docs-2022/demo-01/device.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/docs-2022/demo-01/devices.html.

• Как сделать снимок камерой (Vue3):

  • Исходный код: /docs/docs-2022/demo-03/device.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/docs-2022/demo-03/index.html.

• Как записывать и воспроизводить аудио (Vue3):

  • Исходный код: /docs/docs-2022/demo-04/device.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/docs-2022/demo-04/index.html.

• Как записывать и воспроизводить видео (Vue3):

  • Исходный код: /docs/docs-2022/demo-05/device.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/docs-2022/demo-05/index.html.

• Как записывать и совместно использовать общий экран (Vue3):

  • Исходный код: /docs/docs-2022/demo-06/device.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/docs-2022/demo-06/index.html.

• Как реализовать совместное использование экрана и камеры в формате три четверти (Vue3):

  • Исходный код: /docs/docs-2022/demo-07/device.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/docs-2022/demo-07/video.html.

• Как записать, воспроизвести и скачать видео с камеры (Vue3):

  • Исходный код: /docs/docs-2022/demo-08/device.html.
  • Онлайн-демонстрация: https://webrtc.tinywan.com/docs-2022/demo-08/recorder.html.

Поддерживаемые браузеры и платформы

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

Это не единый протокол, а набор стандартов, включающий в себя протоколы для работы с мультимедиа, шифрования и передачи данных, а также JavaScript API, который упрощает создание приложений для обмена данными и проведения телефонных конференций.

Благодаря простоте использования JavaScript API, WebRTC позволяет браузерам обмениваться данными напрямую, без установки дополнительного ПО. Кроме того, WebRTC поддерживает гибкие механизмы сигнализации, которые позволяют легко интегрировать его с существующими системами SIP и телефонными сетями.

Внутренняя структура WebRTC

Архитектура WebRTC включает в себя три модуля: Voice Engine, Video Engine и Transport.

Voice Engine содержит следующие компоненты:

• iSAC/iLBC Codec — для обработки звука в широком и узком диапазоне частот;
• NetEQ for voice — для устранения проблем с задержкой и потерей пакетов при передаче голоса;
• Echo Canceler/Noise Reduction — для подавления эха и шума.

Video Engine включает:

• VP8 Codec — для кодирования и декодирования видео;
• Video jitter buffer — для компенсации задержки и потери пакетов при передаче видео;
• Image enhancements — для улучшения качества изображения.

Transport отвечает за:

• SRTP — безопасный протокол передачи данных для аудио- и видеопотоков;
• Multiplexing — для объединения нескольких потоков данных в один;
• P2P, STUN+TURN+ICE — для обхода NAT и брандмауэров. Кроме того, для безопасной передачи данных может использоваться DTLS (Data Transport Layer Security), который применяется для шифрования передачи и согласования ключей.

Основные компоненты WebRTC

• Аудио- и видеодвижок: OPUS, VP8 / VP9, H264.

• Протокол транспортного уровня: на нижнем уровне используется протокол UDP.

• Медиапротокол: SRTP / SRTCP.

• Протоколы передачи данных: DTLS / SCTP.

• P2P-проникновение через внутреннюю сеть: STUN / TURN / ICE / Trickle ICE.

• Сигнализация и согласование SDP: HTTP / WebSocket / SIP, Offer Answer.

Аудио- и видеодвижки WebRTC

В основе всего лежат аппаратные устройства, над которыми находятся модули захвата аудио и видео.

Над ними расположен аудио- и видеодвижок. Аудиодвижок отвечает за сбор и передачу звука, а также за шумоподавление и подавление эха. Видеодвижок оптимизирует передачу видео по сети и кодирование-декодирование при передаче через интернет.

На вершине находится набор C++ API, а над ним — JavaScript API для браузеров.

Стек протоколов WebRTC

Все основные протоколы WebRTC построены на базе UDP.

ICE, STUN и TURN используются для проникновения через внутренние сети, они помогают получить и связать внешний сетевой адрес, а также поддерживают механизм keep alive.

DTLS используется для шифрования передаваемых данных. Это версия TLS для UDP, которая необходима для обеспечения безопасности в WebRTC. Все компоненты WebRTC должны быть зашифрованы, а JavaScript API можно использовать только с безопасными источниками (HTTPS или локальный хост).

SRTP и SRTCP — это протоколы для упаковки и передачи медиаданных.

SCTP — это протокол управления потоками, который обеспечивает характеристики, подобные TCP. В WebRTC он строится поверх DTLS.

RTCPeerConnection используется для создания и поддержания соединения между конечными точками и обеспечивает эффективную передачу аудио- и видеотрансляций.

RTCDataChannel позволяет передавать произвольные двоичные данные между конечными точками.

Объяснение стека протоколов WebRTC:

• ICE: Interactive Connectivity Establishment (RFC 5245).
• STUN: Session Traversal Utilities for NAT (RFC 5389).
• TURN: Traversal Using Relays around NAT (RFC 5766).
• SDP: Session Description Protocol (RFC 4566).
• DTLS: Datagram Transport Layer Security (RFC 6347).
• SCTP: Stream Control Transmission Protocol (RFC 4960).
• SRTP: Secure Real-time Transport Protocol (RFC 3711).

JavaScript API

• getUserMedia() — захват аудио и видео.
• RTCPeerConnection — передача аудио и видео между пользователями.
• RTCDataChannel — обмен данными между пользователями.
• MediaRecorder — запись аудио и видео.

Учебники по интерфейсам

• MediaDevices.getUserMedia() (https://webrtc-experiment.com/).
• RTCPeerConnection (https://webrtc.github.io/samples/src/content/peerconnection/pc1/).

Исходный код и примеры

• Самый полный и подробный пример (https://www.webrtc-experiment.com/).
• WebRtc: аудио- и видеочасть (https://github.com/DOUBLE-Baller/WebRTC_IM).

Ссылки

• Официальный сайт WebRTC (https://webrtc.org/).
• Китайский сайт WebRTC (http://webrtc.org.cn/).
• Пошаговое изучение WebRTC (https://codelabs.developers.google.com/codelabs/webrtc-web).