WebRTC. Обмениваемся данными

В первой статье мы описали как можно установить соединение , а в этой статье опишем как передавать данные между собой

Чтобы передавать данные , нужно их вначале получить

Метод getUserMedia() API MediaDevices запрашивает у пользователя разрешение на работу с устройствами ввода(веб-камера, микрофон), которые в свою очередь создают потоки MediaStream.Этот метод возвращает промис, который разрешается в объект MediaStream. Если пользователь отклонил запрос на получение разрешения, или соответствующие медиаданные недоступны, тогда промис разрешится, соответственно, с ошибкой PermissionDeniedError или NotFoundError.

Напишем код , который получает доступ к нашей вебкамере и к нашему микрофону и полученный объект MediaStream будем отображать на нашей странице в теге video

Реализация с помощью промисов

    navigator.mediaDevices.getUserMedia({audio:true, video: true})
        .then(function (stream) {
            var video = document.querySelector('video');
            video.srcObject = stream;
            video.setAttribute("playsinline",null);
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch(function (err) {
            alert("Error");
            console.log(err);
        });

Та же самая реализация, но с ипользованием async/await

    async function getMedia(){
        let stream = null;
        try{
            stream = await navigator.mediaDevices.getUserMedia({audio:true, video:true});
            let video = document.querySelector('video');
            video.srcObject = stream;
            video.setAttribute("playsinline",null);
            video.onloadedmetadata = function(e) {
                video.play();
            };
        } catch(err){
            console.log(err.name);
        }
    }

    getMedia();

Посмотреть вы можете на этой странице

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

Создадим экземпляр RTCPeerConnection

Метод createOffer () интерфейса RTCPeerConnection инициирует создание предложения SDP с целью запуска нового соединения WebRTC с удаленным узлом.