Streaming quality is not as good as `meet.livekit.io`

[b0iq]

Describe the bug

The streaming quality is weird I tried several methods but still receiving quality is not same meet.livekit.io

To Reproduce

Steps to reproduce the behavior:

Room configs:

const room = new Room({
  adaptiveStream: {
    pixelDensity: 'screen',
  },
  publishDefaults: {
    videoSimulcastLayers: [VideoPresets.h720, VideoPresets.h1080],
    simulcast: false,
  },
  // optimize publishing bandwidth and CPU for published tracks
  dynacast: false,
  videoCaptureDefaults: {
    facingMode: 'user',
    resolution: VideoPresets.h720, // Cannot set it more than that!! 1080 and above will not work
  },
});

// -------- SETTING THE QUALITY 
trackStreamStateChanged(
  publication: RemoteTrackPublication,
  streamState: Track.StreamState,
  participant: RemoteParticipant
) {
  publication.setVideoQuality(2);
},

// -------- RENDERING REMOTE VIDEO
const RemoteVideo = () => {
  const remote = useLiveStore((state) => state.remoteVideo);
  if (!remote || remote.isMuted) return <ZLoading backgroundColor="red" zIndex={1} />;
  return (
    <VideoView
      objectFit="contain"
      videoTrack={remote}
      mirror={false}
      style={{ flex: 1, backgroundColor: 'red' }}
    />
  );
};

room is connected to cloud server...

Expected behavior

There problem is I cannot check the video quality only the connection quality and it is excellent but it should be better than meet.livekit.io because it is native

Screenshots

web viewer	web publisher
app viewer	app publisher

. . . . .

Most of the time the quality is worst, However, this is as highest as I can get

. . . . .

Device Info:

Viewer: iPhone 11 [16.1.2] Host: iPhone 14 [16.4.1]

Dependencies Info (please reference your package-lock.json or yarn.lock file):

• @livekit/react-native: ^0.3.0
• livekit-client: ^1.7.1
• react-native-webrtc: ^111.0.0
• Server region is in germany and am located it Dubai

[davidzhao]

Discussed with reporter in Slack. The problem is both local and remote video appear lower resolution the RN app. b0iq will test with example app and report back.

[b0iq]

Hi again. I tried to reproduce with the example but not matter what I try it always failed to build. using old RN version cannot build on my machine. However, I create new vanilla RN project and try to do a minimal setup: https://github.com/b0iq/LKExample

The final result was not what I hoped for. it was same or worst.

Viewer (Web)	Publisher (Web)
Viewer (App)	Publisher (App)

[pankajmyt]

This is affecting us too. The video quality for web+mobile call, the mobile camera generated video is quite pixelated, grainy and lags quite a bit on latency in android.

[pankajmyt]

using 4/3 preset gives better quality, but improvements can be done.

[davidliu]

@pankajmyt does this repro with the example app?

What settings are you using with the Room object?

[pankajmyt]

const [room] = useState(() =>
      new Room({
        adaptiveStream: { pixelDensity: 'screen' },
        // publishDefaults: { simulcast: false },
        audioCaptureDefaults: {
          autoGainControl: true,
          echoCancellation: true,
          noiseSuppression: true,
        },
        videoCaptureDefaults: {
          facingMode: 'user',
          resolution: VideoPresets43.h540.resolution
        },
        publishDefaults: { 
          simulcast: false,
          videoSimulcastLayers: [VideoPresets43.h540, VideoPresets43.h720]
        },
        reconnectPolicy: {
          nextRetryDelayInMs: (context): number | null => {
            if (context.retryCount > 10) {
              return null
            }

            console.log(`retrying connection: retries: ${context.retryCount} sec: ${context.elapsedMs/1000} `)
            return 3000 //retry every 3 seconds
          }
        },
        disconnectOnPageLeave: true,
      }
  ));

[davidzhao]

If you are sending simulcast: false, videoSimulcastLayers would have no effect there. Simulcast will not be used.

[pankajmyt]

:) yes, I have kept it there to remind myself to enable it later.

In readme it says simulcast is not supported, however in react-native-webrtc readme it says simulcast is supported. https://github.com/react-native-webrtc/react-native-webrtc/blob/master/README.md

Simulcast - As of version 111.0.0 Simulcast is now easily possible due to the use of software encode/decode factories by default.

[davidzhao]

Simulcast is supported as of v1.0

[lukasIO]

also you're setting resolution: VideoPresets43.h540.resolution as capture defaults, this will obviously limit the quality of the acquired camera track.