w3c / webcodecs

WebCodecs is a flexible web API for encoding and decoding audio and video.
https://w3c.github.io/webcodecs/
Other
975 stars 137 forks source link

Color space mismatch issues #598

Closed Vanilagy closed 1 year ago

Vanilagy commented 1 year ago

I'm writing a video recorder using my own WebM muxer for my web-based game and am encountering color space mismatches (I'm using Chrome). I first try just normally creating my VideoFrame using new VideoFrame(canvas, { timestamp: 1000 * time }) and then feeding that into a VideoEncoder running vp09.00.10.08.

Here's how it should look: image

But it looks like: image

As you can see, the greens are darker. I've encountered this issue before when recording my screen using OBS, and the culprit was the color space being set to 601 instead of 709. So, 601-encoded video was being decoded as 709, causing these apparently "telltale" darker greens. But, looking at my VideoFrame, this can't be: image

Nothing 601-esque here it seems. Okay, then I thought I could manually set the color space and also write the same settings directly into the WebM files. I now create the VideoFrame like this:

let videoFrame = new VideoFrame(ctx.getImageData(0, 0, width, height).data, {
    format: 'RGBX',
    codedWidth: width,
    codedHeight: height,
    timestamp: 1000 * time,
    colorSpace: {
        matrix: 'bt709',
        transfer: 'bt709',
        primaries: 'bt709'
    }
});

(different color space from the automatic one). Then, in the WebM header directly, I specify the Colour part of my video track Video options with: image

Referring to this and this specification, this sets the matrix, transfer and primaries all to BT709 - exactly what I had specified in my VideoFrame. It now looks like this: image

Still, too dark. I verified the WebM color space changes by running my file through MKVToolNix: image

Also, it has to be noted that these WebM color space changes are only being respected by Chromium (playing the .webm inside Chromium), and VLC and Windows' Movies&TV seem to be unbothered by the changes I make to the metadata.

Soooooooooo... what exactly is going on? What can I do about it? Am I encoding it wrong? Am I decoding it wrong?

dalecurtis commented 1 year ago

Thanks for the nicely written GitHub issue. Ultimately this sounds like a Chromium bug, so I've pasted it here (sadly without such pretty markup).

Please star that issue for updates. Is this on Windows?

Vanilagy commented 1 year ago

Yes, I'm on Windows 10.0.19043 Build 19043 using Chrome 106.0.5249.119 (64-bit).