Stream from Stream Capture API with VideoTexture gives a black panel

Questions
1

For some reason I cannot replace the texture of my room model’s panel into a videostream from the stream capture API. The panel turns into a black color instead.

<video id="video" playsinline muted autoplay style="display: none;" crossorigin="anonymous"></video>

const videoElem = document.getElementById("video");
            async function startCapture() {
                try {
                    videoElem.srcObject=await navigator.mediaDevices.getDisplayMedia({video: {cursor: "motion"},audio: false}); //parameter = displayMediaOptions
                } catch(err) {
                    console.error("Error: " + err);
                }
            }
            function stopCapture() {
                videoElem.srcObject.getTracks().forEach(track => track.stop());
                videoElem.srcObject = null;
            }
            document.body.appendChild(video);
            startCapture();

                const texture = new THREE.TextureLoader().load(new THREE.VideoTexture( videoElem ));
                const renderer = new THREE.WebGLRenderer({ antialias: true });
                var loader = new THREE.GLTFLoader();
                renderer.setClearColor( 0x000000, 1 );
                renderer.setSize( window.innerWidth, window.innerHeight );

                //Imports room model
                loader.load( 'room with directional lighting.glb', function ( gltf ) {
                    room=gltf.scene;

                    //Modify plane's material (video stream)
                    if(room.children[4].name=="Monitor-Plane"){
                        room.children[4].material = new THREE.MeshBasicMaterial({map: texture});
                    }
                    scene.add(room);
                }, undefined, function ( error ) {
                    console.error( error );
                } );
2

Since no one is commenting.
I have solved it on my own by experimenting with a new plane.
The problem was that “I don’t have to use: texture = new THREE.TextureLoader().load();”, but declare what I give into the load function as a parameter as texture.

1 Like
3

Yeah, instead of:

const texture = new THREE.TextureLoader().load(new THREE.VideoTexture( videoElem ));

this should be sufficient:

const texture = new THREE.VideoTexture( videoElem );