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

xudb
  • 3
新手上路,请多包涵

请问有人遇到过这个问题吗?使用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

需求是能够对当前播放的视频画面截图。
如果有人能够解答,或者提供思路。万分感谢。

回复
阅读 1.1k
2 个回答

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

cs_coder
  • 2
新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏