webrtc учебник
Начало работы с webrtc

замечания

Настройка системы связи на базе WebRTC

Чтобы настроить систему связи на базе WebRTC, вам понадобятся три основных компонента:

1. Сервер сигнализации WebRTC

   Чтобы установить соединения WebRTC, одноранговые узлы должны обратиться к серверу сигнализации, который затем предоставляет информацию о адресе, которую нужно установить для одноранговых соединений. Серверы сигнализации - это, например:

   • signalmaster : легкий, основанный на JavaScript сервер сигнализации
   • NextRTC : сервер сигнализации на базе Java
   • Kurento : всеобъемлющая структура WebRTC
   • Janus : универсальный шлюз WebRTC Gateway

2. Клиентское приложение WebRTC

   Клиент обращается к реализации WebRTC браузера через API JavaScript или использует библиотеку WebRTC (то есть как часть рабочего стола или мобильного приложения). Чтобы установить соединение с одноранговым узлом, клиенту сначала необходимо подключиться к серверу сигнализации. Примеры для клиентов WebRTC:

   • Несколько проектов в Куренто

   • OpenWebRTC , межплатформенный клиент с мобильным фокусом

   • Peer.js Клиент на основе браузера (Peer.js также обеспечивает легкий сервер)

   • Примеры использования Janus Demo

3. Сервер STUN / TURN

   Утилиты трассировки сеанса для NAT (STUN) позволяют одноранговым узлам обмениваться адресной информацией, даже если они находятся за маршрутизаторами, использующими Network Addressress Translation (NAT) . Если сетевые ограничения вообще не позволяют связи между одноранговыми узлами, трафик маршрутизируется через Traversal Using Relays вокруг сервера NAT (TURN) . Вы найдете подробное и графическое объяснение STUN и TURN по адресу http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html . Примерами для серверов STUN / TURN WebRTC являются:

   • coturn объединяет STUN и TURN и, как правило, является частью полноценной инфраструктуры WebRTC.
   • Janus WebRTC Gateway поставляется со встроенным сервером STUN / TURN.

Введение в WebRTC

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

Эти компоненты, реализованные в браузере, могут быть доступны через JavaScript API, что позволяет разработчикам легко реализовать свое собственное веб-приложение RTC.

Усилия WebRTC стандартизируются на уровне API на уровне W3C и на уровне протокола в IETF .

• Ключевым фактором успеха Интернета является то, что его основные технологии, такие как HTML, HTTP и TCP / IP, являются открытыми и свободно реализуемыми. В настоящее время нет бесплатного, высококачественного и полного решения, которое позволяет общаться в браузере. WebRTC позволяет это.
• Уже интегрирована с лучшими в своем классе голосом и видеомоделями, которые были развернуты на миллионах конечных точек за последние 8+ лет. Google не взимает роялти за WebRTC.
• Включает и абстрагирует ключевые технологии обхода NAT и брандмауэра, используя STUN, ICE, TURN, RTP-over-TCP и поддержку прокси.
• Основывается на силе веб-браузера: сигнализация тезисов WebRTC, предлагая машину состояния сигнализации, которая напрямую отображается на PeerConnection. Поэтому веб-разработчики могут выбирать протокол выбора для своего сценария использования (например, без ограничений, SIP, XMPP / Jingle и т. Д.).

Узнайте больше о WebRTC отсюда

Получите доступ к своим аудио и видео, используя getUserMedia () API, Hello WebRTC!

navigator.mediaDevices - общий метод, адаптированный в Chrome и FF для getUserMedia.

Обещанный вызов, возвращающий локальный поток на успех

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(stream => {
        // attach this stream to window object so you can reuse it later
        window.localStream = stream;
        // Your code to use the stream
    })
    .catch((err) =>{
        console.log(err);
    });

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

Присоедините поток к элементу видео

// Set the video element to autoplay to ensure the video appears live
videoElement.autoplay = true;
// Mute the local video so the audio output doesn't feedback into the input
videoElement.muted = true;
// attach the stream to the video element

останавливать как видео, так и аудио

localStream.getTracks().forEach((track) => {
    track.stop();
});

остановить только аудио

localStream.getAudioTracks()[0].stop();

остановить только видео

localStream.getVideoTracks()[0].stop();

Демо-версия