Why camera frame so slow

Help
1

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

2

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
Capture d’écran 2020-04-06 à 11.02.391472×1170 303 KB

3

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.

4

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

2 Likes
5

Good to hear :+1:
Thanks for the code sample, should help someone.

1 Like