是否可以从具有跨源数据的元素中捕获? [英] is it possible to capture from an element with cross origin data?
本文介绍了是否可以从具有跨源数据的元素中捕获?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在 webRTC 文档中找到了这个简单的脚本,我尝试运行它,但似乎我遗漏了一些东西
i have this simple script that i found in the webRTC doc i triet to run it but it seems i'm missing something
const leftVideo = document.getElementById('leftVideo');
const rightVideo = document.getElementById('rightVideo');
leftVideo.addEventListener('canplay', () => {
const stream = leftVideo.captureStream();
rightVideo.srcObject = stream;
});
我在检查流捕获时收到此错误未捕获的 DOMException:无法在HTMLMediaElement"上执行captureStream":无法从具有跨域数据的元素捕获在 HTMLVideoElement.leftVideo.addEventListener这是我的 index.html
i get this error on stream capture when i inspect it Uncaught DOMException: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data at HTMLVideoElement.leftVideo.addEventListener this my index.html
<video id="leftVideo" playsinline controls loop muted>
<source src="test1.webm" type="video/webm"/>
<p>This browser does not support the video element.</p>
</video>
<video id="rightVideo" playsinline autoplay></video>
推荐答案
- 您可以设置 crossOrigin,如此链接所示示例:
<video crossOrigin="anonymous" src="https://cdn.myapp.com:81/video.mp4"></video>
您要确保链接使用的是 https
you want to make sure link is using https
参考:https://stackoverflow.com/a/35245146/8689969
- 或者您可以使用 fetch 创建可读流,请在此链接上跟进文档:https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream 它为您提供应该有助于解决该问题的 blob url:示例:
- or you can create a readable stream using fetch, follow up doc on this link: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream which gives you blob url that should help resolving that issue: Example:
// Fetch the original image
fetch(video.filePath, {
mode: 'cors',
headers: {
'Access-Control-Allow-Origin':'*'
}
})
// Retrieve its body as ReadableStream
.then(response => {
const reader = response.body.getReader();
return new ReadableStream({
start(controller) {
return pump();
function pump() {
return reader.read().then(({ done, value }) => {
// When no more data needs to be consumed, close the stream
if (done) {
controller.close();
return;
}
// Enqueue the next data chunk into our target stream
controller.enqueue(value);
return pump();
});
}
}
})
})
.then(stream => new Response(stream))
.then(response => response.blob())
.then(blob => URL.createObjectURL(blob))
.then((url) => {
// gives the blob url which solves cors error in reading stream(using captureStream() func)
console.log(url);
// do your thing
})
.catch(err => console.error(err));
- 祝你好运...
这篇关于是否可以从具有跨源数据的元素中捕获?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文