Use VideoFrame constructor

package.json

@@ -16,7 +16,6 @@
     "export": "next export"
   },
   "dependencies": {
-    "@types/dom-mediacapture-transform": "^0.1.5",
     "codemirror": "^5.58.2",
     "dat.gui": "^0.7.6",
     "file-loader": "^6.2.0",

src/sample/videoUploadingWebCodecs/main.ts

@@ -61,35 +61,11 @@ const init: SampleInit = async ({ canvas, pageState }) => {
     minFilter: 'linear',
   });
 
-  function getVideoFrameFromVideoElement(video) {
-    return new Promise((resolve) => {
-      const videoTrack = video.captureStream().getVideoTracks()[0];
-      const trackProcessor = new MediaStreamTrackProcessor({
-        track: videoTrack,
-      });
-      const transformer = new TransformStream({
-        transform(videoFrame) {
-          videoTrack.stop();
-          resolve(videoFrame);
-        },
-        flush(controller) {
-          controller.terminate();
-        },
-      });
-      const trackGenerator = new MediaStreamTrackGenerator({
-        kind: 'video',
-      });
-      trackProcessor.readable
-        .pipeThrough(transformer)
-        .pipeTo(trackGenerator.writable);
-    });
-  }
-
   async function frame() {
     // Sample is no longer the active page.
     if (!pageState.active) return;
 
-    const videoFrame = await getVideoFrameFromVideoElement(video);
+    const videoFrame = new VideoFrame(video);
 
     const uniformBindGroup = device.createBindGroup({
       layout: pipeline.getBindGroupLayout(0),