videoUploading: add webcam as a source video option (#562)

kainino0x · web-flow · commit f2e5ae73db8c · 2026-04-16T16:24:57.000-07:00
And add size data about the video frames

Tested and working on Chrome/Firefox/Safari on Mac, Chrome on Android.
diff --git a/sample/videoUploading/index.html b/sample/videoUploading/index.html
@@ -23,9 +23,8 @@
         height: 100%;   /* make body fill the browser window */
       }
       canvas {
-        width: 100%;
-        height: 100%;
-        max-width: 100%;
+        width: min(100vw, 100vh);
+        aspect-ratio: 4 / 3;
         display: block;
       }
     </style>
@@ -34,5 +33,6 @@
   </head>
   <body>
     <canvas></canvas>
+    <pre id=videoinfo></pre>
   </body>
 </html>
diff --git a/sample/videoUploading/main.ts b/sample/videoUploading/main.ts
@@ -20,8 +20,14 @@ const videos = {
     url: '../../assets/video/Video_360°._Timelapse._Bled_Lake_in_Slovenia..webm.720p.vp9.webm',
     mode: '360',
   },
+  webcam: {
+    url: '',
+    mode: 'mirror',
+  },
 } as const;
 
+const videoinfo = document.getElementById('videoinfo') as HTMLPreElement;
+
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
 const context = canvas.getContext('webgpu');
 const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
@@ -90,7 +96,21 @@ let canReadVideo = false;
 
 async function playVideo(videoName: keyof typeof videos) {
   canReadVideo = false;
-  video.src = videos[videoName].url;
+
+  if (video.srcObject) {
+    (video.srcObject as MediaStream)
+      .getTracks()
+      .forEach((track) => track.stop());
+    video.srcObject = null;
+  }
+
+  if (videoName === 'webcam') {
+    video.srcObject = await navigator.mediaDevices.getUserMedia({
+      video: true,
+    });
+  } else {
+    video.src = videos[videoName].url;
+  }
   await video.play();
   canReadVideo = true;
 }
@@ -120,8 +140,22 @@ function drawVideo() {
   const maxSize = device.limits.maxTextureDimension2D;
   canvas.width = Math.min(Math.max(1, canvas.offsetWidth), maxSize);
   canvas.height = Math.min(Math.max(1, canvas.offsetHeight), maxSize);
-  const externalTextureSource =
-    settings.videoSource === 'videoFrame' ? new VideoFrame(video) : video;
+  const videoFrame =
+    settings.videoSource === 'videoFrame' ? new VideoFrame(video) : null;
+  const externalTextureSource = videoFrame ?? video;
+  videoinfo.textContent = `HTMLVideoElement: ${video.videoWidth}x${video.videoHeight}`;
+  if (videoFrame) {
+    videoinfo.textContent +=
+      '\nVideoFrame: ' +
+      JSON.stringify(
+        {
+          codedRect: videoFrame.codedRect,
+          visibleRect: videoFrame.visibleRect,
+        },
+        undefined,
+        2
+      );
+  }
 
   const mode = videos[settings.video].mode;
   const pipeline = mode === '360' ? video360Pipeline : videoCoverPipeline;
@@ -182,6 +216,9 @@ function drawVideo() {
       combinedAspect > 1 ? [1 / combinedAspect, 1] : [1, combinedAspect],
       mat
     );
+    if (mode === 'mirror') {
+      mat3.scale(mat, [-1, 1], mat);
+    }
     mat3.translate(mat, [-0.5, -0.5], mat);
     device.queue.writeBuffer(uniformBuffer, 0, mat);
   }
