# Why camera frame so slow

**URL:** <https://react-native-webrtc.discourse.group/t/why-camera-frame-so-slow/566>\
**Category:** Help\
**Created:** [April 5, 2020, 3:23pm UTC](https://react-native-webrtc.discourse.group/t/why-camera-frame-so-slow/566 "2020-04-05T15:23:20Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pondia](https://avatars.discourse-cdn.com/v4/letter/p/c5a1d2/32.png) [@Pondia](https://react-native-webrtc.discourse.group/u/Pondia)\
**Post date:** [April 5, 2020, 3:23pm UTC](https://react-native-webrtc.discourse.group/t/why-camera-frame-so-slow/566/1 "2020-04-05T15:23:20Z")

</div>

I’m using react native webrtc on Ios for testing.

So far I have been able to use the front camera and display the render on my screen. BUT I don’t understand why the video is so slow. It’s take probably around 0.5s to render the right image. The video is late and lost some images.

Someone can help me to understand?

Here is the code:

```
  const [isFront, setIsFront] = useState(false);
  const [videoSourceId, setVideoSourceId] = useState(0);
  const [stream, setStream] = useState(null);

  const mediaStreamConstraints = {
    audio: true,
    video: {
      facingMode: (!isFront ? 'user' : 'environment'),
      optional: (videoSourceId ? [{ sourceId: videoSourceId }] : []),
      mandatory: {
        minFrameRate: 30,
      },
    },
  };

  mediaDevices.enumerateDevices(sources => {
    for (let i = 0; i < sources.length; i++) {
      const source = sources[i];
      if (source.kind === 'videoinput' && source.facing === (isFront ? 'front' : 'environment')) {
        setVideoSourceId(source.deviceId);
      }
    }
  });
 
  mediaDevices.getUserMedia(mediaStreamConstraints)
    .then(mediaStream => {
      console.log('mediaStream: ', mediaStream);
      setStream(mediaStream.toURL());
    })
    .catch(error => {
      console.log('getUserMedia error: ', error);
    });
 
return (
    <RTCView
      style={styles.view}
      mirror={!isFront ? true : false}
      streamURL={stream}
    />
  );

```

Thanks for helping me to understand

---

<div class="post-metadata">

**Author:** ![Pondia](https://avatars.discourse-cdn.com/v4/letter/p/c5a1d2/32.png) [@Pondia](https://react-native-webrtc.discourse.group/u/Pondia)\
**Post date:** [April 6, 2020, 9:04am UTC](https://react-native-webrtc.discourse.group/t/why-camera-frame-so-slow/566/2 "2020-04-06T09:04:23Z")

</div>

Here is the log I get. It gives me the impression that it restarts every time?

 ![Capture d’écran 2020-04-06 à 11.02.39](https://global.discourse-cdn.com/free1/uploads/reactnativewebrtc1/original/1X/e22e089aa7e01a25e65be316374d8b380456ddc6.png)

---

<div class="post-metadata">

**Author:** ![8BallBomBom](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/8ballbombom/32/710_2.png) [@8BallBomBom](https://react-native-webrtc.discourse.group/u/8BallBomBom)\
**Post date:** [April 7, 2020, 10:40am UTC](https://react-native-webrtc.discourse.group/t/why-camera-frame-so-slow/566/3 "2020-04-07T10:40:40Z")

</div>

You are using a functional component for the RTCView? but at the same time it seems to be calling the functions to get media devices and add the stream constantly as if it is running on the rendering function which would explain the issue.

Make sure the enumerateDevices + getUserMedia functions don’t run more than once.  
Only on demand as needed.

---

<div class="post-metadata">

**Author:** ![Pondia](https://avatars.discourse-cdn.com/v4/letter/p/c5a1d2/32.png) [@Pondia](https://react-native-webrtc.discourse.group/u/Pondia)\
**Post date:** [April 14, 2020, 12:19pm UTC](https://react-native-webrtc.discourse.group/t/why-camera-frame-so-slow/566/4 "2020-04-14T12:19:47Z")

</div>

hey!

I solved the problem. Here’s how I rewrote the code

```
const mediaStreamConstraints = {
  audio: true,
  video: {
    facingMode: (isFront ? 'user' : 'environment'),
    optional: (videoSourceId ? [{ sourceId: videoSourceId }] : []),
    mandatory: {
      minWidth: 1280,
      minHeight: 720,
      minFrameRate: 30,
    },
  },
};
const devices = await mediaDevices.enumerateDevices();

const facing = isFront ? 'front' : 'environment';
const videoSourceId = devices.find(device => device.kind === 'videoinput' && device.facing === facing);

const newStream = await mediaDevices.getUserMedia(mediaStreamConstraints);
setLocalStream(newStream);

```

thx you

---

<div class="post-metadata">

**Author:** ![8BallBomBom](https://yyz2.discourse-cdn.com/free1/user_avatar/react-native-webrtc.discourse.group/8ballbombom/32/710_2.png) [@8BallBomBom](https://react-native-webrtc.discourse.group/u/8BallBomBom)\
**Post date:** [April 14, 2020, 3:49pm UTC](https://react-native-webrtc.discourse.group/t/why-camera-frame-so-slow/566/5 "2020-04-14T15:49:21Z")

</div>

Good to hear 👍  
Thanks for the code sample, should help someone.