如何检测何时不支持`canvas.captureStream()`？

Question

It is known that iOS Safari does not support canvas.captureStream() to (eg) pipe its content into a video element, see this demo not working in iOS Safari.

However, canvas.captureStream() is a valid function in iOS Safari, and correctly returns a CanvasCaptureMediaStreamTrack , it just doesn't function as intended. In order to detect browsers that don't support canvas.captureStream , it would have been easy to do a test typeof canvas.captureStream === 'function' , but at least for iOS Safari, we can't rely on that. Neither can we rely on the type of the returned value.

How do I write JavaScript that detects whether the current browser effectively supports canvas.captureStream() ?

Answer 1

No iOS to test it here, but according to the comments on the issue you linked to, captureStream() actually works, what doesn't is the HTMLVideoElement's reading of this MediaStream. So that's what you actually want to test.

According to the messages there, the video doesn't even fail to load the video (ie the metadata are correctly set and I don't expect events like error to fire, though if it does, then it's quite simple to test: check if a video is able to play such a MediaStream.

 function testReadingOfCanvasCapturedStream() { // first check the DOM API is available if( !testSupportOfCanvasCapureStream() ) { return Promise.resolve(false); } // create a test canvas const canvas = document.createElement("canvas"); // we need to init a context on the canvas const ctx = canvas.getContext("2d"); const stream = canvas.captureStream(); const vid = document.createElement("video"); vid.muted = true; vid.playsInline = true; vid.srcObject = stream; let supports = false; // Safari needs we draw on the canvas // asynchronously after we requested the MediaStream setTimeout(() => ctx.fillRect(0,0,5,5)); // if it failed, .play() would be enough // but according to the comments on the issue, it isn't return vid.play() .then(() => supports = true) .finally(() => { // clean stream.getTracks().forEach(track => track.stop()); return supports; }); } function testSupportOfCanvasCapureStream() { return "function" === typeof HTMLCanvasElement.prototype.captureStream; } testReadingOfCanvasCapturedStream() .then(supports => console.log(supports));

But if the video is able to play, but no images is painted, then we have to go a bit deeper and check what has been painted on the video. To do this, we'll draw some color on the canvas, wait for the video to have loaded and draw it back on the canvas before checking the color of the frame on the canvas:

 async function testReadingOfCanvasCapturedStream() { // first check the DOM API is available if( !testSupportOfCanvasCapureStream() ) { return false; } // create a test canvas const canvas = document.createElement("canvas"); // we need to init a context on the canvas const ctx = canvas.getContext("2d"); const stream = canvas.captureStream(); const clean = () => stream.getTracks().forEach(track => track.stop()); const vid = document.createElement("video"); vid.muted = true; vid.srcObject = stream; // Safari needs we draw on the canvas // asynchronously after we requested the MediaStream setTimeout(() => { // we draw in a well knwown color ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,300,150); }); try { await vid.play(); } catch(e) { // failed to load, no need to go deeper // it's not supported clean(); return false; } // here we should have our canvas painted on the video // let's keep this image on the video await vid.pause(); // now draw it back on the canvas ctx.clearRect(0,0,300,150); ctx.drawImage(vid,0,0); const pixel_data = ctx.getImageData(5,5,1,1).data; const red_channel = pixel_data[0]; clean(); return red_channel > 0; // it has red } function testSupportOfCanvasCapureStream() { return "function" === typeof HTMLCanvasElement.prototype.captureStream; } testReadingOfCanvasCapturedStream() .then(supports => console.log(supports));