demo · v136
Orientation Mixer
All eight EXIF-style orientations — rotation (0/90/180/270) crossed with flip (mirror on/off) — rendered live as VideoFrames. Pick a source orientation, watch each cell apply its own combination via the new constructor option, and copy the JSON shape the API actually accepts.
Note: this browser doesn't appear to expose
VideoFrame.rotation/flip on the constructor. Update to Chrome 136+. The fallback below paints the matrix by rotating each canvas manually, but the new metadata is what flows through the codec.
Loading source frame…
the matrix
Each cell is a new VideoFrame(canvas, { rotation, flip }) rendered back into a 2D context.
Compare the rendered output across orientations and you'll see the eight EXIF orientations covered.
const frame = new VideoFrame(canvas, {
timestamp: 0,
rotation: 90, // 0 | 90 | 180 | 270
flip: true, // mirrors horizontally before rotation
});
ctx.drawImage(frame, 0, 0); // honours rotation + flip
frame.close();