CODEWITHSUNDEEP
javascriptaudio-capture
AlpacaJones
AlpacaJones

Reputation: 134

JS Capturing audio from a video element (Not from webcam/mic etc) Getting CORS error since video src is external

I'm trying to write a script (for a browser extension with tampermonkey) which will use the video players functions to seek to a timestamp and then play the video while capturing the audio from that timestamp.

The video element source is external so when I attempt to set up a stream I get CORS errors eg:

let video = document.getElementById("video-player");
let stream = video.captureStream();

I tried a solution posted elsewhere about getting a readable stream from the video source https://stackoverflow.com/a/57088960/10326441. However I didn't understand how to obtain the capture stream from this, and it still led to the first error shown below. Example errors:

Access to fetch at 'https://***.googleusercontent.com/***' from origin 'https://******.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
Uncaught DOMException: Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data

My Question is: is there an easy way I can obtain an audio stream from the video-player? When I click my button it correctly seeks and plays the video, I'm just struggling with obtaining an audio stream from it so I can then convert that to a blob which I can download to disk.

Upvotes: -1

Views: 356

Answers (1)

Kaiido
Kaiido

Reputation: 137131

You simply can't.

To be able to save on disk a modified version of this resource, you'd need to manipulate that resource.
To be able to manipulate that resource, you'd need to read its content.
To be able to read external resources' content, you need to satisfy the Same-Origin Policy.

If you can't fetch the resource as same-origin or through CORS, then you can't read it, and thus can't manipulate and thus can't save on disk a modified version of it.

If it was only for displaying, then you could simply use an <audio> element, but that wouldn't enable anything like saving only the audio stream from your video, not even from browsers built-ins "save-as" context menu.

Upvotes: 1

Related Questions