Is there a way to capture audio and video from an HTML video tag in Safari?

In chrome and firefox, we can user HTMLMediaElement.captureMediaStream() to capture a stream. But HTMLMediaElement.captureMediaStream() is not supported by Safari.

Source of the video tag is hls data received in segments.

Is there any other way capture media data as a MediaStream in Safari?

The direct captureMediaStream approach is not supported in Safari, at least at this time, as you saw, but one way you could do this is to use a browser ffmpeg based approach.

In the past running ffmpeg in the browser was not realistic for most tasks as it was simply too big and too slow, but recent WASM (web assembly) based ffmpeg implementations have made it more accessible.

You can build your own ffmpeg based solution leveraging a library like:

• https://github.com/ffmpegwasm/ffmpeg.wasm

You do need to be aware of the need for SharedArrayBuffer support:

> Only browsers with SharedArrayBuffer support can use ffmpeg.wasm, you can check HERE for the complete list.

The link referred to above is here: https://caniuse.com/sharedarraybuffer

I have found that it works well for many common ffmpeg tasks but it is sensitive to larger video files - I have not tried HLS to file conversion so you would need to experiment to see it meets your needs. There is a demo here which you may be able to test your use case on: https://ffmpegwasm.netlify.app/#demo

The ffmpeg command you want to use depends on the audio but it likely:

> ffmpeg -i in.m3u8 -acodec copy -bsf:a aac_adtstoasc -vcodec copy out.mp4

(see this question and answers for more info: https://stackoverflow.com/q/33108105/334402)

There are also some open source ready built solutions which you would look at - e.g:

• https://github.com/tuhinpal/hls-downloader?ref=reactjsexample.com