10.2 Advanced Peer-to-peer Example with Warm-up

When two peers decide they are going to set up a connection to each other and want to have the ICE, DTLS, and media connections “warmed up” such that they are ready to send and receive media immediately, they both go through these steps.

Example 10

  1. const signaling = new SignalingChannel(); // handles JSON.stringify/parse
  2. const constraints = {audio: true, video: true};
  3. const configuration = {iceServers: [{urls: 'stun:stun.example.org'}]};
  4. let pc;
  5. let audio;
  6. let video;
  7. let started = false;
  9. // Call warmup() before media is ready, to warm-up ICE, DTLS, and media.
  10. async function warmup(isAnswerer) {
  11.   pc = new RTCPeerConnection(configuration);
  12.   if (!isAnswerer) {
  13.     audio = pc.addTransceiver('audio');
  14.     video = pc.addTransceiver('video');
  15.   }
  17.   // send any ice candidates to the other peer
  18.   pc.onicecandidate = ({candidate}) => signaling.send({candidate});
  20.   // let the "negotiationneeded" event trigger offer generation
  21.   pc.onnegotiationneeded = async () => {
  22.     try {
  23.       await pc.setLocalDescription();
  24.       // send the offer to the other peer
  25.       signaling.send({description: pc.localDescription});
  26.     } catch (err) {
  27.       console.error(err);
  28.     }
  29.   };
  31.   pc.ontrack = async ({track, transceiver}) => {
  32.     try {
  33.       // once media for the remote track arrives, show it in the video element
  34.       event.track.onunmute = () => {
  35.         // don't set srcObject again if it is already set.
  36.         if (!remoteView.srcObject) {
  37.           remoteView.srcObject = new MediaStream();
  38.         }
  39.         remoteView.srcObject.addTrack(track);
  40.       }
  42.       if (isAnswerer) {
  43.         if (track.kind == 'audio') {
  44.           audio = transceiver;
  45.         } else if (track.kind == 'video') {
  46.           video = transceiver;
  47.         }
  48.         if (started) await addCameraMicWarmedUp();
  49.       }
  50.     } catch (err) {
  51.       console.error(err);
  52.     }
  53.   };
  55.   try {
  56.     // get a local stream, show it in a self-view and add it to be sent
  57.     selfView.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
  58.     if (started) await addCameraMicWarmedUp();
  59.   } catch (err) {
  60.     console.error(err);
  61.   }
  62. }
  64. // call start() after warmup() to begin transmitting media from both ends
  65. function start() {
  66.   signaling.send({start: true});
  67.   signaling.onmessage({data: {start: true}});
  68. }
  70. // add camera and microphone to already warmed-up connection
  71. async function addCameraMicWarmedUp() {
  72.   const stream = selfView.srcObject;
  73.   if (audio && video && stream) {
  74.     await Promise.all([
  75.       audio.sender.replaceTrack(stream.getAudioTracks()[0]),
  76.       video.sender.replaceTrack(stream.getVideoTracks()[0]),
  77.     ]);
  78.   }
  79. }
  81. signaling.onmessage = async ({data: {start, description, candidate}}) => {
  82.   if (!pc) warmup(true);
  84.   try {
  85.     if (start) {
  86.       started = true;
  87.       await addCameraMicWarmedUp();
  88.     } else if (description) {
  89.       await pc.setRemoteDescription(description);
  90.       // if we got an offer, we need to reply with an answer
  91.       if (description.type == 'offer') {
  92.         await pc.setLocalDescription();
  93.         signaling.send({description: pc.localDescription});
  94.       }
  95.     } else {
  96.       await pc.addIceCandidate(candidate);
  97.     }
  98.   } catch (err) {
  99.     console.error(err);
  100.   }
  101. };