Youtube 截图 Angular

Question

在我的应用程序中，我尝试实现 YouTube 视频屏幕截图。我使用 HTML canvas 来这样做。由于 canvas 不适用于 iframe，我使用 API 将视频作为 .mp4 格式。我的 API returns 我的 YouTube 视频 url 具有这种模式 "https://yt.apilover.com/file/?hash=...."

我可以在我的应用程序中播放视频，但由于 CORS 政策，每当我尝试对其进行屏幕截图时，我都会遇到 'tainted canvas' 问题。

takeScreenShot () {
    var canvas = <HTMLCanvasElement>document.getElementById("canvas");
    var ctx = canvas.getContext("2d"); 
    canvas.width = 480;
    canvas.height = 360;
    const vid = document.getElementById("trailer") as HTMLVideoElement
    ctx.drawImage(vid, 0, 0, canvas.width, canvas.height);
    this.imgSrc = canvas.toDataURL()
    return this.imgSrc
  }

我知道我可以用 proxy.conf.json 代理，但我也知道它在生产中没用。

我可以使用拦截器从 "https://yt.apilover.com/" 重定向到我的后端以便解决这个 CORS 问题吗？

Answer 1

Could I use an Interceptor to redirect from "https://yt.apilover.com/" to my backend so I fix this CORS issue?

简而言之，您无法控制您无法控制的事情，因此您应该找到一个您可以管理的解决方案。例如，为什么不在后端使用 FFmpeg 之类的程序截取屏幕截图，然后将其发送到前端而不存在 CORS 问题？

看看这个 question。它使用 youtube_dl 的组合从它的 id 中获取一个 youtube Url，然后使用 FFmpeg 获取屏幕截图。

Youtube 截图 Angular

Youtube screnshots with Angular

angular

canvas

cors

interceptor