Wire up byte size per resolution

burrito/burrito.js

@@ -68,6 +68,16 @@ let resolutions = [
     },
 ];
 
+
+// metrics
+
+const res240pBytesElement = document.getElementById('res-240-bytes');
+const res480pBytesElement = document.getElementById('res-480-bytes');
+const res720pBytesElement = document.getElementById('res-720-bytes');
+
+let res240pBytes = 0, res480pBytes = 0, res720pBytes = 0;
+
+// connection logic
 const worker = new Worker('./worker.js', {name: 'E2EE worker', type: 'module'});
 
 for (let idx = 0; idx <= resolutions.length - 1; idx++) {
@@ -107,6 +117,35 @@ worker.onmessage = async ({data}) => {
         webCodecVideoElement.srcObject = new MediaStream([webCodecTrackGenerator]);
     }
 
+
+    if (operation === 'onTransformFrame') {
+        console.log("received");
+        const {resolution, encodedVideoChunk} = data;
+
+        const {byteLength} = encodedVideoChunk;
+
+        switch (resolution) {
+            case '240p':
+                res240pBytes += byteLength;
+                res240pBytesElement.innerText = res240pBytes.toLocaleString()
+                break;
+
+            case '480p':
+                res480pBytes += byteLength;
+                res480pBytesElement.innerText = res480pBytes.toLocaleString();
+                break;
+
+            case '720p':
+                res720pBytes += byteLength;
+                res720pBytesElement.innerText = res720pBytes.toLocaleString();
+                break;
+
+            default:
+                throw new Error(`Unsupported resolution: ${resolution}`);
+        }
+
+
+    }
 }
 
 document.addEventListener('keydown', (e) => {

burrito/index.html

@@ -17,6 +17,23 @@
     <button disabled id="hangupButton">Hang Up (Press 3)</button>
 </div>
 
+<div>Encoded Frame metrics</div>
+<div style="display: flex;">
+    <div style="margin-right: 8px;">
+        <p>240p</p>
+        <p id="res-240-bytes"></p>
+    </div>
+    <div style="margin-right: 8px;">
+        <p>480p</p>
+        <p id="res-480-bytes"></p>
+    </div>
+    <div style="margin-right: 8px;">
+        <p>720p</p>
+        <p id="res-720-bytes"></p>
+    </div>
+</div>
+
+
 <div>WebRTC Sender</div>
 <div style="display: flex; width: 100vw;">
     <div>

burrito/worker.js

@@ -91,6 +91,13 @@ async function handleTransform(resolution, readable, writable) {
                 type,
             });
 
+            postMessage({
+                operation: `onTransformFrame`,
+                resolution,
+                encodedVideoChunk: chunk
+            });
+
+
             await videoDecoder.decode(chunk);
 
             console.log('transform', {resolution, temporalIndex, spatialIndex, width, height});