multiple: modernize code

which was still stuck in the 2012 style

src/content/peerconnection/multiple/js/main.js

@@ -29,10 +29,6 @@ let pc1Local;
 let pc1Remote;
 let pc2Local;
 let pc2Remote;
-const offerOptions = {
-  offerToReceiveAudio: 1,
-  offerToReceiveVideo: 1
-};
 
 const supportsSetCodecPreferences = window.RTCRtpTransceiver &&
   'setCodecPreferences' in window.RTCRtpTransceiver.prototype;
@@ -48,26 +44,18 @@ function maybeSetCodecPreferences(trackEvent) {
   }
 }
 
-function gotStream(stream) {
-  console.log('Received local stream');
-  video1.srcObject = stream;
-  localStream = stream;
-  callButton.disabled = false;
-}
-
-function start() {
+async function start() {
   console.log('Requesting local stream');
   startButton.disabled = true;
-  navigator.mediaDevices
-      .getUserMedia({
+  localStream = await navigator.mediaDevices.getUserMedia({
         audio: true,
         video: true
-      })
-      .then(gotStream)
-      .catch(e => console.log('getUserMedia() error: ', e));
+      });
+  video1.srcObject = localStream;
+  callButton.disabled = false;
 }
 
-function call() {
+async function call() {
   callButton.disabled = true;
   hangupButton.disabled = false;
   console.log('Starting calls');
@@ -80,39 +68,37 @@ function call() {
     console.log(`Using video device: ${videoTracks[0].label}`);
   }
   // Create an RTCPeerConnection via the polyfill.
-  const servers = null;
-  pc1Local = new RTCPeerConnection(servers);
-  pc1Remote = new RTCPeerConnection(servers);
-  pc1Remote.ontrack = gotRemoteStream1;
-  pc1Local.onicecandidate = iceCallback1Local;
-  pc1Remote.onicecandidate = iceCallback1Remote;
+  pc1Local = new RTCPeerConnection();
+  pc1Remote = new RTCPeerConnection();
+  pc1Remote.ontrack = e => gotRemoteStream(e, video2);
   console.log('pc1: created local and remote peer connection objects');
 
-  pc2Local = new RTCPeerConnection(servers);
-  pc2Remote = new RTCPeerConnection(servers);
-  pc2Remote.ontrack = gotRemoteStream2;
-  pc2Local.onicecandidate = iceCallback2Local;
-  pc2Remote.onicecandidate = iceCallback2Remote;
+  pc2Local = new RTCPeerConnection();
+  pc2Remote = new RTCPeerConnection();
+  pc2Remote.ontrack = e => gotRemoteStream(e, video3);
   console.log('pc2: created local and remote peer connection objects');
-
-  localStream.getTracks().forEach(track => pc1Local.addTrack(track, localStream));
-  console.log('Adding local stream to pc1Local');
-  pc1Local
-      .createOffer(offerOptions)
-      .then(gotDescription1Local, onCreateSessionDescriptionError);
-
-  localStream.getTracks().forEach(track => pc2Local.addTrack(track, localStream));
-  console.log('Adding local stream to pc2Local');
-  pc2Local.createOffer(offerOptions)
-      .then(gotDescription2Local, onCreateSessionDescriptionError);
+  localStream.getTracks().forEach(track => {
+    pc1Local.addTrack(track, localStream);
+    pc2Local.addTrack(track, localStream);
+  });
+  await Promise.all([
+    negotiate(pc1Local, pc1Remote),
+    negotiate(pc2Local, pc2Remote),
+  ]);
 }
 
-function onCreateSessionDescriptionError(error) {
-  console.log(`Failed to create session description: ${error.toString()}`);
+async function negotiate(localPc, remotePc) {
+  localPc.onicecandidate = e => remotePc.addIceCandidate(e.candidate);
+  remotePc.onicecandidate = e => localPc.addIceCandidate(e.candidate);
+
+  await localPc.setLocalDescription();
+  await remotePc.setRemoteDescription(localPc.localDescription);
+  await remotePc.setLocalDescription();
+  await localPc.setRemoteDescription(remotePc.localDescription);
 }
 
 async function gotDescription1Local(desc) {
-  pc1Local.setLocalDescription(desc);
+  await pc1Local.setLocalDescription(desc);
   console.log(`Offer from pc1Local\n${desc.sdp}`);
   await pc1Remote.setRemoteDescription(desc);
   // Since the 'remote' side has no media stream we need
@@ -155,48 +141,9 @@ function hangup() {
   callButton.disabled = false;
 }
 
-function gotRemoteStream1(e) {
+function gotRemoteStream(e, videoObject) {
   maybeSetCodecPreferences(e);
-  if (video2.srcObject !== e.streams[0]) {
-    video2.srcObject = e.streams[0];
-    console.log('pc1: received remote stream');
+  if (videoObject.srcObject !== e.streams[0]) {
+    videoObject.srcObject = e.streams[0];
   }
 }
-
-function gotRemoteStream2(e) {
-  maybeSetCodecPreferences(e);
-  if (video3.srcObject !== e.streams[0]) {
-    video3.srcObject = e.streams[0];
-    console.log('pc2: received remote stream');
-  }
-}
-
-function iceCallback1Local(event) {
-  handleCandidate(event.candidate, pc1Remote, 'pc1: ', 'local');
-}
-
-function iceCallback1Remote(event) {
-  handleCandidate(event.candidate, pc1Local, 'pc1: ', 'remote');
-}
-
-function iceCallback2Local(event) {
-  handleCandidate(event.candidate, pc2Remote, 'pc2: ', 'local');
-}
-
-function iceCallback2Remote(event) {
-  handleCandidate(event.candidate, pc2Local, 'pc2: ', 'remote');
-}
-
-function handleCandidate(candidate, dest, prefix, type) {
-  dest.addIceCandidate(candidate)
-      .then(onAddIceCandidateSuccess, onAddIceCandidateError);
-  console.log(`${prefix}New ${type} ICE candidate: ${candidate ? candidate.candidate : '(null)'}`);
-}
-
-function onAddIceCandidateSuccess() {
-  console.log('AddIceCandidate success.');
-}
-
-function onAddIceCandidateError(error) {
-  console.log(`Failed to add ICE candidate: ${error.toString()}`);
-}