[Fixed] Youtube screnshots with Angular

Issue

In my app I try to implement a YouTube videos screenshots.
I use HTML canvas to do so. Since canvas won’t work with iframe, I use an API to get the video as .mp4. My API returns my YouTube video as an url with this pattern "https://yt.apilover.com/file/?hash=...."

I can playback the videos in my app but I have an issue with ‘tainted canvas’ because of CORS policy whenever I try to take a screenshot of it.

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
  }

I know I could proxy with a proxy.conf.json but I also know that it’s useless in Production.

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

Solution

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

In brief you can’t control things that are out of your reach, so you should instead find a solution you can manage. For exemple why not using a program like FFmpeg in your backend to take a screenshot and then send it to your frontend with no CORS issues?

Check out this question. It uses a combination of youtube_dl to get a youtube Url from it’s id and then get the screenshot with FFmpeg.