Merge videoUploading samples together (#364)

Author: beaufortfrancois

next.config.js

@@ -8,6 +8,15 @@ module.exports = {
   basePath: BASE_PATH,
   compress: true,
   reactStrictMode: true,
+  async redirects() {
+    return [
+      {
+        source: '/samples/videoUploadingWebCodecs',
+        destination: '/samples/videoUploading?videoSource=videoFrame',
+        permanent: true,
+      },
+    ]
+  },
   webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
     config.module.rules.push({
       test: /\.(png|jpe?g|gif|webm)$/i,

src/pages/samples/[slug].tsx

@@ -72,9 +72,6 @@ const gpuComputeDemoPages: PageComponentType = {
 const webPlatformPages: PageComponentType = {
   resizeCanvas: dynamic(() => import('../../sample/resizeCanvas/main')),
   videoUploading: dynamic(() => import('../../sample/videoUploading/main')),
-  videoUploadingWebCodecs: dynamic(
-    () => import('../../sample/videoUploadingWebCodecs/main')
-  ),
   worker: dynamic(() => import('../../sample/worker/main')),
 };
 

src/sample/videoUploading/main.ts

@@ -58,10 +58,14 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
     minFilter: 'linear',
   });
 
+  const params = new URLSearchParams(window.location.search);
+
   const settings = {
     requestFrame: 'requestAnimationFrame',
+    videoSource: params.get('videoSource') || 'videoElement',
   };
 
+  gui.add(settings, 'videoSource', ['videoElement', 'videoFrame']);
   gui.add(settings, 'requestFrame', [
     'requestAnimationFrame',
     'requestVideoFrameCallback',
@@ -71,6 +75,9 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
     // Sample is no longer the active page.
     if (!pageState.active) return;
 
+    const externalTextureSource =
+      settings.videoSource === 'videoFrame' ? new VideoFrame(video) : video;
+
     const uniformBindGroup = device.createBindGroup({
       layout: pipeline.getBindGroupLayout(0),
       entries: [
@@ -81,7 +88,7 @@ const init: SampleInit = async ({ canvas, pageState, gui }) => {
         {
           binding: 2,
           resource: device.importExternalTexture({
-            source: video,
+            source: externalTextureSource,
           }),
         },
       ],