How can we set color properties while muxing?

[harshsaini786]

Hello, I am using webcodecs and mp4box.js to create mp4 video files.

The issue I am facing is that there is a color difference in the video while playing in the browser versus vlc/ffplay. In vlc/ffplay it is showing true color while in the browser the color is a little dull.

I think the issue can be that the mp4 header does not contain colr properties and I also checked with ffprobe that the color properties are unknown.

If I update the color properties using ffmpeg it plays fine in the browser.

ffmpeg -y -i in.mp4 -color_primaries bt709 -color_trc iec61966-2-1 -colorspace rgb out.mp4

I tried to add colr properties in the mp4box file but it did not work.

file.moov.traks[0].mdia.minf.stbl.stsd.entries[0].add("colr")
  .set("colour_type","nclx")
  .set("colour_primaries",1)
  .set("transfer_characteristics",13)
  .set("matrix_coefficients",0)
  .set("full_range_flag",0)
  .set("data", new TextEncoder().encode('nclx\x00\x01\x00\r\x00\x00\x00'))

What should be the correct approach to add the colr properties using mp4box.js?

I am attaching a sample video.

https://user-images.githubusercontent.com/42185607/191789012-64491cbe-fbd7-4d49-9b05-eec38537a735.mp4

This is how it looks using ffplay,