# Get media stream frame as image

**URL:** <https://react-native-webrtc.discourse.group/t/get-media-stream-frame-as-image/202>\
**Category:** Help\
**Created:** [July 25, 2019, 5:13pm UTC](https://react-native-webrtc.discourse.group/t/get-media-stream-frame-as-image/202 "2019-07-25T17:13:33Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alessandroraffa](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/alessandroraffa/32/72_2.png) [@alessandroraffa](https://react-native-webrtc.discourse.group/u/alessandroraffa)\
**Post date:** [July 25, 2019, 5:13pm UTC](https://react-native-webrtc.discourse.group/t/get-media-stream-frame-as-image/202/1 "2019-07-25T17:13:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jayaprakash](https://avatars.discourse-cdn.com/v4/letter/j/e8c25b/32.png) [@jayaprakash](https://react-native-webrtc.discourse.group/u/jayaprakash)\
**Post date:** [September 5, 2019, 3:00pm UTC](https://react-native-webrtc.discourse.group/t/get-media-stream-frame-as-image/202/2 "2019-09-05T15:00:28Z")

</div>

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 😪  
Please can you guys help on this 🙏

---

<div class="post-metadata">

**Author:** ![code-matt](https://avatars.discourse-cdn.com/v4/letter/c/49beb7/32.png) [@code-matt](https://react-native-webrtc.discourse.group/u/code-matt)\
**Post date:** [March 9, 2020, 8:41pm UTC](https://react-native-webrtc.discourse.group/t/get-media-stream-frame-as-image/202/3 "2020-03-09T20:41:33Z")

</div>

Also in need of this, for similar face detection reasons 🙂 @jayaprakash did you find any way around ?

---

<div class="post-metadata">

**Author:** ![rameshjega](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/rameshjega/32/545_2.png) [@rameshjega](https://react-native-webrtc.discourse.group/u/rameshjega)\
**Post date:** [December 8, 2021, 8:44am UTC](https://react-native-webrtc.discourse.group/t/get-media-stream-frame-as-image/202/4 "2021-12-08T08:44:41Z")

</div>

Did you get a solution for this? even I’m trying to get single frame on live streaming but can’t able to get the frame 🙄  
Please can you guys help on this