From 19ecb1cebdc9346edb20b814e3df24be82bc0f81 Mon Sep 17 00:00:00 2001 From: Philipp Hancke Date: Thu, 4 Jul 2024 09:58:36 -0700 Subject: [PATCH] multiple: modernize code which was still stuck in the 2012 style --- .../peerconnection/multiple/js/main.js | 149 ++++-------------- 1 file changed, 32 insertions(+), 117 deletions(-) diff --git a/src/content/peerconnection/multiple/js/main.js b/src/content/peerconnection/multiple/js/main.js index f6e49ccbc..5fa1f6efd 100644 --- a/src/content/peerconnection/multiple/js/main.js +++ b/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({ - audio: true, - video: true - }) - .then(gotStream) - .catch(e => console.log('getUserMedia() error: ', e)); + localStream = await navigator.mediaDevices.getUserMedia({ + audio: true, + video: true + }); + video1.srcObject = localStream; + callButton.disabled = false; } -function call() { +async function call() { callButton.disabled = true; hangupButton.disabled = false; console.log('Starting calls'); @@ -80,67 +68,33 @@ 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); -} - -function onCreateSessionDescriptionError(error) { - console.log(`Failed to create session description: ${error.toString()}`); + localStream.getTracks().forEach(track => { + pc1Local.addTrack(track, localStream); + pc2Local.addTrack(track, localStream); + }); + await Promise.all([ + negotiate(pc1Local, pc1Remote), + negotiate(pc2Local, pc2Remote), + ]); } -async function gotDescription1Local(desc) { - 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 - // to pass in the right constraints in order for it to - // accept the incoming offer of audio and video. - pc1Remote.createAnswer().then(gotDescription1Remote, onCreateSessionDescriptionError); -} - -function gotDescription1Remote(desc) { - pc1Remote.setLocalDescription(desc); - console.log(`Answer from pc1Remote\n${desc.sdp}`); - pc1Local.setRemoteDescription(desc); -} - -async function gotDescription2Local(desc) { - pc2Local.setLocalDescription(desc); - console.log(`Offer from pc2Local\n${desc.sdp}`); - await pc2Remote.setRemoteDescription(desc); - // Since the 'remote' side has no media stream we need - // to pass in the right constraints in order for it to - // accept the incoming offer of audio and video. - pc2Remote.createAnswer().then(gotDescription2Remote, onCreateSessionDescriptionError); -} +async function negotiate(localPc, remotePc) { + localPc.onicecandidate = e => remotePc.addIceCandidate(e.candidate); + remotePc.onicecandidate = e => localPc.addIceCandidate(e.candidate); -function gotDescription2Remote(desc) { - pc2Remote.setLocalDescription(desc); - console.log(`Answer from pc2Remote\n${desc.sdp}`); - pc2Local.setRemoteDescription(desc); + await localPc.setLocalDescription(); + await remotePc.setRemoteDescription(localPc.localDescription); + await remotePc.setLocalDescription(); + await localPc.setRemoteDescription(remotePc.localDescription); } function hangup() { @@ -155,48 +109,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()}`); -}