MediaStream's isolation properties disallow access from MediaRecorder
Categories
(Core :: Audio/Video: Recording, defect)
Tracking
()
People
(Reporter: srpen6, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0
Steps to reproduce:
Using this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<video src="https://webrtc.github.io/samples/src/video/chrome.webm"></video>
<script>
const video = document.querySelector('video');
video.oncanplay = function() {
video.play();
let recorder = new MediaRecorder(video.mozCaptureStream());
recorder.start();
};
</script>
</body>
</html>
Actual results:
I get this result:
Uncaught DOMException: MediaRecorder.start: The MediaStream's isolation properties disallow access from MediaRecorder
|
||
Comment 1•3 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Audio/Video: Recording' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
Reporter | |
Comment 2•3 years ago
|
||
Looks like if the server sets "access-control-allow-origin", then you can add
the "crossorigin" attribute:
<video controls crossorigin
src="https://webrtc.github.io/samples/src/video/chrome.webm"></video>
but if that header is missing, it will fail:
https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm
I am not sure why CORS is coming into play here.
|
|
Reporter | |
Comment 3•3 years ago
|
||
Strange, this URL works with "crossorigin":
https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3
but that server does not send access-control-allow-origin.
|
|
Reporter | |
Comment 4•3 years ago
|
||
For the URLs that are strict, it looks like you can run the JavaScript, as long
as its from the same domain. For example, you can go to this page:
https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm
Then run this code in the Web Console:
const video = document.querySelector('video');
const a = document.createElement('a');
a.download = 'flower.webm';
a.textContent = 'download';
a.style.color = 'white';
document.body.append(a);
const data = [];
video.oncanplay = function() {
const recorder = new MediaRecorder(video.mozCaptureStream());
recorder.ondataavailable=e=>data.push(e.data);
recorder.onstop = ()=>{
a.href = URL.createObjectURL(new Blob(data));
};
video.onpause = function() {
recorder.stop();
};
recorder.start();
};
|
||
Comment 5•3 years ago
|
||
(In reply to Steven Penny from comment #3)
Strange, this URL works with "crossorigin":
https://dl.dropboxusercontent.com/s/8c9m92u1euqnkaz/GershwinWhiteman-RhapsodyInBluePart1.mp3
but that server does not send access-control-allow-origin.
It does for me.
Anways, this is expected. Anything that can be used to inspect the content of a media resource requires the media element to have crossorigin set, and a response with access-control-allow-origin set as well (to * or the domain, as usual). MediaRecorder can be used to inspect a media resource (by subsequently decoding and analyzing it), so it has this restriction.
It's the same painting cross origin images on a canvas, reading the canvas back becomes disabled, and piping a cross-origin media stream that contains an audio track to web audio, it becomes silence. Anything else would mean that the web page can inspect resources that are not same-origin.
Description
•