VideoFrame: rotation property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Note: This feature is available in Dedicated Web Workers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The rotation property of the VideoFrame interface returns the rotation of the video frame.
Value
An integer representing the rotation (0, 90, 180, or 270) in degrees clockwise. Defaults to 0. Arbitrary numbers (including negatives) are rounded to the next quarter turn.
Examples
Detecting when a camera video is rotated
Given a stream of video frames from a camera, obtained using a MediaStreamTrackProcessor, you can check the rotation property on the VideoFrame objects to see whether or not the frames are rotated.
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
const track = stream.getTracks()[0];
const trackProcessor = new MediaStreamTrackProcessor(track);
const reader = trackProcessor.readable.getReader();
while (true) {
const result = await reader.read();
if (result.done) break;
const frameFromCamera = result.value;
// Returns 0, 90, 180, or 270 indicating the frame's rotation
console.log(frameFromCamera.rotation);
}
Specifications
| Specification |
|---|
| WebCodecs # dom-videoframe-rotation |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
rotation
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.