Using a video as a texture in Three.js

VideoTexture.tsx
tsx
import {useThree} from'@react-three/fiber';
import {Video} from'@remotion/media';
import {ThreeCanvas} from'@remotion/three';
import React, {useCallback, useState} from'react';
import {useVideoConfig} from'remotion';
import {CanvasTexture} from'three';
constvideoSrc='https://remotion.media/video.mp4';
constvideoWidth=1920;
constvideoHeight=1080;
constaspectRatio= videoWidth / videoHeight;
constscale=3;
constplaneHeight= scale;
constplaneWidth= aspectRatio * scale;
constInner:React.FC= () => {
const [canvasStuff] =useState(() => {
constcanvas=newOffscreenCanvas(videoWidth, videoHeight);
constcontext= canvas.getContext('2d')!;
consttexture=newCanvasTexture(canvas);
return {canvas, context, texture};
 });
const {invalidate} =useThree();
constonVideoFrame=useCallback(
 (frame:CanvasImageSource) => {
 canvasStuff.context.drawImage(frame, 0, 0, videoWidth, videoHeight);
// This is needed during preview - the frame loop synchronizes with the monitor refresh rate
// By setting this, we signal that the texture has been updated
 canvasStuff.texture.needsUpdate =true;
// This is needed during rendering - the frame loop is only triggered on demand.
// We have to call "invalidate()" to trigger a new frame loop.
invalidate();
 },
 [canvasStuff.context, canvasStuff.texture, invalidate],
 );
return (
 <>
 <Videosrc={videoSrc} onVideoFrame={onVideoFrame} mutedheadless />
 <mesh>
 <planeGeometryargs={[planeWidth, planeHeight]} />
 <meshBasicMaterialcolor={0xffffff} toneMapped={false} map={canvasStuff.texture} />
 </mesh>
 </>
 );
};
exportconstRemotionMediaVideoTexture:React.FC= () => {
const {width, height} =useVideoConfig();
return (
 <ThreeCanvasstyle={{backgroundColor: 'white'}} linearwidth={width} height={height}>
 <Inner />
 </ThreeCanvas>
 );
};