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

Question

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

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

Answer 1

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