Show bytes

hypervideo · Oct 9, 2024 · 0b292db · 0b292db
1 parent 44e1ceb
commit 0b292db
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,6 @@
             font-family: "Times New Roman", Times, serif;
             height: 100vh;
             width: 100vw;
-            padding: 2px;
         }
 
         body {
@@ -40,6 +39,7 @@
         li {
             margin: 0;
             padding: 2px;
+            cursor: pointer;
         }
 
         li p {
@@ -53,22 +53,17 @@
 
         #environment {
             display: flex;
-            width: 100vw;
+            width: calc(100vw - 2px);
             background-color: antiquewhite;
         }
 
-
         #layers {
             flex-grow: 1;
             overflow-y: scroll;
-            margin: 0;
-            padding: 0;
+            display: flex;
+            width: calc(100vw - 2px);
         }
 
-        #l3t3-entries {
-            margin: 0;
-            padding: 0;
-        }
 
     </style>
 </head>
@@ -129,8 +124,7 @@
         <video autoplay id="video3" playsinline></video>
     </div>
 </div>
-
-<div id="layers">
+<div>
     <p>
         *There are actually two remote computer to peer connections. One connection uses the scalability mode
         <code>L3T3</code> to encode video frames. The other uses <code>S3T3</code>. The WebRTC receiver video frame
@@ -145,23 +139,35 @@
     <p>
         Key frames are green, delta frames are yellow.
     </p>
-
-    <div style="display: flex; ">
+</div>
+<div id="layers">
+    <div style="min-width: 30em; display: flex; margin-right: 8em;">
         <div style="margin-right: 8px">
-            <div>
-                <p>S3T3 Encoded Frames</p>
-            </div>
+            S3T3 Encoded Frames
             <div id="s3t3-entries">
             </div>
         </div>
         <div>
-            <div>
-                <p>L3T3 Encoded Frames</p>
-            </div>
+            L3T3 Encoded Frames
             <div id="l3t3-entries">
             </div>
         </div>
     </div>
+    <div style="flex-grow: 1;">
+        <div>Byte Content</div>
+        <div style="display: flex;">
+            <div style="min-width: 10em; margin-right: 20em;">
+                S3T3
+                <div id="s3t3-frame-bytes" style="max-width: 40em">
+                </div>
+            </div>
+            <div>
+                L3T3
+                <div id="l3t3-frame-bytes" style="max-width: 40em">
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

diff --git a/js/main.js b/js/main.js
@@ -228,7 +228,7 @@ worker.onmessage = ({data}) => {
     }
 
     if (data.operation === "encoded-frame") {
-        const {layered, timestamp, spatialIndex, temporalIndex, size, type} = data;
+        const {layered, timestamp, spatialIndex, temporalIndex, size, type, frameData} = data;
 
         let frameMap = layered ? encodedL3T3Frames : encodedS3T3Frames;
 
@@ -239,6 +239,7 @@ worker.onmessage = ({data}) => {
                 temporalIndex,
                 size,
                 type,
+                frameData,
             });
 
             frameMap.set(timestamp, layers);
@@ -250,31 +251,66 @@ worker.onmessage = ({data}) => {
                 temporalIndex,
                 size,
                 type,
+                frameData,
             }]);
 
             appendEncodedFrame(timestamp, [{
                 spatialIndex,
                 temporalIndex,
                 size,
                 type,
+                frameData
             }], layered)
         }
     }
 };
 
+const bytesS3T3 = document.getElementById("s3t3-frame-bytes");
+const bytesL3T3 = document.getElementById("l3t3-frame-bytes");
+
 function updateEncodedFrame(timestamp, frames, layered) {
     const entry = document.querySelector(`#entry-${layered}-${timestamp} ul`);
     if (entry) {
-        entry.innerHTML = frames.map(f => `
-            <li style="padding: 2px; background-color: ${f.type === 'delta' ? 'yellow' : 'lawngreen'};">
-             
-                <p>${JSON.stringify({
-            spatialIndex: f.spatialIndex,
-            temporalIndex: f.temporalIndex,
-            size: f.size,
-        }, null, 2)}</p> 
-            </li> 
-        `).join('')
+        let bytes = layered ? bytesL3T3 : bytesS3T3;
+
+        entry.innerHTML = "";
+
+        frames.forEach(({spatialIndex, temporalIndex, size, type, frameData}) => {
+            const li = document.createElement('li');
+            li.style.padding = '2px';
+            li.style.backgroundColor = type === 'delta' ? 'yellow' : 'lawngreen';
+
+            const p = document.createElement('p');
+            p.textContent = JSON.stringify({
+                spatialIndex,
+                temporalIndex,
+                size,
+            }, null, 2);
+
+            li.appendChild(p);
+            li.addEventListener('click', (e) => {
+                e.preventDefault();
+
+                const byteArray = new Uint8Array(frameData);
+
+                let byteStr = '';
+
+                for (let idx = 0; idx < byteArray.length; idx++) {
+                    byteStr += byteArray[idx].toString(16).padStart(2, '0') + ' ';
+                }
+
+
+                bytes.innerHTML = `
+                    <div style="padding-bottom: 8px;">
+                        ${timestamp}, spatial index: ${spatialIndex}, temporal index: ${temporalIndex} 
+                    </div>
+                    <div>${byteStr}</div>   
+                `;
+            });
+
+
+            entry.appendChild(li);
+        });
     }
 }
 

diff --git a/js/worker.js b/js/worker.js
@@ -83,7 +83,7 @@ async function handleTransform(operation, readable, writable) {
                     timestamp,
                     spatialIndex,
                     temporalIndex,
-                    data,
+                    frameData: data,
                     size,
                     type,
                 });
@@ -104,15 +104,13 @@ async function handleTransform(operation, readable, writable) {
 
                 const size = data.byteLength;
 
-                console.log(`${spatialIndex}, ${temporalIndex}`)
-
                 postMessage({
                     operation: 'encoded-frame',
                     layered: false,
                     timestamp,
                     spatialIndex,
                     temporalIndex,
-                    data,
+                    frameData: data,
                     size,
                     type,
                 });