canvas 对video播放m3u8截图提示跨域

发布于 2022-09-12 04:15:18 字数 1119 浏览 32 评论 0

请问有人遇到过这个问题吗?使用videojs 播放 m3u8视频是用canvas进行截图。在ios上和pc的chrome浏览器都能正常运行。但是在安卓chrome浏览器提示:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

视频源设置了跨域。前端设置了crossOrigin=Anonymous
image.png
这是我的截图代码

  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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

等往事风中吹 2022-09-19 04:15:18

是否支持跨域也需要后端支持的 需要配置 Access-Control-Allow-Origin 如果资源在oss上那么就在oss上配置一下允许跨域的域名就好了

谷夏 2022-09-19 04:15:18

请问解决了嘛?我也遇到这个问题了。期待回复ing

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文