Get media stream frame as image

Here is my code…

import Permissions from 'react-native-permissions';
import {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  MediaStream,
  MediaStreamTrack,
  mediaDevices
} from 'react-native-webrtc';

Later… on componentDidMount()

    Permissions.request('camera').then((response) => {
      if (response === 'authorized') {
        mediaDevices.enumerateDevices().then((devices) => {
          let deviceId;
          for (let i = 0; i < devices.length; i++) {
            const device = devices[i];
            if (device.kind === 'videoinput' && device.facing === 'back') {
              deviceId = device.deviceId;
            }
          }
          if (deviceId) {
            mediaDevices
              .getUserMedia({
                audio: false,
                video: {
                  mandatory: {
                    minWidth: 768,
                    minHeight: 768,
                    minFrameRate: 3
                  },
                  facingMode: 'environment',
                  optional: deviceId ? [{ sourceId: deviceId }] : []
                }
              })
              .then((stream) => {
                this.setState({
                  stream
                });
                // how to access the stream frames as images?
              })
              .catch((error) => {
                console.error(error);
              });
          }
        });
      }
    });

Later… on render()

<RTCView streamURL={this.state.stream.toURL()} />

With this code I can successfully preview the camera stream on UI.

How can I get each frame (of the media stream) as image, either as file or JPG or PNG or blob or base64… or whatever works…

Thanks in advance for any suggestion.

Did you get a solution for this? even I’m trying to do face detection on live streaming but can’t able to get the frame :sleepy:
Please can you guys help on this :pray: