0

I am trying to capture the video Screenshot but it is not working on the Linkedln learning, when i add crossOrigin = "Anonymous" manually inside the video tag by inspecting then i am able to capture the screenshot, but when i write the code for the same purpose then it is not working, the error in the title is shown.

Code without adding the crossOrigin = "Anonymous" to the video tag.

    const title = "Screenshot";
    const player = document.getElementsByClassName("vjs-tech")[0];
    const canvas = document.createElement("canvas");
    canvas.width = player.videoWidth;
    canvas.height = player.videoHeight;
    canvas.getContext("2d").drawImage(player, 0, 0, canvas.width, canvas.height);
    
    const downloadElement = document.createElement("a");
    downloadElement.download = title;
  
    canvas.toBlob((blob) => {
        downloadElement.href = URL.createObjectURL(blob);
        downloadElement.click();
    }, "image/png");
Laro Dsouza
  • 43
  • 1
  • 5
  • The image must be served so that cross-orgin use is allowed and the image doesn't get tainted. With the attribute you tell the browser to accept cross-origin images. – Teemu Jan 06 '22 at 11:07
  • Does this answer your question? [Tainted canvases may not be exported](https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported) – Helder Sepulveda Jan 06 '22 at 21:05
  • I have tried that solution but it is not working. – Laro Dsouza Jan 07 '22 at 06:43

0 Answers0