demo · v138

Rotation matrix test

Pick one of the four stored rotations plus the boolean horizontal flip flag, and see (a) the raw frame, (b) the corrected frame using the new rotation + flip fields on VideoFrame, and (c) the 3×3 transform matrix the browser will apply on render.

Unflagged in Chrome 138. VideoFrame and VideoFrameInit grow rotation (0/90/180/270) and flip (boolean) fields. The compositor handles the transform on the GPU; you stop hand-rotating frames in WebGL.
probing VideoFrame.rotation…

raw frame (no orientation)

oriented frame (rotation + flip applied)

Resulting transform

codedWidth × codedHeight
320 × 240
displayWidth × displayHeight
240 × 320
rotation
90°
flip
false

If the API isn't available, this page draws the rotation manually with canvas transforms. The matrix readout matches what the engine would compose.

Why this matters

  1. Phone cameras shoot sensor-native — always landscape — and record an EXIF-style orientation tag in the container.
  2. Before v138, web video pipelines had to (a) read the tag from the container, (b) decode raw, (c) hand-rotate every frame in a shader, (d) hope nothing else in the pipeline lost the metadata.
  3. v138 attaches the tag to VideoFrame itself. The compositor rotates on present. WebGL and WebGPU consumers see correctly oriented frames automatically.
  4. The 3×3 matrix output is the actual display = matrix · coded transform. Useful for shader writers who need the inverse to map back to texture coordinates.

see also