Async WebRTC gDM ended

by jib1

HTML

<button id="button">Go!</button><button id="stopTrack">Stop track</button>
<button id="stopTransceiver">Stop transceiver</button><br>
<video id="video1" width="160" height="120" autoplay muted></video>
<video id="video2" width="160" height="120" autoplay></video><br>
<div id="div"></div>

JavaScript

const console = { log: msg => div.innerHTML += msg + "<br>" };
const pc1 = new RTCPeerConnection(), pc2 = new RTCPeerConnection();

button.onclick = async () => {
  try {
    const stream = await navigator.mediaDevices.getDisplayMedia();
    video1.srcObject = stream;
    const [track] = stream.getVideoTracks();
    const transceiver = pc1.addTransceiver(track, {streams: [stream]});
    track.onended = () => console.log("local ended");
    stopTrack.onclick = () => track.stop();
    stopTransceiver.onclick = () => transceiver.stop();
  } catch (e) {
    console.log(e);
  }
};

pc1.onicecandidate = e => pc2.addIceCandidate(e.candidate);
pc2.onicecandidate = e => pc1.addIceCandidate(e.candidate);
pc1.oniceconnectionstatechange = () => console.log(pc1.iceConnectionState);

pc1.onnegotiationneeded = async () => {
  await pc1.setLocalDescription();
  await pc2.setRemoteDescription(pc1.localDescription);
  await pc2.setLocalDescription();
  await pc1.setRemoteDescription(pc2.localDescription);
}
pc2.ontrack = ({track, streams}) => {
  video2.srcObject = streams[0];
  track.onended = () => console.log("remote ended");
  track.onmuted = () => console.log("remote muted");
  track.onunmuted = () => console.log("remote unmuted");
}