Question

背景故事：

开始使用this template使用Electron和Angular创建Windows应用程序，但是将依赖关系更新为最新版本。

目标是将视频转换为图像。可以从任意URL加载视频，但是我希望至少可以在本地文件系统上使用它。

当前状态

这就是我试图从视频的当前状态提取图像的方式。画布已更新，当前图像绘制得很好。

captureFrame();
{
    const canvas = this.canvasRef.nativeElement as HTMLCanvasElement;
    const video = this.videoRef.nativeElement as HTMLVideoElement;

    canvas.setAttribute('crossOrigin', 'Anonymous');
    video.setAttribute('crossOrigin', 'Anonymous');

    const context = canvas.getContext('2d');

    const width = video.videoWidth;
    const height = video.videoHeight;

    context.drawImage(video, 0, 0, width, height);

    const imageData = context.getImageData(0, 0, width, height);

    console.log('image data retrieved:',
        imageData.data.length,
        imageData
    );
}

问题

这是我尝试执行时得到的：

ERROR DOMException: Failed to execute 'getImageData' on 
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

这很明显，因为视频不是从源路径加载的。

错误来自zone-mix.js:388。

问题和我到目前为止的情况

1）

我对自己使用的视频充满信心，那么如何将其关闭？据我了解，Electron在铬环境中运行。我记得能够使用Access-Control-Allow-Origin选项运行Chrome并以这种方式加载文件，这是否意味着错误是由Electron引起的？

电子以

开头

webPreferences: {
  webSecurity: false
},

我看不到其他选项。

2）

Angular已经需要DomSanitizer作为源，才能完全播放视频。我可以以某种方式将其应用到画布上吗？这是否表示该错误是由Angular引起的？

3）

将文件复制到受信任路径的解决方案是否可行？加载的视频的网址是使用window.URL.createObjectURL(file);创建的，这不应该为您提供安全的路由吗？

从任何来源将视频帧读入图像-CORS-电子/角度/ TS

0 个答案: