Threejs: Problem with videoTextures on MacOS

Viewed 154

I'm trying to play a videotexture on a mesh using R3F and change the source. Everything is looking good on Windows, Android, IOS. Unfortunately I got different errors on MacOS in every Browser.

On Macbook with newest OS and browser version I got a black texture in every browser. I get no console.logs here.

On an older MacPro it seems to work ok in Chrome. In Safari it plays the first video. But when I change the src of the video the framerate drops to 5fps and the first video just stops. Here I get following error in the console:

[Error] WebGL: INVALID_VALUE: texImage2D: no video
texImage2D

Here is my code:

import React, { Suspense } from "react";

import { Canvas, useLoader } from "@react-three/fiber";

import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";

import { MeshStandardMaterial, VideoTexture, sRGBEncoding } from "three";

const textureVid = document.createElement("video");
textureVid.src = "loop.mp4";
textureVid.crossOrigin = "Anonymous";
textureVid.loop = true;
textureVid.muted = true;
textureVid.play();

const videoTexture = new VideoTexture(textureVid);
videoTexture.encoding = sRGBEncoding;

const matTVScreen = new MeshStandardMaterial({
 emissiveMap: videoTexture,
});

function Model(props) {
  const fbx = useLoader(FBXLoader, "VideoTile.fbx");
  fbx.traverse((mesh, i) => {
   if (mesh.isMesh) {
     if (mesh.material.name === "TVScreen") {
     mesh.material = matTVScreen;
     }
    }
   });

   return (
     <group>
       <mesh castShadow position={props.position}>
         <primitive object={fbx} dispose={null} />
       </mesh>
     </group>
   );
 }

 function App() {
   return (
     <>
       <button
         onClick={() => {
           textureVid.play();
         }}
       >
         Play
       </button>
       <button
         onClick={() => {
           textureVid.pause();
         }}
       >
         Pause
       </button>
       <button
         onClick={() => {
           textureVid.src = "loop2.mp4";
           textureVid.play();
         }}
       >
         Change Video Source
       </button>
       <Canvas
         shadows
         camera={{ fov: 35 }}
         style={{ width: "100vw", height: "100vh" }}
       >
         <Suspense fallback={null}>
           <Model />
         </Suspense>
       </Canvas>
     </>
   );
 }

 export default App;

I hope you can help me.

thanks in regard

0 Answers
Related