RTCEncodedVideoFrame: data property

Note: This feature is available in Dedicated Web Workers.

The data property of the RTCEncodedVideoFrame interface returns a buffer containing the frame data.

Value

Examples

This example WebRTC encoded transform shows how you might get the frame data in a TransformStream transform() function and negate all the bits.

The transform() function constructs a DataView on the buffer in the frame data property, and also creates a view on a new ArrayBuffer. It then writes the inverted bytes in the original data to the new buffer, assigns the buffer to the encoded frame data property, and enqueues the modified frame on the stream.

js
addEventListener("rtctransform", (event) => {
  const transform = new TransformStream({
    async transform(encodedFrame, controller) {
      // Reconstruct the original frame.
      const view = new DataView(encodedFrame.data);

      // Construct a new buffer
      const newData = new ArrayBuffer(encodedFrame.data.byteLength);
      const newView = new DataView(newData);

      // Negate all bits in the incoming frame
      for (let i = 0; i < encodedFrame.data.byteLength; ++i) {
        newView.setInt8(i, ~view.getInt8(i));
      }

      encodedFrame.data = newData;
      controller.enqueue(encodedFrame);
    },
  });
  event.transformer.readable
    .pipeThrough(transform)
    .pipeTo(event.transformer.writable);
});

Note that the surrounding code shown here is described in Using WebRTC Encoded Transforms.

Specifications

Specification
WebRTC Encoded Transform
# dom-rtcencodedvideoframe-data

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
data

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also