I am trying to use the captureStream method to get the stream from the canvas which is initiated by webglrenderer of three.js with xr enabled.
After i capture the stream, i am able to see that the stream is accurate but when i use it to set the srcObject of a video element, it gives blank video.
I have observed and tried with a number of "2d"/"3d" and "webgl" canvas and it works just fine in normal cases. But trying to capture it with webxr enabled using three.js doesn't provide the accurate results.
WHAT I AM TRYING?
with the domOverlay feature provided to webxr, i am adding a video element to the overlay container and then trying to capture the stream from canvas and play it in the video element.
function captureVideo() {
const overlay = document.getElementById('overlay');
const stream = renderer.domElement.captureStream();
console.log('stream', stream);
const video = document.createElement('video');
video.controls = true;
video.muted = true;
video.height = 200;
video.width = 200;
video.style.border = '1px solid red';
overlay.append(video);
video.srcObject = stream;
video.play();
}
Here is the jsfiddle providing complete demo: https://jsfiddle.net/pn8Lkut0/
To test the fiddle, open the fiddle on an android device that supports AR, the START AR button will be visible and click on it to start the xr mode. Once fully initiated, try clicking the capture video and play button.
