Javascript 如何避免SecurityError：操作不安全。在Firefox上使用.mozCaptureStream和MediaRecorder时？

给定代码

const video=document.querySelector（“视频”）；
常量src=”https://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm#t=0,10";
让录音机；
video.oncanplay=（）=>{
video.play（）；
const mediaStream=video.captureStream（）；
记录器=新的MediaRecorder（mediaStream）；
recorder.ondataavailable=事件=>
log（URL.createObjectURL（event.data））；
recorder.start（）；
}
video.onpause=（）=>recorder&&recorder.stop（）；
video.src=src；

您可以使用

XMLHttpRequest（）

或

fetch（）

获取媒体资源的

Blob

表示，使用

URL.createObjectURL（）从
Blob
创建
Blob URL



（异步（）=>{
const video=document.querySelector（“视频”）；
常量src=”https://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm#t=0,10";
const url=新的url（src）；
让录音机；
video.oncanplay=（）=>{
//注意，此处不输出音频
video.play（）；
const mediaStream=video.mozCaptureStream（）；
记录器=新的MediaRecorder（mediaStream）；
recorder.ondataavailable=事件=>
//音频在结果“Blob URL”处输出
log（URL.createObjectURL（event.data））；
recorder.start（）；
}
video.onpause=（）=>recorder&&recorder.stop（）；
const blob=await fetch（url）.then（response=>response.blob（））；
video.src=URL.createObjectURL（blob）+URL.hash；
})();
这听起来像是一个chrome bug！视频的
crossOrigin
应该设置为
“匿名”
，这样您的代码就不会抛出（请注意，FF确实如此，但至少它们太安全了）。还请注意，您不能期望
mozCaptureStream
与
captureStream
的工作方式相同，这就是为什么它仍然以/kaido为前缀，Chromium或Chrome不会引发任何错误。在继续研究使用
MediaRecorder
连接录制的解决方案的同时，编写了解决方案。如果
crossOrigin
属性也允许录制媒体播放而没有错误，您可以发布一个描述解决方案的答案吗？正如我链接到的FF bug中所说的，FF不允许MediaElement使用正确的CORS头，因此只要它不是固定的，它就不能作为解决方法。但我想说的是，这是chrome中的一个安全漏洞（我现在就告诉他们）。他们不应该让captureStream在没有CORS头的mediaElement上被调用。这与所有其他CORS安全措施（如webAudio或canvas API）背道而驰，因此您无论如何都应该在mediaElement上设置
跨源
属性。@Kaido不完全清楚跨源请求的确切情况。您是否也按照规格提交了一份申请表？你能分享你打算或已经提交的Chromium bug的链接吗？规范中有什么不清楚的？它清楚地说明了它“必须受到文档源的保护，不被文档源访问。”而且，怎么可能不是一个bug呢？不，我不能链接到这个bug，因为它是一个安全漏洞（除非你是谷歌开发人员？）