demo · v136

VideoFrame orientation

Construct a real VideoFrame from a canvas with {rotation, flip} metadata. The painted result on the right rotates / mirrors automatically — without you re-encoding any pixels.

Probing…

source canvas (input)

painted from VideoFrame (rotation honoured)

frame.rotation—
frame.flip—
codedWidth × codedHeight—
displayWidth × displayHeight—

the code

// 136+: rotation and flip carried on the VideoFrame itself.
const frame = new VideoFrame(canvas, {
  timestamp: 0,
  rotation: 90,   // 0 | 90 | 180 | 270 — clockwise
  flip: true,     // horizontal mirror before rotate
});

// Renderers (canvas, <video>, MediaRecorder) honour these without
// asking you to bake them into the pixel buffer.
ctx.drawImage(frame, 0, 0);

see also