diff --git a/src/content/devices/multi/js/main.js b/src/content/devices/multi/js/main.js
index 2d5f2e7fcd..eca05ede52 100644
--- a/src/content/devices/multi/js/main.js
+++ b/src/content/devices/multi/js/main.js
@@ -72,7 +72,7 @@ function changeAudioDestination(event) {
   const deviceId = event.target.value;
   const outputSelector = event.target;
   // FIXME: Make the media element lookup dynamic.
-  const element = event.path[2].childNodes[1];
+  const element = event.composedPath()[2].childNodes[1];
   attachSinkId(element, deviceId, outputSelector);
 }
 
diff --git a/src/content/extensions/svc/js/main.js b/src/content/extensions/svc/js/main.js
index 50bcbdd1c1..19ac271607 100644
--- a/src/content/extensions/svc/js/main.js
+++ b/src/content/extensions/svc/js/main.js
@@ -115,9 +115,9 @@ async function start() {
     alert(`getUserMedia() error: ${e.name}`);
   }
   if (supportsSetCodecPreferences) {
-    const {codecs} = RTCRtpSender.getCapabilities('video');
+    const {codecs} = RTCRtpReceiver.getCapabilities('video');
     codecs.forEach(codec => {
-      if (['video/red', 'video/ulpfec', 'video/rtx'].includes(codec.mimeType)) {
+      if (['video/red', 'video/ulpfec', 'video/rtx', 'video/flexfec-03'].includes(codec.mimeType)) {
         return;
       }
       const option = document.createElement('option');
@@ -215,21 +215,6 @@ async function call() {
     }
   });
   console.log('Added local stream to pc1');
-  if (supportsSetCodecPreferences) {
-    const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
-    if (preferredCodec.value !== '') {
-      const [mimeType, sdpFmtpLine] = preferredCodec.value.split(' ');
-      const {codecs} = RTCRtpSender.getCapabilities('video');
-      const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.sdpFmtpLine === sdpFmtpLine);
-      const selectedCodec = codecs[selectedCodecIndex];
-      codecs.splice(selectedCodecIndex, 1);
-      codecs.unshift(selectedCodec);
-      console.log(codecs);
-      const transceiver = pc1.getTransceivers().find(t => t.sender && t.sender.track === localStream.getVideoTracks()[0]);
-      transceiver.setCodecPreferences(codecs);
-      console.log('Preferred video codec', selectedCodec);
-    }
-  }
   codecPreferences.disabled = true;
   scalabilityMode.disabled = true;
 
@@ -293,6 +278,19 @@ function gotRemoteStream(e) {
     remoteVideo.srcObject = e.streams[0];
     console.log('pc2 received remote stream');
   }
+  if (supportsSetCodecPreferences) {
+    const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
+    if (preferredCodec.value !== '') {
+      const [mimeType, sdpFmtpLine] = preferredCodec.value.split(' ');
+      const {codecs} = RTCRtpReceiver.getCapabilities('video');
+      const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.sdpFmtpLine === sdpFmtpLine);
+      const selectedCodec = codecs[selectedCodecIndex];
+      codecs.splice(selectedCodecIndex, 1);
+      codecs.unshift(selectedCodec);
+      e.transceiver.setCodecPreferences(codecs);
+      console.log('Preferred video codec', selectedCodec);
+    }
+  }
 }
 
 async function onCreateAnswerSuccess(desc) {
diff --git a/src/content/getusermedia/getdisplaymedia/index.html b/src/content/getusermedia/getdisplaymedia/index.html
index 9cdfdc43ea..bc5703dbf1 100644
--- a/src/content/getusermedia/getdisplaymedia/index.html
+++ b/src/content/getusermedia/getdisplaymedia/index.html
@@ -33,7 +33,7 @@
   <div id="container">
     <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> <span>getDisplayMedia</span></h1>
 
-    <video id="gum-local" autoplay playsinline muted></video>
+    <video id="video" autoplay playsinline muted></video>
     <button id="startButton" disabled>Start</button>
     <fieldset id="options" style="display:none">
       <legend>Advanced options</legend>
diff --git a/src/content/insertable-streams/endtoend-encryption/js/main.js b/src/content/insertable-streams/endtoend-encryption/js/main.js
index 304ced712f..b4b20c9f2d 100644
--- a/src/content/insertable-streams/endtoend-encryption/js/main.js
+++ b/src/content/insertable-streams/endtoend-encryption/js/main.js
@@ -39,6 +39,14 @@ let localStream;
 // eslint-disable-next-line no-unused-vars
 let remoteStream;
 
+// Preferring a certain codec is an expert option without GUI.
+// Use opus by default.
+// eslint-disable-next-line prefer-const
+let preferredAudioCodecMimeType = 'audio/opus';
+// Use VP8 by default to limit depacketization issues.
+// eslint-disable-next-line prefer-const
+let preferredVideoCodecMimeType = 'video/VP8';
+
 let hasEnoughAPIs = !!window.RTCRtpScriptTransform;
 
 if (!hasEnoughAPIs) {
@@ -141,6 +149,25 @@ function setupReceiverTransform(receiver) {
   }, [readable, writable]);
 }
 
+function maybeSetCodecPreferences(trackEvent) {
+  if (!'setCodecPreferences' in window.RTCRtpTransceiver.prototype) return;
+  if (trackEvent.track.kind === 'audio' && preferredAudioCodecMimeType ) {
+    const {codecs} = RTCRtpReceiver.getCapabilities('audio');
+    const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredAudioCodecMimeType);
+    const selectedCodec = codecs[selectedCodecIndex];
+    codecs.splice(selectedCodecIndex, 1);
+    codecs.unshift(selectedCodec);
+    trackEvent.transceiver.setCodecPreferences(codecs);
+  } else if (trackEvent.track.kind === 'video' && preferredVideoCodecMimeType) {
+    const {codecs} = RTCRtpReceiver.getCapabilities('video');
+    const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredVideoCodecMimeType);
+    const selectedCodec = codecs[selectedCodecIndex];
+    codecs.splice(selectedCodecIndex, 1);
+    codecs.unshift(selectedCodec);
+    trackEvent.transceiver.setCodecPreferences(codecs);
+  }
+}
+
 function call() {
   callButton.disabled = true;
   hangupButton.disabled = false;
@@ -151,6 +178,7 @@ function call() {
   // to both places.
   startToMiddle = new VideoPipe(localStream, true, false, e => {
     // Do not setup the receiver transform.
+    maybeSetCodecPreferences(e);
     videoMonitor.srcObject = e.streams[0];
   });
   startToMiddle.pc1.getSenders().forEach(setupSenderTransform);
@@ -158,6 +186,7 @@ function call() {
 
   startToEnd = new VideoPipe(localStream, true, true, e => {
     setupReceiverTransform(e.receiver);
+    maybeSetCodecPreferences(e);
     gotRemoteStream(e.streams[0]);
   });
   startToEnd.pc1.getSenders().forEach(setupSenderTransform);
diff --git a/src/content/insertable-streams/endtoend-encryption/js/videopipe.js b/src/content/insertable-streams/endtoend-encryption/js/videopipe.js
index 6e32d78786..353fcd0ee7 100644
--- a/src/content/insertable-streams/endtoend-encryption/js/videopipe.js
+++ b/src/content/insertable-streams/endtoend-encryption/js/videopipe.js
@@ -10,22 +10,17 @@
 //
 // The usage of this abstraction:
 // var pipe = new VideoPipe(mediastream, handlerFunction);
-// handlerFunction = function(mediastream) {
+// handlerFunction = function(MediaStreamTrackEvent) {
 //   do_something
 // }
 // pipe.close();
 //
 // The VideoPipe will set up 2 PeerConnections, connect them to each
-// other, and call HandlerFunction when the stream is available in the
-// second PeerConnection.
+// other, and call HandlerFunction when the stream's track is available
+// in the second PeerConnection.
 //
 'use strict';
 
-// Preferring a certain codec is an expert option without GUI.
-// Use VP8 by default to limit depacketization issues.
-// eslint-disable-next-line prefer-const
-let preferredVideoCodecMimeType = 'video/VP8';
-
 function VideoPipe(stream, forceSend, forceReceive, handler) {
   this.pc1 = new RTCPeerConnection({
     encodedInsertableStreams: forceSend,
@@ -33,18 +28,8 @@ function VideoPipe(stream, forceSend, forceReceive, handler) {
   this.pc2 = new RTCPeerConnection({
     encodedInsertableStreams: forceReceive,
   });
-
-  stream.getTracks().forEach((track) => this.pc1.addTrack(track, stream));
   this.pc2.ontrack = handler;
-  if (preferredVideoCodecMimeType && 'setCodecPreferences' in window.RTCRtpTransceiver.prototype) {
-    const {codecs} = RTCRtpSender.getCapabilities('video');
-    const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredVideoCodecMimeType);
-    const selectedCodec = codecs[selectedCodecIndex];
-    codecs.splice(selectedCodecIndex, 1);
-    codecs.unshift(selectedCodec);
-    const transceiver = this.pc1.getTransceivers().find(t => t.sender && t.sender.track === stream.getVideoTracks()[0]);
-    transceiver.setCodecPreferences(codecs);
-  }
+  stream.getTracks().forEach((track) => this.pc1.addTrack(track, stream));
 }
 
 VideoPipe.prototype.negotiate = async function() {
@@ -52,6 +37,7 @@ VideoPipe.prototype.negotiate = async function() {
   this.pc2.onicecandidate = e => this.pc1.addIceCandidate(e.candidate);
 
   const offer = await this.pc1.createOffer();
+  // Disable video/red to allow for easier inspection in Wireshark.
   await this.pc2.setRemoteDescription({type: 'offer', sdp: offer.sdp.replace('red/90000', 'green/90000')});
   await this.pc1.setLocalDescription(offer);
 
diff --git a/src/content/insertable-streams/endtoend-encryption/js/worker.js b/src/content/insertable-streams/endtoend-encryption/js/worker.js
index 5e3b6d07d0..a5d841da02 100644
--- a/src/content/insertable-streams/endtoend-encryption/js/worker.js
+++ b/src/content/insertable-streams/endtoend-encryption/js/worker.js
@@ -24,6 +24,7 @@ let currentKeyIdentifier = 0;
 // which is 10 bytes for key frames and 3 bytes for delta frames.
 // For opus (where encodedFrame.type is not set) this is the TOC byte from
 //   https://tools.ietf.org/html/rfc6716#section-3.1
+// TODO: make this work for other codecs.
 //
 // It makes the (encrypted) video and audio much more fun to watch and listen to
 // as the decoder does not immediately throw a fatal error.
@@ -39,12 +40,14 @@ function dump(encodedFrame, direction, max = 16) {
   for (let j = 0; j < data.length && j < max; j++) {
     bytes += (data[j] < 16 ? '0' : '') + data[j].toString(16) + ' ';
   }
+  const metadata = encodedFrame.getMetadata();
   console.log(performance.now().toFixed(2), direction, bytes.trim(),
       'len=' + encodedFrame.data.byteLength,
       'type=' + (encodedFrame.type || 'audio'),
       'ts=' + encodedFrame.timestamp,
-      'ssrc=' + encodedFrame.getMetadata().synchronizationSource,
-      'pt=' + (encodedFrame.getMetadata().payloadType || '(unknown)')
+      'ssrc=' + metadata.synchronizationSource,
+      'pt=' + (metadata.payloadType || '(unknown)'),
+      'mimeType=' + (metadata.mimeType || '(unknown)'),
   );
 }
 
diff --git a/src/content/peerconnection/audio/js/main.js b/src/content/peerconnection/audio/js/main.js
index ab54fd4992..67861171f6 100644
--- a/src/content/peerconnection/audio/js/main.js
+++ b/src/content/peerconnection/audio/js/main.js
@@ -56,7 +56,7 @@ const supportsSetCodecPreferences = window.RTCRtpTransceiver &&
 if (supportsSetCodecPreferences) {
   codecSelector.style.display = 'none';
 
-  const {codecs} = RTCRtpSender.getCapabilities('audio');
+  const {codecs} = RTCRtpReceiver.getCapabilities('audio');
   codecs.forEach(codec => {
     if (['audio/CN', 'audio/telephone-event'].includes(codec.mimeType)) {
       return;
@@ -98,23 +98,6 @@ function gotStream(stream) {
   localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
   console.log('Adding Local Stream to peer connection');
 
-  if (supportsSetCodecPreferences) {
-    const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
-    if (preferredCodec.value !== '') {
-      const [mimeType, clockRate, sdpFmtpLine] = preferredCodec.value.split(' ');
-      const {codecs} = RTCRtpSender.getCapabilities('audio');
-      console.log(mimeType, clockRate, sdpFmtpLine);
-      console.log(JSON.stringify(codecs, null, ' '));
-      const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.clockRate === parseInt(clockRate, 10) && c.sdpFmtpLine === sdpFmtpLine);
-      const selectedCodec = codecs[selectedCodecIndex];
-      codecs.splice(selectedCodecIndex, 1);
-      codecs.unshift(selectedCodec);
-      const transceiver = pc1.getTransceivers().find(t => t.sender && t.sender.track === localStream.getAudioTracks()[0]);
-      transceiver.setCodecPreferences(codecs);
-      console.log('Preferred video codec', selectedCodec);
-    }
-  }
-
   pc1.createOffer(offerOptions)
       .then(gotDescription1, onCreateSessionDescriptionError);
 
@@ -207,6 +190,22 @@ function hangup() {
 }
 
 function gotRemoteStream(e) {
+  if (supportsSetCodecPreferences) {
+    const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
+    if (preferredCodec.value !== '') {
+      const [mimeType, clockRate, sdpFmtpLine] = preferredCodec.value.split(' ');
+      const {codecs} = RTCRtpReceiver.getCapabilities('audio');
+      console.log(mimeType, clockRate, sdpFmtpLine);
+      console.log(JSON.stringify(codecs, null, ' '));
+      const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.clockRate === parseInt(clockRate, 10) && c.sdpFmtpLine === sdpFmtpLine);
+      const selectedCodec = codecs[selectedCodecIndex];
+      codecs.splice(selectedCodecIndex, 1);
+      codecs.unshift(selectedCodec);
+      e.transceiver.setCodecPreferences(codecs);
+      console.log('Preferred video codec', selectedCodec);
+    }
+  }
+
   if (audio2.srcObject !== e.streams[0]) {
     audio2.srcObject = e.streams[0];
     console.log('Received remote stream');
diff --git a/src/content/peerconnection/change-codecs/js/main.js b/src/content/peerconnection/change-codecs/js/main.js
index b34767b5ca..3c8c8efa02 100644
--- a/src/content/peerconnection/change-codecs/js/main.js
+++ b/src/content/peerconnection/change-codecs/js/main.js
@@ -112,21 +112,6 @@ async function call() {
 
   localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
   console.log('Added local stream to pc1');
-  if (supportsSetCodecPreferences) {
-    const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
-    if (preferredCodec.value !== '') {
-      const [mimeType, sdpFmtpLine] = preferredCodec.value.split(' ');
-      const {codecs} = RTCRtpSender.getCapabilities('video');
-      const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.sdpFmtpLine === sdpFmtpLine);
-      const selectedCodec = codecs[selectedCodecIndex];
-      codecs.splice(selectedCodecIndex, 1);
-      codecs.unshift(selectedCodec);
-      console.log(codecs);
-      const transceiver = pc1.getTransceivers().find(t => t.sender && t.sender.track === localStream.getVideoTracks()[0]);
-      transceiver.setCodecPreferences(codecs);
-      console.log('Preferred video codec', selectedCodec);
-    }
-  }
   codecPreferences.disabled = true;
 
   try {
@@ -185,6 +170,21 @@ function onSetSessionDescriptionError(error) {
 }
 
 function gotRemoteStream(e) {
+  // Set codec preferences on the receiving side.
+  if (e.track.kind === 'video' && supportsSetCodecPreferences) {
+    const preferredCodec = codecPreferences.options[codecPreferences.selectedIndex];
+    if (preferredCodec.value !== '') {
+      const [mimeType, sdpFmtpLine] = preferredCodec.value.split(' ');
+      const {codecs} = RTCRtpReceiver.getCapabilities('video');
+      const selectedCodecIndex = codecs.findIndex(c => c.mimeType === mimeType && c.sdpFmtpLine === sdpFmtpLine);
+      const selectedCodec = codecs[selectedCodecIndex];
+      codecs.splice(selectedCodecIndex, 1);
+      codecs.unshift(selectedCodec);
+      e.transceiver.setCodecPreferences(codecs);
+      console.log('Receiver\'s preferred video codec', selectedCodec);
+    }
+  }
+
   if (remoteVideo.srcObject !== e.streams[0]) {
     remoteVideo.srcObject = e.streams[0];
     console.log('pc2 received remote stream');
diff --git a/src/content/peerconnection/negotiate-timing/js/main.js b/src/content/peerconnection/negotiate-timing/js/main.js
index ed9e73b6cc..7b2486ce5f 100644
--- a/src/content/peerconnection/negotiate-timing/js/main.js
+++ b/src/content/peerconnection/negotiate-timing/js/main.js
@@ -135,6 +135,18 @@ async function call() {
   pc1.oniceconnectionstatechange = e => onIceStateChange(pc1, e);
   pc2.oniceconnectionstatechange = e => onIceStateChange(pc2, e);
   pc2.addEventListener('track', gotRemoteStream, {once: true});
+  if (preferredVideoCodecMimeType) {
+    pc2.ontrack = (e) => {
+      if (e.track.kind === 'video') {
+        const {codecs} = RTCRtpReceiver.getCapabilities('video');
+        const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredVideoCodecMimeType);
+        const selectedCodec = codecs[selectedCodecIndex];
+        codecs.splice(selectedCodecIndex, 1);
+        codecs.unshift(selectedCodec);
+        e.transceiver.setCodecPreferences(codecs);
+      }
+    };
+  }
 
   localStream.getTracks().forEach(track => pc1.addTrack(track, localStream));
   console.log('Added local stream to pc1');
@@ -156,7 +168,7 @@ async function onIceCandidate(pc, event) {
   if (event.candidate) {
     console.log(`${getName(pc)} emitted ICE candidate for index ${event.candidate.sdpMLineIndex}:\n${event.candidate.candidate}`);
   } else {
-    console.log(`$getName(pc)} ICE NULL candidate`);
+    console.log(`${getName(pc)} ICE NULL candidate`);
   }
   await getOtherPc(pc).addIceCandidate(event.candidate);
   console.log(`${getName(pc)} addIceCandidate success`);
@@ -175,15 +187,7 @@ function adjustTransceiverCounts(pc, videoCount) {
   if (currentVideoCount < videoCount) {
     console.log('Adding ' + (videoCount - currentVideoCount) + ' transceivers');
     for (let i = currentVideoCount; i < videoCount; ++i) {
-      const transceiver = pc.addTransceiver('video');
-      if (preferredVideoCodecMimeType) {
-        const {codecs} = RTCRtpSender.getCapabilities('video');
-        const selectedCodecIndex = codecs.findIndex(c => c.mimeType === preferredVideoCodecMimeType);
-        const selectedCodec = codecs[selectedCodecIndex];
-        codecs.splice(selectedCodecIndex, 1);
-        codecs.unshift(selectedCodec);
-        transceiver.setCodecPreferences(codecs);
-      }
+      pc.addTransceiver('video');
     }
   } else if (currentVideoCount > videoCount) {
     console.log('Stopping ' + (currentVideoCount - videoCount) + ' transceivers');