Modern WebRTC ontrack
HTML
<video id="v1" height="120" width="160" autoplay muted></video>
<video id="v2" height="120" width="160" autoplay></video><br>
<button onclick="start()">Start!</button>
<button onclick="removeTrack()">Remove!</button>
<button onclick="stop()">Stop!</button><div id="div"></div>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
JavaScript
var pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();
var add = (pc, can) => can && pc.addIceCandidate(can).catch(failed);
pc1.onicecandidate = e => add(pc2, e.candidate);
pc2.onicecandidate = e => add(pc1, e.candidate);
pc2.onaddstream = e => {
v2.srcObject = e.stream;
log("onaddstream: " + pc2.getReceivers().length);
// pc2.getReceivers().forEach(receiver => log(receiver));
// pc2.getReceivers().forEach(receiver => log(receiver.track));
};
//pc2.onaddtrack = e => log("onaddtrack " + e.track.kind);
pc2.ontrack = e => log("ontrack " + e.track.kind +
", " + e.receiver +
", " + e.streams);
pc2.onremovestream = e => log("removed stream: " +
pc2.getReceivers().length);
pc1.oniceconnectionstatechange = e => log("state: " +
pc1.iceConnectionState);
pc1.onnegotiationneeded = () => pc1.createOffer()
.then(offer => pc1.setLocalDescription(offer))
.then(() => pc2.setRemoteDescription(pc1.localDescription))
.then(() => pc2.createAnswer())
.then(answer => pc2.setLocalDescription(answer))
.then(() => pc1.setRemoteDescription(pc2.localDescription))
.catch(failed);
function start() {
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => pc1.addStream(v1.srcObject = stream))
.catch(failed);
}
function removeTrack() {
log("remove: " + pc2.getReceivers().length);
pc1.removeTrack(pc1.getSenders()[0]);
}
function stop() {
log("close: " + pc2.getReceivers().length);
v1.srcObject.getTracks().forEach(track => track.stop());
pc1.close();
log("close: " + pc2.getReceivers().length);
}
var log = msg => div.innerHTML += "<br>" + msg;
var failed = e => log(e +", line "+ e.lineNumber);