Low Quality Local Stream once stream is connected

Hi, I am running into an issue where the quality of my local stream degrades once a connection is formed with a remote client.

Before connection I have a local MediaStream object from getUserMedia( ) which I use in the RTCView and the video quality looks crisp and clean. Once I get an answer and the connection is formed the stream quality degrades for about 20-30 seconds before returning to an acceptable quality. Is this intended behavior? I was under the impression that the device’s camera would be used to display the local stream however it seems like the local stream can be affected by network / low bandwidth.

I tried using react-native-vision-camera to have that as the local stream view and use RNWebRTC in the background to send the local stream. However the native modules using the camera step on each other and it looks like one library can use the camera at a time. Additionally I think you can use react-native-vision-camera’s frame processors to send the frames over a connected datachannel and decode them on the receiver’s end but it seems like a last resort.

Basically what I’m asking for is any input or guidance to get the local stream to have device’s native camera quality without any loss on quality/pixelation from poor network conditions.

The experience you’re getting is as expected, the local stream is a preview of what you are sending which means if for any reason the connection quality is bad then WebRTC will automatically adjust the quality bit by bit over time to try and compensate.

Make sure you are using a STUN and TURN server to improve connectivity and most of all, make sure you aren’t demanding too high of a resolution to be sent, otherwise things won’t work very nice.

1 Like