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