Обновление: рабочий пример внизу.
Это во многом зависит от того, какой браузер вы используете в данный момент, из-за развития спецификации.
В спецификации и Firefox одноранговые соединения теперь в основном отслеживаются: основаны и не зависят от локальных потоковых ассоциаций. У вас есть var sender = pc.addTrack(track, stream), pc.removeTrack(sender) и даже sender.replaceTrack(track), причем последнее не требует повторного согласования вообще.
В Chrome у вас все еще есть только pc.addStream и pc.removeStream, и удаление дорожки из локального потока приводит к прекращению ее отправки, но добавление ее обратно не сработало. Мне повезло с удалением и повторным добавлением всего потока в одноранговое соединение с последующим повторным согласованием.
К сожалению, использование adapter.js здесь не помогает, поскольку addTrack сложно заполнить полифилом.
Повторные переговоры
Повторные переговоры не начинаются заново. Все что тебе нужно это:
pc.onnegotiationneeded = e => pc.createOffer()
.then(offer => pc.setLocalDescription(offer))
.then(() => signalingChannel.send(JSON.stringify({sdp: pc.localDescription})));
.catch(failed);
Как только вы добавите это, одноранговое соединение автоматически повторно согласовывает, когда это необходимо, используя ваш канал сигнализации. Это даже заменяет звонки createOffer и друзьям, которые вы делаете сейчас, чистый выигрыш.
С его помощью вы можете добавлять / удалять треки во время живого соединения, и это должно работать.
Если этого недостаточно, вы можете даже pc.createDataChannel("yourOwnSignalingChannel")
Пример
Вот пример всего этого (используйте https://jsfiddle.net/7vxzbybp/ в Chrome):
var config = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }] };
var signalingDelayMs = 0;
var dc, sc, pc = new RTCPeerConnection(config), live = false;
pc.onaddstream = e => v2.srcObject = e.stream;
pc.ondatachannel = e => dc? scInit(sc = e.channel) : dcInit(dc = e.channel);
var streams = [];
var haveGum = navigator.mediaDevices.getUserMedia({fake:true, video:true})
.then(stream => streams[1] = stream)
.then(() => navigator.mediaDevices.getUserMedia({ video: true }))
.then(stream => v1.srcObject = streams[0] = stream);
pc.oniceconnectionstatechange = () => update(pc.iceConnectionState);
var negotiating; // Chrome workaround
pc.onnegotiationneeded = () => {
if (negotiating) return;
negotiating = true;
pc.createOffer().then(d => pc.setLocalDescription(d))
.then(() => live && sc.send(JSON.stringify({ sdp: pc.localDescription })))
.catch(log);
};
pc.onsignalingstatechange = () => negotiating = pc.signalingState != "stable";
function scInit() {
sc.onmessage = e => wait(signalingDelayMs).then(() => {
var msg = JSON.parse(e.data);
if (msg.sdp) {
var desc = new RTCSessionDescription(JSON.parse(e.data).sdp);
if (desc.type == "offer") {
pc.setRemoteDescription(desc).then(() => pc.createAnswer())
.then(answer => pc.setLocalDescription(answer)).then(() => {
sc.send(JSON.stringify({ sdp: pc.localDescription }));
}).catch(log);
} else {
pc.setRemoteDescription(desc).catch(log);
}
} else if (msg.candidate) {
pc.addIceCandidate(new RTCIceCandidate(msg.candidate)).catch(log);
}
}).catch(log);
}
function dcInit() {
dc.onopen = () => {
live = true; update("Chat:"); chat.disabled = false; chat.select();
};
dc.onmessage = e => log(e.data);
}
function createOffer() {
button.disabled = true;
pc.onicecandidate = e => {
if (live) {
sc.send(JSON.stringify({ "candidate": e.candidate }));
} else if (!e.candidate) {
offer.value = pc.localDescription.sdp;
offer.select();
answer.placeholder = "Paste answer here";
}
};
dcInit(dc = pc.createDataChannel("chat"));
scInit(sc = pc.createDataChannel("signaling"));
};
offer.onkeypress = e => {
if (e.keyCode != 13 || pc.signalingState != "stable") return;
button.disabled = offer.disabled = true;
var obj = { type:"offer", sdp:offer.value };
pc.setRemoteDescription(new RTCSessionDescription(obj))
.then(() => pc.createAnswer()).then(d => pc.setLocalDescription(d))
.catch(log);
pc.onicecandidate = e => {
if (e.candidate) return;
if (!live) {
answer.focus();
answer.value = pc.localDescription.sdp;
answer.select();
} else {
sc.send(JSON.stringify({ "candidate": e.candidate }));
}
};
};
answer.onkeypress = e => {
if (e.keyCode != 13 || pc.signalingState != "have-local-offer") return;
answer.disabled = true;
var obj = { type:"answer", sdp:answer.value };
pc.setRemoteDescription(new RTCSessionDescription(obj)).catch(log);
};
chat.onkeypress = e => {
if (e.keyCode != 13) return;
dc.send(chat.value);
log("> " + chat.value);
chat.value = "";
};
function addTrack() {
pc.addStream(streams[0]);
flipButton.disabled = false;
removeAddButton.disabled = false;
}
var flipped = 0;
function flip() {
pc.getSenders()[0].replaceTrack(streams[flipped = 1 - flipped].getVideoTracks()[0])
.catch(log);
}
function removeAdd() {
if ("removeTrack" in pc) {
pc.removeTrack(pc.getSenders()[0]);
pc.addStream(streams[flipped = 1 - flipped]);
} else {
pc.removeStream(streams[flipped]);
pc.addStream(streams[flipped = 1 - flipped]);
}
}
var wait = ms => new Promise(resolve => setTimeout(resolve, ms));
var update = msg => div2.innerHTML = msg;
var log = msg => div.innerHTML += msg + "<br>";
<video id="v1" width="120" height="90" autoplay muted></video>
<video id="v2" width="120" height="90" autoplay></video><br>
<button id="button" onclick="createOffer()">Offer:</button>
<textarea id="offer" placeholder="Paste offer here"></textarea><br>
Answer: <textarea id="answer"></textarea><br>
<button id="button" onclick="addTrack()">AddTrack</button>
<button id="removeAddButton" onclick="removeAdd()" disabled>Remove+Add</button>
<button id="flipButton" onclick="flip()" disabled>ReplaceTrack (FF only)</button>
<div id="div"><p></div><br>
<table><tr><td><div id="div2">Not connected</div></td>
<td><input id="chat" disabled></input></td></tr></table><br>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
Инструкции:
Сервер не задействован, поэтому нажмите Offer, затем вставьте предложение и ответьте вручную между двумя вкладками (после вставки нажмите клавишу ENTER).
После этого вы можете поговорить по каналу данных и нажать addTrack, чтобы добавить видео на другую сторону.
Затем вы можете отключить видео, отображаемое удаленно, с помощью Remove + Add или replaceTrack (FF only) (измените скрипт в Chrome, если у вас есть дополнительная камера, которую вы хотите использовать.)
Пересогласование сейчас происходит по каналу данных (больше не нужно вырезать и вставлять).
person
jib
schedule
19.02.2016
setRemoteDescriptionполучателю, создать ответ, отправить его обратно и установить его как удаленное описание. Это почти все. Никакого разъединения или согласования ICE не должно происходить, нужно только обменять обновленный SDP. - person deceze♦ schedule 19.02.2016