canvas 对video播放m3u8截图提示跨域
请问有人遇到过这个问题吗?使用videojs 播放 m3u8视频是用canvas进行截图。在ios上和pc的chrome浏览器都能正常运行。但是在安卓chrome浏览器提示:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
视频源设置了跨域。前端设置了crossOrigin=Anonymous
这是我的截图代码
var video = document.querySelector("#myVideo_html5_api");
video.setAttribute('crossOrigin', 'Anonymous')
var canvas = (window.canvas = document.createElement("canvas"));
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
var strDataURL = canvas.toDataURL("image/" + fileType); // canvas中video中取一帧图片并转成dataURL
var arr = strDataURL.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
var blob = new Blob([u8arr], {
type: mime,
});
return blob
需求是能够对当前播放的视频画面截图。
如果有人能够解答,或者提供思路。万分感谢。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
是否支持跨域也需要后端支持的 需要配置 Access-Control-Allow-Origin 如果资源在oss上那么就在oss上配置一下允许跨域的域名就好了
请问解决了嘛?我也遇到这个问题了。期待回复ing