@liveqing/liveplayer 视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理

背景

因为工作需要，所以研究了一下LivePlayer H5直播|点播播放器。使用起来很方便，但是也遇到一个不小的坑，搞的我欲仙欲死。

系统环境

windows10、vue2.6、@liveqing/liveplayer2.7.0

报错原因

视频截图中使用的视频来源跨域

报错截图

处理过程

遇到这个问题第一时间一定是百度啦，各种各样的答案，五花八门的方法总之最后都没有解决。但是对问题的解决还是有很大帮助的，在此列举一下网上的方法：
1、给video设置crossorigin=‘Anonymous’
2、在服务器设置Access-Control-Allow-Origin *
3、在视频的地址后面添加随机数

video.src =video.src+'?v='+Math.random()

4、使用setTimeout或者addEventListener包裹代码

最终结果

其实最多的答案就是第一条，也很接近真相。但是还有一条，由于我使用的@liveqing/liveplayer框架，它的html都被封装起来，所以一般都是在js代码块中去添加crossorigin

解决方案就是在mounted里面给video节点添加crossorigin属性

mounted(){//进行内部快照跨域截图let video0 = document.getElementsByClassName("vjs-tech")[0];video0.setAttribute('crossorigin', 'Anonymous')let video1 = document.getElementsByClassName("vjs-tech")[1];video1.setAttribute('crossorigin', 'Anonymous')let video2 = document.getElementsByClassName("vjs-tech")[2];video2.setAttribute('crossorigin', 'Anonymous')},

@liveqing/liveplayer 视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理相关推荐

视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理
2021-10-14 背景系统环境报错原因报错截图处理过程最终结果背景因为工作需要,所以研究了一下vue-video-player.使用起来很方便,但是也遇到一个不小的坑,搞的我欲仙欲死 ...
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported [已解决]...
原文链接: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported [已解 ...
头像裁剪和Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases m
此文是半原创. 头像裁剪的主要实现是同事找来发我的,用着还不错. 记一下,可以用作以后研究. 此文主要记录一个要点: 当用户上传已上传头像,裁剪头像弹窗获取到图片,当调用canvas的toDataUR ...
Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported.
Intro 我在使用qrcode.react测试使用文本生成二维码的功能. 当执行以下API时,报错: let domTarget = event.target; let text = domTarg ...
Fabric.js Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be exported
Fabric.js Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported ...
Failed to execute 'toDataURL' on 'HTMLCanvasElement,在canvas.toDataURL()执行时候报错解决方案...
添加跨域条件 crossorigin="anonymous" [Redirect at origin 'http://xxx.xx.com' has been blocked ...
Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may no
未捕获的DomeException:未能在"HTMLCanvaElement"上执行"toDataURL":可能无法导出受污染的画布.出现这个bug的原因可能有 ...
Uncaught SecurityError: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may
一旦您将未经 CORS 批准从其他来源加载的任何数据绘制到画布中,画布就会被污染.受污染的画布不再被认为是安全的,任何从画布取回图像数据的尝试都将导致抛出异常. 在受污染的画布上调用以下任何一个都会导 ...
html2canvas 报错：Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement : Tainted canvases may not be ...
其实解决这个报错很简单,直接看下图: 把图中allowTaint改成false就好了哦!