时间戳

首页 > 解决方案 > 带有 Angular 的 Youtube 截图

angular - 带有 Angular 的 Youtube 截图

问题描述

在我的应用程序中，我尝试实现 YouTube 视频截图。我习惯HTML canvas这样做。由于画布不适用于 iframe，我使用 API 将视频作为 .mp4 获取。我的 API 将我的 YouTube 视频作为具有此模式的 url 返回"https://yt.apilover.com/file/?hash=...."

我可以在我的应用程序中播放视频，但由于 CORS 政策，每当我尝试对其进行截图时，我都会遇到“受污染的画布”问题。

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 问题吗？

标签： angularcanvascorsinterceptor

解决方案

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

简而言之，您无法控制超出您能力范围的事情，因此您应该找到可以管理的解决方案。例如，为什么不在您的后端使用像 FFmpeg 这样的程序来截取屏幕截图，然后将其发送到您的前端而不会出现 CORS 问题？

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

推荐阅读