question about media capture and save to files

[Daolin Liu]

Hi,

I'm a rookie and study Chromium recently.

My requirement is very simple. I just want to capture the HTML <video> (and <audio>) and finally save to file (e.g. mp4) in my local machine. 

I read some docs but I don't know which way is correct for me. I made a test webserver, and use my Chromium to open, play a demo video. How to auto save this video to a file when the buffering progessbar is complete?

Many thanks,

Daolin

[mark a. foltz]

Hi Daolin,

The two APIs you want to use are the CaptureStream API and the MediaRecoder API.

CaptureStream lets you generate a stream of frames from a <video> or <audio> element.  MediaRecorder lets you encode those frames into a file you can download (Chrome supports the .webm format for this).

You can find sample code for these APIs here and here.  (The second one talks about recording from a camera, but it should work for other streams too.)

Of course, if your webapp has a <video> element playing media, then it likely has access to the original encoded media data it's feeding into the <video> element... so you could just create a video file on the fly from that data.

HTH,

m.

--
You received this message because you are subscribed to the Google Groups "media-capture-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to media-capture-...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/media-capture-dev/6b362d29.1d1f.181dbfe9901.Coremail.dorian_lau%40126.com.
For more options, visit https://groups.google.com/a/chromium.org/d/optout.

[Daolin Liu]

Hi Mark,

Thanks for your quick reply!

I spent some time to study Chromium source code, espically for <video> media handling. Currently I modiied multi_buffer_data_source and multi_buffer_reader files, and I can get the original video stream data and save to a local file successfully.

I still have two questions:

1. I cannot find where is below function called in multi_buffer_data_source.c, i.e. I don't know how the Read is triggered.

void MultiBufferDataSource::Read(int64_t position,

                                 int size,

                                 uint8_t* data,

                                 media::DataSource::ReadCB read_cb)

2. I have another useful requirement. In my test web, the "autoplay" attribute is null, which means I must click "play" button to play the video and save to a file in the meanwhile. After the video playback finished, the file is also saved completely (maybe 10s in advance). My requirement is that I don't need to "play" it, and the file will be also saved. This requirement will be reduce our CPU and memory if a lot of video in the website, and becasue we don't want to watch these video realtime, we just need to save them. 

I do appreciate for your help and any clue.

Thanks,

Daolin

[mark a. foltz]

On Fri, Jul 22, 2022 at 3:09 AM Daolin Liu <doria...@126.com> wrote:

Hi Mark,

Thanks for your quick reply!

I spent some time to study Chromium source code, espically for <video> media handling. Currently I modiied multi_buffer_data_source and multi_buffer_reader files, and I can get the original video stream data and save to a local file successfully.

I still have two questions:

1. I cannot find where is below function called in multi_buffer_data_source.c, i.e. I don't know how the Read is triggered.

void MultiBufferDataSource::Read(int64_t position,

                                 int size,

                                 uint8_t* data,

                                 media::DataSource::ReadCB read_cb)

That looks like it's part of the <video> implementation which I am less familiar with.

Chrome's codesearch tool has cross-references and allows you to find callers of a given function.  I would start with the codesearch result for that function and explore.  Other options are to add logging or set a debugger breakpoint. 

2. I have another useful requirement. In my test web, the "autoplay" attribute is null, which means I must click "play" button to play the video and save to a file in the meanwhile. After the video playback finished, the file is also saved completely (maybe 10s in advance). My requirement is that I don't need to "play" it, and the file will be also saved. This requirement will be reduce our CPU and memory if a lot of video in the website, and becasue we don't want to watch these video realtime, we just need to save them. 

You could try setting a higher playback rate on the <video> element and use CSS to set it as display:none, which will turn off rendering but should still cause media to be fetched.

 

I do appreciate for your help and any clue.

For additional questions about media playback in Chrome, medi...@chromium.org is a better list.  There is also a #media channel on the Chromium Slack.