Events and Metadata

[chdenat]

Wow, what a game changer! I developed my own record/convert library using MediaStream and ffmpeg (wasm or remote), and it took me less than an hour to switch it to Mediabunny. The results are incredible—congrats to the team!

But (there's always a but, even in fairy tales):

• What about events during recording or converting? I didn’t find anything in the documentation, so I assume it’s not available yet. It would be great to display information in UIs, like live size or conversion progress.
• I also couldn’t find a way to add my own metadata, like title, description, or genre.

[Vanilagy]

Thanks! I'll relay the kind words to the team (me 😎).

But of course, there's always a but.

• I'm not quite sure what you mean by events. There's rarely a need for them! If you're talking about the Conversion API, there is a progress event: https://mediabunny.dev/guide/converting-media-files#monitoring-progress. The output file size you can simply track yourself by using a StreamTarget for the output, and keeping track of the max written byte offset. But now that you say it, this gives me an idea to add an onwrite event to make it easier. There's already onread for the reading side of things, so this makes sense. Thank you!

  If you have other events in mind, let me know. Most read operations don't need any events since everything is Promise-based.

• Regarding metadata, see Add descriptive metadata read/write support #74. It's a lot of work, but I'll slowly be chipping away at it.

[chdenat]

Thanks for your quick and kind answer.
For metadata, I'll wait the PR;)

My UC for recording event is to push an event to the UI to inform the user in live.

Heres a piece of my code. The main information is total bytes and duration.

Behind, I've also a max file size events, ie if the file size is larger than a max value, I stop the recording.
this.mediaRecorder.ondataavailable = (e) => { this.chunks.push(e.data) this.totalBytes += e.data.size this.dispatchEvent(new CustomEvent(VideoRecorder.events.INFO, { detail: { totalBytes: this.totalBytes, duration: this.duration, chunkSize: e.data.size, timestamp: Date.now(), }, })) }

[Vanilagy]

Yes, you can use StreamTarget to get the same "data push" events.

[Vanilagy]

There's now an onwrite callback on all Targets.

[chdenat]

Nice ! I'll will check it asap

[chdenat]

@Vanilagy

I do not know if it is the clever way to use it but there's a strange behavior.
I'm recording a canvas. My code
`
this.#output = new Output({
format: new Mp4OutputFormat(),
target: new BufferTarget(),
})

        this.#videoSource = new CanvasSource(this.outputCanvas, {
            codec: 'vp9',
            bitrate: this.quality.value,
            latencyMode: 'quality',
            keyFrameInterval: 5,
        })
        
        this.#output.addVideoTrack(this.#videoSource)

        this.#output.target.onwrite = (start, end) => {
            console.log(start, end)
        }

        await this.#output.start()}

`

During the recording I got only 3 lines

0 4
4 8
8 24

And during the finalisation, the logs show all the others console.log, expected before.

Is this a misuse or a bug ? Do we need to flush something ?

[Vanilagy]

Not a misuse. I don't know what the rest of your code is but if you're using Mp4OutputFormat with BufferTarget, it will internally buffer all media data and write it out only at the very end. It does this to create a file that is better seekable. If you don't want this, you can set fastStart to false. https://mediabunny.dev/api/IsobmffOutputFormatOptions#faststart

[chdenat]

I've put some throttling but got only
0 4 during the recording
then
24 28 during the finalisation

The code

         this.#output.target.onwrite = (start, end) => {
                const now = Date.now()
                if (now - this.#lastWriteLogTime >= this.timeslice) {
                    console.log(start, end)
                    this.#lastWriteLogTime = now
                }
            }

[chdenat]

Next step.
fastStart=false did the job. I can now display in live the size evolution.

Thanks.

[chdenat]

As mediabunny 1.14 allows to push metadata, I can close this discussion.