clean up encrypted.html

fippo · Aug 18, 2023 · 74f6ea9 · 74f6ea9
1 parent 36afe8a
commit 74f6ea9
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 103 deletions.
diff --git a/encrypted.html b/encrypted.html
@@ -3,6 +3,7 @@
 <meta charset="utf-8">
 <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 <script src="https://webrtc.github.io/samples/src/js/third_party/graph.js"></script>
+<script src="split-merge.js"></script>
 <script src="test-assert.js"></script>
 <script src="draw-graphs.js"></script>
 <style>
@@ -20,6 +21,19 @@ <h2>Remote Videos</h2>
 </div>
 <script>
 const SDPUtils = adapter.sdp;
+
+const searchParameters = new URLSearchParams(window.location.search);
+const scaleDown = {0: 4, 1: 2, 2: 1};
+const rids = [0, 1, 2];
+const streamIds = {0: 'low', 1: 'mid', 2: 'hi'};
+const video = {
+  '1080p': {width: 1920, height: 1080},
+  '720p': {width: 1280, height: 720},
+  '360p': {width: 640, height: 360},
+}[searchParameters.get('resolution') || '720p'];
+const scalabilityMode = searchParameters.get('scalabilityMode') || undefined;
+const remb = searchParameters.has('remb');
+
 let currentCryptoKey;
 function sendTransform(chunk, controller) {
   console.log('ST', chunk.data.byteLength);
@@ -61,139 +75,63 @@ <h2>Remote Videos</h2>
   controller.enqueue(chunk);
 }
 
-const pc1 = new RTCPeerConnection({
-	sdpSemantics: 'unified-plan',
-	forceEncodedVideoInsertableStreams: true,
-});
-const pc2 = new RTCPeerConnection({
-	sdpSemantics: 'unified-plan',
-	forceEncodedVideoInsertableStreams: true,
-});
+const pc1 = new RTCPeerConnection({encodedInsertableStreams: true});
+const pc2 = new RTCPeerConnection({encodedInsertableStreams: true});
 pc1.onicecandidate = (e) => pc2.addIceCandidate(e.candidate);
 pc2.onicecandidate = (e) => pc1.addIceCandidate(e.candidate);
 pc2.ontrack = (e) => {
-      const transform = new TransformStream({
-        start() {},
-        flush() {},
-        transform: receiveTransform
-      });
-      const receiverStreams = e.receiver.createEncodedVideoStreams();
-      receiverStreams.readableStream
-          .pipeThrough(transform)
-          .pipeTo(receiverStreams.writableStream);
-
+    const transform = new TransformStream({
+      transform: receiveTransform
+    });
+    const receiverStreams = e.receiver.createEncodedStreams();
+    receiverStreams.readable
+        .pipeThrough(transform)
+        .pipeTo(receiverStreams.writable);
     show(e.streams[0], true);
 }
 
-const extensionsToFilter = [
-    'urn:ietf:params:rtp-hdrext:sdes:mid',
-    'urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id',
-    'urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id',
-];
-const rids = [0, 1, 2];
-navigator.mediaDevices.getUserMedia({video: {width: 1280, height: 720}})
+navigator.mediaDevices.getUserMedia({video})
 .then((stream) => {
     const transceiver = pc1.addTransceiver(stream.getVideoTracks()[0], {
         streams: [stream],
-        sendEncodings: rids.map(rid => {rid}),
+        sendEncodings: rids.map(rid => ({rid, scalabilityMode, scaleResolutionDownBy: scaleDown[rid]})),
     });
 	const {sender} = transceiver;
-    const senderStreams = sender.createEncodedVideoStreams();
+    const senderStreams = sender.createEncodedStreams();
     const senderTransformStream = new TransformStream({
-      start() {},
-      flush() {},
       transform: sendTransform
     });
-    senderStreams.readableStream
+    senderStreams.readable
         .pipeThrough(senderTransformStream)
-        .pipeTo(senderStreams.writableStream);
+        .pipeTo(senderStreams.writable);
 
     show(stream, false);
     return pc1.createOffer();
 })
 .then((offer) => {
-    const sections = SDPUtils.splitSections(offer.sdp);
-    const dtls = SDPUtils.getDtlsParameters(sections[1], sections[0]);
-    const ice = SDPUtils.getIceParameters(sections[1], sections[0]);
-    const rtpParameters = SDPUtils.parseRtpParameters(sections[1]);
-
-    // The gist of this hack is that rid and mid have the same wire format.
-    // Kudos to orphis for this clever hack!
-    const rid = rtpParameters.headerExtensions.find(ext => ext.uri === 'urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id');
-    rtpParameters.headerExtensions = rtpParameters.headerExtensions.filter(ext => {
-        return !extensionsToFilter.includes(ext.uri);
-    });
-    // This tells the other side that the RID packets are actually mids.
-    rtpParameters.headerExtensions.push({id: rid.id, uri: 'urn:ietf:params:rtp-hdrext:sdes:mid', direction: 'sendrecv'});
-
-    // Filter rtx as we have no wait to reinterpret rrid. Not doing this makes probing use RTX, its not understood
-    // and ramp-up is slower.
-    rtpParameters.codecs = rtpParameters.codecs.filter(c => c.name.toUpperCase() !== 'RTX');
-
-    let sdp = SDPUtils.writeSessionBoilerplate() +
-      SDPUtils.writeDtlsParameters(dtls, 'actpass') +
-      SDPUtils.writeIceParameters(ice) +
-      'a=group:BUNDLE 0 1 2\r\n' +
-      'a=msid-semantic:WMS *\r\n';
-    const codecs = SDPUtils.writeRtpDescription('video', rtpParameters);
-    sdp += codecs +
-        'a=setup:actpass\r\n' +
-        'a=mid:' + rids[0] + '\r\n' +
-        'a=msid:low low\r\n';
-    sdp += codecs +
-        'a=setup:actpass\r\n' +
-        'a=mid:' + rids[1] + '\r\n' +
-        'a=msid:mid mid\r\n';
-    sdp += codecs +
-        'a=setup:actpass\r\n' +
-        'a=mid:' + rids[2] + '\r\n' +
-        'a=msid:hi hi\r\n';
-
-    return Promise.all([
+  return Promise.all([
         pc1.setLocalDescription(offer),
         pc2.setRemoteDescription({
             type: 'offer',
-            sdp,
+            sdp: splitLayers(offer.sdp, {
+                disableTransportCC: remb,
+                rids,
+                streamIds,
+            }),
         }),
     ]);
 })
 .then(() => pc2.createAnswer())
 .then(answer => {
-    const sections = SDPUtils.splitSections(answer.sdp);
-    const dtls = SDPUtils.getDtlsParameters(sections[1], sections[0]);
-    const ice = SDPUtils.getIceParameters(sections[1], sections[0]);
-    const rtpParameters = SDPUtils.parseRtpParameters(sections[1]);
-    // Avoid duplicating the mid extension even though Chrome does not care (boo!)
-    rtpParameters.headerExtensions = rtpParameters.headerExtensions.filter(ext => {
-        return !extensionsToFilter.includes(ext.uri);
-    });
-    let sdp = SDPUtils.writeSessionBoilerplate() +
-      SDPUtils.writeDtlsParameters(dtls, 'active') +
-      SDPUtils.writeIceParameters(ice) +
-      'a=group:BUNDLE 0\r\n' +
-      'a=msid-semantic:WMS *\r\n';
-    const codecs = SDPUtils.writeRtpDescription('video', rtpParameters);
-    sdp += codecs;
-    sdp += 'a=setup:active\r\n';
-
-    rids.forEach(rid => {
-        sdp += 'a=rid:' + rid + ' recv\r\n';
-    });
-    sdp += 'a=simulcast:recv ' + rids.join(';') + '\r\n';
-    sdp += 'a=mid:' + SDPUtils.getMid(SDPUtils.splitSections(pc1.localDescription.sdp)[1]) + '\r\n';
-
-    // Re-add headerextensions we filtered.
-    const headerExtensions = SDPUtils.parseRtpParameters(SDPUtils.splitSections(pc1.localDescription.sdp)[1]).headerExtensions;
-    headerExtensions.forEach(ext => {
-        if (extensionsToFilter.includes(ext.uri)) {
-            sdp += 'a=extmap:' + ext.id + ' ' + ext.uri + '\r\n';
-        }
-    });
-    return Promise.all([
+  return Promise.all([
         pc2.setLocalDescription(answer),
         pc1.setRemoteDescription({
             type: 'answer',
-            sdp
+            sdp: mergeLayers(answer.sdp, pc1.localDescription.sdp, {
+                disableTransportCC: remb,
+                rids,
+                streamIds,
+            }),
         }),
     ]);
 })

diff --git a/rid-as-mid.html b/rid-as-mid.html
@@ -30,14 +30,14 @@ <h2>Remote Videos</h2>
 </p>
 <script>
 const SDPUtils = adapter.sdp;
-const searchParameters = new URLSearchParams(window.location.search);
 
 const pc1 = new RTCPeerConnection();
 const pc2 = new RTCPeerConnection();
 pc1.onicecandidate = (e) => pc2.addIceCandidate(e.candidate);
 pc2.onicecandidate = (e) => pc1.addIceCandidate(e.candidate);
 pc2.ontrack = (e) => show(e.streams[0], true);
 
+const searchParameters = new URLSearchParams(window.location.search);
 const scaleDown = {0: 4, 1: 2, 2: 1};
 const rids = [0, 1, 2];
 const streamIds = {0: 'low', 1: 'mid', 2: 'hi'};