How to display video as a texture (video plane)

[chanawee-jan]

Hello! First of all, thanks for so much for your great library!
I want to ask that

How can I create a plane with video inside using react-three-fiber?

this is the example I'm trying to convert into react : http://stemkoski.github.io/Three.js/Video.html

const MovieScreen = ({ url }: MovieScreenProps) => {
  const [contextTem, setContextTem] = useState<any>()
  const video = document.createElement('video')
  video.src = url
  const canvasRef = useRef<HTMLCanvasElement>()

  const videoTexture = new Texture(canvasRef.current)
  videoTexture.minFilter = LinearFilter
  videoTexture.magFilter = LinearFilter

  useEffect(() => {
    if (canvasRef.current) {
      const canvas = canvasRef.current
      const context = canvas.getContext('2d')
      if (context == null) throw new Error('Could not get context')
      context.fillRect(0, 0, 240, 480)
      setContextTem(context)
      console.log(url)
    }
  }, [])

  useFrame(() => {
    if (video.readyState === video.HAVE_ENOUGH_DATA) {
      if (contextTem) {
        contextTem.drawImage(video, 0, 0)
      }
      if (videoTexture) {
        videoTexture.needsUpdate = true
      }
    }
  })

  return (
    <mesh position={[5, 5, 0]}>
      <meshBasicMaterial attach="material" map={videoTexture} />
      <planeGeometry args={[240, 100, 4, 4]} />
    </mesh>
  )
}

This is the code I'm working on but nothing is showed up on the screen.

Can anyone recommend or give and example of code which is working?

Thank you so much!

[drcmda]

https://codesandbox.io/s/video-texture-39hg8?file=/src/App.js

[elisabetta-p]

Hi @drcmda, I've tried opening this in the Oculus Browser but it returns an error, "The error you provided does not contain a stack trace.". All webxr options inside the browser are enabled; same when I open it in chrome in my computer. Do you know if there is anything that could be done?
@chanawee-jan were you able to fix your problem?

[drcmda]

probably just a cors issue or permissions. the basic functionality is working, the rest is just browser safety i guess.

[oflisback]

you are right in that it's permission related, if you add:

vid.muted = "muted";

around line 10 the sandbox project works.

[xbtmatt]

Any reason useVideoTexture was removed from the library? @drcmda

[drcmda]

it's a helper from the drei library, it's still there https://github.com/pmndrs/drei#usevideotexture