Color difference between preview and render

[m1gu3l]

There's very noticeable difference in how Video and OffthreadVideo handles colors.

From a color, f.e. #00BDF2, let's create a JPEG, a PNG and a video.

ffmpeg -f lavfi -i color=c=#00BDF2:s=1920x1080:r=30 -vf "format=yuv420p, colorspace=iall=bt601-6-525:all=bt709:fast=1" -t 10 -c:v libx264 -profile:v main output.mp4

output.mp4

Having these assets, let's create Remotion video.

<Composition
  id="BlueVideo"
  width={640}
  height={480}
  fps={25}
  durationInFrames={120}
  component={() => (
    <AbsoluteFill>
      <Sequence from={0} durationInFrames={30}>
        <Img src="http://localhost:8080/assets/blue.jpg" />
        <div
          style={{
            position: 'absolute',
            backgroundColor: '#00BDF2',
            padding: 20,
          }}
        >
          JPEG
        </div>
      </Sequence>
      <Sequence from={30} durationInFrames={30}>
        <Img src="http://localhost:8080/assets/blue.png" />
        <div
          style={{
            position: 'absolute',
            backgroundColor: '#00BDF2',
            padding: 20,
          }}
        >
          PNG
        </div>
      </Sequence>
      <Sequence from={60} durationInFrames={30}>
        <Video src="http://localhost:8080/assets/output.mp4" />
        <div
          style={{
            position: 'absolute',
            backgroundColor: '#00BDF2',
            padding: 20,
          }}
        >
          VIDEO
        </div>
      </Sequence>
      <Sequence from={90} durationInFrames={30}>
        <OffthreadVideo src="http://localhost:8080/assets/output.mp4" />
        <div
          style={{
            position: 'absolute',
            backgroundColor: '#00BDF2',
            padding: 20,
          }}
        >
          OFFTHREAD VIDEO
        </div>
      </Sequence>
    </AbsoluteFill>
  )}
/>

While previewing in Remotion Studio everything looks fine; after rendering though OffthreadVideo produces invalid color.

BlueVideo.mp4

Tested on current Remotion (4.0.153) and FFmpeg 6.0-6ubuntu1

[JonnyBurger]

You can also render in bt709 in Remotion with a flag: https://www.remotion.dev/docs/cli/render#--color-space

We'll make this the default in Remotion 5.0!

[m1gu3l]

The final (broken) video was rendered in BT709

[JonnyBurger]

Alright, thanks for filing!

I will take a look.

[JonnyBurger]

Thanks!

I managed to improve the output:

New:

Old:

When adding a video, Remotion extracts the frames using Rust and returns images to the browser.
This input video is bt709, so when we extract frames, it is approximately sRGB format, but we returned .bmp.

We get better results when we return .png's instead which we can tag as sRGB.
Chrome interprets this better.

When doing a conversion, there is always a bit of color loss, but it is way less now.

[m1gu3l]

That's really close, looking good!

Thanks for quick fix 😀

[JonnyBurger]

Unfortunately this regressed and was the wrong way to go about it.
It only worked for this shade of blue.

This change will be reverted in 4.0.155.

I'm making another attempt which seems more promising.

[JonnyBurger]

Will try to fix this with #3857

[m1gu3l]

Is there a way I could support you?