Интерфейс RTCPeerConnection

Коммуникации #WebRTC

2018-11-14

Представляет собой соединение между локальным компьютером и удалённым хостом.

Описание подключения
Метод setRemoteDescription() вызывает событие onaddstream и передаёт его обработчику экземпляр MediaStreamEvent.

MediaStream

Интерфейс MediaStream

MediaStreamTrack

Интерфейс MediaStreamTrack

Локальный хост

включитьпозвонитьотбой ## "Удалённый" хост

ответитьотбой
// Шаг 1. Создаём поток MediaStream.

// Шаг 2. Подключаем поток к элементу video.

// Шаг 3. Создаём соединение RTCPeerConnection.

// Шаг 4. Добавляем поток к соединению.

// Шаг 5. Отправляем описание сессии удалённому участнику.

// Шаг 6. Получаем описание сессии от удалённого участника.

// Шаг 7. Добавляем описание к соединению.

// Шаг 8. Обрабатываем полученное описание сессии и получаем поток отудалённого участника.

// Шаг 9. Подключаем полученный поток ко второму элементу video.

var localVideo, remoteVideo; localVideo = document.getElementById('localVideo'); remoteVideo = document.getElementById('remoteVideo');

var localMediaStream, remoteMediaStream; var localRTCPeerConnection, remoteRTCPeerConnecton; var localOffer, remoteAnswer;

var constraints = { video: true, audio: false };

var startButton = document.getElementById('startButton'); startButton.onclick = function (event) { console.log(event);

navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
    localVideo.srcObject = stream;
    localMediaStream = stream;
})
.catch(function(error) {
    console.log('error', error);
});

startButton.disabled = true;
callButton.disabled = false;

};

callButton.onclick = function(event) { console.log(localMediaStream);

localRTCPeerConnection = new RTCPeerConnection();
console.log('Создано локальное соединение.');
if (localMediaStream) {
    localRTCPeerConnection.addStream(localMediaStream);
    console.log('Локальный поток добавлен в локальное соединение.');
}

localRTCPeerConnection.createOffer()
.then(function (offer) {
    localOffer = offer;
    console.log(localOffer);

    localRTCPeerConnection.setLocalDescription(offer);
    return remoteRTCPeerConnecton.setRemoteDescription(offer);
})
.then(function () {
    return navigator.mediaDevices.getUserMedia(constraints);
})
.then(function (stream) {
    remoteVideo.srcObject = stream;
    return remoteRTCPeerConnecton.addStream(stream);
})
.then(function () {
    return remoteRTCPeerConnecton.createAnswer();
})
.then(function (answer) {
    remoteAnswer = answer;
    console.log(answer);
    return myPeerConnection.setLocalDescription(answer);
})

// .then(function() { // sendToServer({ // name: myUsername, // target: targetUsername, // type: "video-offer", // sdp: myPeerConnection.localDescription // }); // }) .catch(function(reason) { // An error occurred, so handle the failure to connect console.log(); });

remoteRTCPeerConnecton = new RTCPeerConnection();

console.log('Создано удалённое соединение.');

// console.log(localRTCPeerConnection);

remoteRTCPeerConnecton.onaddstream = function (event) {console.log(event)};
remoteRTCPeerConnecton.onconnectionstatechange = function (event) {console.log(event)};
remoteRTCPeerConnecton.ondatachannel = function (event) {console.log(event)};
remoteRTCPeerConnecton.onicecandidate = function (event) {console.log(event)};
remoteRTCPeerConnecton.oniceconnectionstatechange = function (event) {console.log(event)};
remoteRTCPeerConnecton.onicegatheringstatechange = function (event) {console.log(event)};
remoteRTCPeerConnecton.onidentityresult = function (event) {console.log(event)};
remoteRTCPeerConnecton.onidpassertionerror = function (event) {console.log(event)};
remoteRTCPeerConnecton.onidpvalidationerror = function (event) {console.log(event)};
remoteRTCPeerConnecton.onnegotiationneeded = function (event) {console.log(event)};
remoteRTCPeerConnecton.onpeeridentity = function (event) {console.log(event)};
remoteRTCPeerConnecton.onremovestream = function (event) {console.log(event)};
remoteRTCPeerConnecton.onsignalingstatechange = function (event) {console.log(event)};
remoteRTCPeerConnecton.ontrack = function (event) {console.log(event)};

callButton.disabled = true;
hangupButton.disabled = false;

}

hangupButton.onclick = function(event) { hangupButton.disabled = true; callButton.disabled = false; }

var mStream = new MediaStream();

//console.log(mStream);

mStream.onaddtrack = function (event) { console.log('Вызван обработчик onaddtrack'); console.log(event); };

mStream.onremovetrack = function (event) { console.log('Вызван обработчик onremovetrack'); console.log(event); };

var supportedConstraints = navigator.mediaDevices.getSupportedConstraints();

console.log(supportedConstraints);

//navigator.mediaDevices.enumerateDevices() //.then(function(devices) { // devices.forEach(function(device) { // console.log(device.kind + ": " + device.label + // " id = " + device.deviceId); // // console.log(device); // }); //}) //.catch(function(err) { // console.log(err.name + ": " + err.message); //});

//console.log(mediaDevices);