-1

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.

AlpacaJones
  • 114
  • 8
  • You should be able to put the video in an audio Element if it's an mp4, if you just want to hear audio and not see video. Why would you want to capture the stream? If you want that video on your Server, and you have rights to it, then you can just save it to your Server. I'm not sure about Node, but in PHP, it's like `` – StackSlave Mar 04 '20 at 03:33

1 Answers1

1

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.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • I see. So If I can't fetch through CORS is that due to the website's configuration? So there would be no way to get around this from the client-side. I should clarify this script is for a browser extension not to be used in my own website. – AlpacaJones Mar 04 '20 at 13:20