Show game view recordings in their true colours in other players

A game view recording looked darker and its colours off in VLC, and each round of recording a recording made it worse. Chrome's encoder, fed RGB frames, wrote full-range H.264 and left the colour out of the stream. Only our Matroska head said "full range", and VLC reads only the stream. Chrome itself plays the converted MP4, which was right. - The GPU now turns the game view into I420, limited range BT.709, before it is read back (PictureReader). The encoder gets the planes with that colour, as it does for a recording of the whole editor. - Where the planes lie in the read-back picture is a plain function, i420Layout in recording.ts. - Only 1.5 instead of 4 bytes a pixel come back from the GPU. - avcColour.ts writes the colour into the SPS of the encoder's avcC as well, so a player that reads only the stream knows it. An SPS with a VUI only gets its colour block replaced. One without gets a VUI that holds the colour. An SPS it cannot read stays as the encoder made it. - A first try sent the frames through a 2D canvas. That gave limited range too, but only 18 to 20 of 33 frames at 1080p30. Found on the way: - With the colour in the stream alone, VLC 3.0.8 still showed the full-range picture too dark. It ignores the range. - The one old full-range original on the server got the same SPS fix without loss: the clusters are byte-equal, the decoded frames are equal (framemd5), backup in /root/config-backup-20261013/videos/. - Older game view recordings stay full range. Fixing that in VLC would mean encoding them again. Tests: - tsc, eslint, Prettier clean. - Gate on melektaus-atx: CHECK EXIT 0, 308 files, 4772 tests. - avc-colour.test.ts new (9), expectations read back with ffmpeg trace_headers. Counter-check: the old bug in the no-VUI path turns it red. - e2e 67: ALL PASSED, 12 checks. 67d-ii reads tv/bt709 from the file and from the bare H.264 stream, red with the old code. - 1080p30 34 frames, 640x360@60 68 frames, none dropped (was 33/47). - Checked by the user: a new recording looks right in VLC 3.0.8. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-13 19:48:44 +02:00
1 parent 31ce6480b2
commit 30b618d9a9
@@ -0,0 +1,279 @@
+/**
+ * The colour of an H.264 stream, written where a player reads it: in the `video_signal_type` of its
+ * sequence parameter set (SPS). Chrome's encoder leaves that out for some inputs – a frame of RGBX
+ * bytes comes out in the full range, and the SPS says nothing – and a player that reads only the
+ * stream (VLC 3.0.8) takes the broadcast range then: the picture comes out darker, its colours off.
+ * The Matroska `Colour` says it too, but not every player reads it.
+ *
+ * Only the SPS changes; the frames stay as they were. With `avc: {format: 'avc'}` the SPS is in the
+ * encoder's `description` (the `avcC`) alone, so that is all there is to rewrite.
+ */
+import type { MatroskaColour } from './matroska';
+
+/** What `video_format` says when the SPS had none: "unspecified". */
+const UNSPECIFIED_FORMAT = 5;
+const SPS_TYPE = 7;
+/** The profiles whose SPS carries the chroma format, bit depths and scaling lists (H.264 7.3.2.1.1). */
+const HIGH_PROFILES = new Set([100, 110, 122, 244, 44, 83, 86, 118, 128, 138, 139, 134, 135]);
+
+/**
+ * The `avcC` with the colour in each of its SPS; the rest – the PPS and what follows them – is kept
+ * byte for byte. Throws on an `avcC` or SPS it cannot read.
+ */
+export function avcConfigWithColour(config: Uint8Array, colour: MatroskaColour): Uint8Array {
+  if (config.length < 7 || config[0] !== 1) throw new Error('not an avcC');
+  const count = config[5]! & 0x1f;
+  const parts: Uint8Array[] = [config.subarray(0, 6)];
+  let at = 6;
+  for (let i = 0; i < count; i++) {
+    const length = (config[at]! << 8) | config[at + 1]!;
+    const nal = config.subarray(at + 2, at + 2 + length);
+    if (nal.length !== length) throw new Error('avcC ends inside an SPS');
+    const sps = spsWithColour(nal, colour);
+    parts.push(Uint8Array.of(sps.length >> 8, sps.length & 0xff), sps);
+    at += 2 + length;
+  }
+  parts.push(config.subarray(at));
+  return concat(parts);
+}
+
+/** The SPS of an `avcC`, as NAL units with their header byte. */
+export function avcConfigSps(config: Uint8Array): Uint8Array[] {
+  const out: Uint8Array[] = [];
+  let at = 6;
+  for (let i = 0; i < (config[5]! & 0x1f); i++) {
+    const length = (config[at]! << 8) | config[at + 1]!;
+    out.push(config.subarray(at + 2, at + 2 + length));
+    at += 2 + length;
+  }
+  return out;
+}
+
+/**
+ * One SPS (a NAL unit with its header byte) with this colour in its `video_signal_type`. A VUI it
+ * had keeps everything else; without one it gets one that says the colour and nothing more.
+ */
+export function spsWithColour(nal: Uint8Array, colour: MatroskaColour): Uint8Array {
+  if ((nal[0]! & 0x1f) !== SPS_TYPE) throw new Error('not an SPS');
+  const rbsp = unescape(nal.subarray(1));
+  const read = new BitReader(rbsp);
+  skipToVui(read);
+  const out = new BitWriter();
+  const hasVui = read.bit() === 1;
+  let videoFormat = UNSPECIFIED_FORMAT;
+  let rest: { from: number; to: number } | null = null;
+  if (hasVui) {
+    if (read.bit()) {
+      if (read.bits(8) === 255) read.bits(32);
+    }
+    if (read.bit()) read.bit();
+    const signalAt = read.at;
+    out.copy(rbsp, 0, signalAt);
+    if (read.bit()) {
+      videoFormat = read.bits(3);
+      read.bit();
+      if (read.bit()) read.bits(24);
+    }
+    rest = { from: read.at, to: stopBitOf(rbsp) };
+  } else {
+    out.copy(rbsp, 0, read.at - 1);
+    out.bit(1);
+    // No aspect ratio, no overscan.
+    out.bits(0, 2);
+  }
+  out.bit(1);
+  out.bits(videoFormat, 3);
+  out.bit(colour.fullRange ? 1 : 0);
+  out.bit(1);
+  out.bits(colour.primaries, 8);
+  out.bits(colour.transfer, 8);
+  out.bits(colour.matrix, 8);
+  if (rest) out.copy(rbsp, rest.from, rest.to);
+  // No chroma location, timing, HRD, picture structure or bitstream restriction.
+  else out.bits(0, 6);
+  out.bit(1);
+  return concat([nal.subarray(0, 1), escape(out.finish())]);
+}
+
+/** What the `video_signal_type` of an SPS says; null where it has none. */
+export function spsColour(nal: Uint8Array): MatroskaColour | null {
+  const read = new BitReader(unescape(nal.subarray(1)));
+  skipToVui(read);
+  if (!read.bit()) return null;
+  if (read.bit()) {
+    if (read.bits(8) === 255) read.bits(32);
+  }
+  if (read.bit()) read.bit();
+  if (!read.bit()) return null;
+  read.bits(3);
+  const fullRange = read.bit() === 1;
+  if (!read.bit()) return { matrix: 2, transfer: 2, primaries: 2, fullRange };
+  const primaries = read.bits(8);
+  const transfer = read.bits(8);
+  const matrix = read.bits(8);
+  return { matrix, transfer, primaries, fullRange };
+}
+
+/** Reads an SPS up to its `vui_parameters_present_flag`. */
+function skipToVui(read: BitReader): void {
+  const profile = read.bits(8);
+  read.bits(16);
+  read.ue();
+  if (HIGH_PROFILES.has(profile)) {
+    const chroma = read.ue();
+    if (chroma === 3) read.bit();
+    read.ue();
+    read.ue();
+    read.bit();
+    if (read.bit())
+      for (let i = 0; i < (chroma === 3 ? 12 : 8); i++)
+        if (read.bit()) skipScalingList(read, i < 6 ? 16 : 64);
+  }
+  read.ue();
+  const pocType = read.ue();
+  if (pocType === 0) read.ue();
+  else if (pocType === 1) {
+    read.bit();
+    read.se();
+    read.se();
+    const cycle = read.ue();
+    for (let i = 0; i < cycle; i++) read.se();
+  }
+  read.ue();
+  read.bit();
+  read.ue();
+  read.ue();
+  if (!read.bit()) read.bit();
+  read.bit();
+  if (read.bit()) for (let i = 0; i < 4; i++) read.ue();
+}
+
+function skipScalingList(read: BitReader, size: number): void {
+  let last = 8;
+  let next = 8;
+  for (let j = 0; j < size; j++) {
+    if (next !== 0) next = (last + read.se() + 256) % 256;
+    last = next === 0 ? last : next;
+  }
+}
+
+/** The bit the RBSP ends its data with, the last one set: what follows is padding. */
+function stopBitOf(rbsp: Uint8Array): number {
+  for (let byte = rbsp.length - 1; byte >= 0; byte--) {
+    const value = rbsp[byte]!;
+    if (value === 0) continue;
+    let bit = 7;
+    while (!(value & (1 << (7 - bit)))) bit--;
+    return byte * 8 + bit;
+  }
+  throw new Error('SPS without its stop bit');
+}
+
+/** The RBSP of a NAL unit's payload: each `00 00 03` loses its 03. */
+function unescape(payload: Uint8Array): Uint8Array {
+  const out: number[] = [];
+  let zeros = 0;
+  for (const value of payload) {
+    if (zeros >= 2 && value === 3) {
+      zeros = 0;
+      continue;
+    }
+    out.push(value);
+    zeros = value === 0 ? zeros + 1 : 0;
+  }
+  return Uint8Array.from(out);
+}
+
+/** The payload of an RBSP: a 03 after two zeros wherever the next byte could be mistaken for a start. */
+function escape(rbsp: Uint8Array): Uint8Array {
+  const out: number[] = [];
+  let zeros = 0;
+  for (const value of rbsp) {
+    if (zeros >= 2 && value <= 3) {
+      out.push(3);
+      zeros = 0;
+    }
+    out.push(value);
+    zeros = value === 0 ? zeros + 1 : 0;
+  }
+  return Uint8Array.from(out);
+}
+
+class BitReader {
+  at = 0;
+  private readonly bytes: Uint8Array;
+
+  constructor(bytes: Uint8Array) {
+    this.bytes = bytes;
+  }
+
+  bit(): number {
+    const byte = this.bytes[this.at >> 3];
+    if (byte === undefined) throw new Error('SPS ends early');
+    const value = (byte >> (7 - (this.at & 7))) & 1;
+    this.at++;
+    return value;
+  }
+
+  bits(count: number): number {
+    let value = 0;
+    for (let i = 0; i < count; i++) value = value * 2 + this.bit();
+    return value;
+  }
+
+  /** Exp-Golomb, unsigned. */
+  ue(): number {
+    let zeros = 0;
+    while (this.bit() === 0) {
+      zeros++;
+      if (zeros > 31) throw new Error('SPS has a number out of range');
+    }
+    return 2 ** zeros - 1 + this.bits(zeros);
+  }
+
+  /** Exp-Golomb, signed. */
+  se(): number {
+    const code = this.ue();
+    return code % 2 ? (code + 1) / 2 : -code / 2;
+  }
+}
+
+class BitWriter {
+  private readonly out: number[] = [];
+  private current = 0;
+  private filled = 0;
+
+  bit(value: number): void {
+    this.current = (this.current << 1) | (value & 1);
+    if (++this.filled === 8) {
+      this.out.push(this.current);
+      this.current = 0;
+      this.filled = 0;
+    }
+  }
+
+  bits(value: number, count: number): void {
+    for (let i = count - 1; i >= 0; i--) this.bit(Math.floor(value / 2 ** i) % 2);
+  }
+
+  /** The bits `from` up to `to` of these bytes, as they are. */
+  copy(bytes: Uint8Array, from: number, to: number): void {
+    for (let at = from; at < to; at++) this.bit((bytes[at >> 3]! >> (7 - (at & 7))) & 1);
+  }
+
+  /** The bytes, the last one filled up with zeros (after the stop bit the caller wrote). */
+  finish(): Uint8Array {
+    if (this.filled > 0) this.bits(0, 8 - this.filled);
+    return Uint8Array.from(this.out);
+  }
+}
+
+function concat(parts: readonly Uint8Array[]): Uint8Array {
+  const out = new Uint8Array(parts.reduce((sum, part) => sum + part.length, 0));
+  let at = 0;
+  for (const part of parts) {
+    out.set(part, at);
+    at += part.length;
+  }
+  return out;
+}
@@ -104,6 +104,41 @@ function even(value: number): number {
  return Math.max(2, Math.round(value / 2) * 2);
 }

+/**
+ * Where the planes of an I420 frame of `w` × `h` (both even) lie in a picture read back from the
+ * GPU, 4 bytes a texel: the luma rows first, then Cb, then Cr. A row of luma is `stride` bytes, a
+ * multiple of 8, so a texel never holds bytes of two chroma rows; a texel row holds two chroma
+ * rows, so each chroma plane takes `chromaRows` texel rows, the last one half used when `h / 2` is
+ * odd. `layout` is the `VideoFrame`'s, `texels` the size of the picture to draw the planes into.
+ */
+export function i420Layout(
+  w: number,
+  h: number,
+): {
+  stride: number;
+  chromaRows: number;
+  texels: { w: number; h: number };
+  bytes: number;
+  layout: { offset: number; stride: number }[];
+} {
+  const stride = Math.ceil(w / 8) * 8;
+  const chromaRows = Math.ceil(h / 4);
+  const rows = h + 2 * chromaRows;
+  const cb = stride * h;
+  const cr = cb + stride * chromaRows;
+  return {
+    stride,
+    chromaRows,
+    texels: { w: stride / 4, h: rows },
+    bytes: stride * rows,
+    layout: [
+      { offset: 0, stride },
+      { offset: cb, stride: stride / 2 },
+      { offset: cr, stride: stride / 2 },
+    ],
+  };
+}
+
 /**
 * The size of an editor recording of a canvas in device pixels: all of it, an odd row or column
 * cut off, since the encoders want both sides even.