Video Quality isnt great despite using 1080p camera. about twilio-video-app-react HOT 13 CLOSED

Thanks for the issue @Nicholashuber!

It doesn't matter if you run npm start or if you create a production build - it won't have any effect on video quality.

Video quality can be affected by any number of issues, including network quality, available bandwidth, or server issues.

We can try to diagnose quality issues for you. The next time you are seeing problems, grab the Room SID from the browser console (when you are connected to a Room, you can look at the window.twilioRoom.sid variable) and share it with us. We'll be able to check out the Room logs for clues.

from twilio-video-app-react.

I seem to have the same problem with video quality. I just looks very grainy.
Happens both when testing on my laptop and phone.

Example sid: RMd5a78189d26692d96c46cc01a5844490 (I have several more logged)

from twilio-video-app-react.

Hi @Nicholashuber , @andresdsep ,

Thanks for writing in with your issue. Please have a look at our Guide for Developing High Quality Video Applications, which has recommendations for the most common use-cases. Please let me know if this is useful.

Since mobile devices are involved, I was wondering if there is some packet loss resulting in the degraded video, so it would be great if I can get some Room SIDs to debug?

@andresdsep ,

I was not able to get the logs for the Room SID you have shared. Can you share some more?

Thanks,

Manjesh Malavalli
JSDK Team

from twilio-video-app-react.

@aaalaniz I'm not sure why this support ticket was transfered to Twilio-video.js the issue is specific to twilio/twilio-video-app-react ..... I figured out the issue but it was directly related to the video resolution hardcoded by the app at twilio/twilio-video-app-react

from twilio-video-app-react.

Hi @Nicholashuber , @aaalaniz ,

This looks like an issue with setting the correct ConnectOptions for mobile and desktop browsers as specified in the Guide for Developing High Quality Video Applications. So, I'll transfer this back to the react app.

Thanks,

Manjesh Malavalli
JSDK Team

from twilio-video-app-react.

@Nicholashuber hey, do you mind sharing what your fix for this was?

from twilio-video-app-react.

@andresdsep Hey there, I edited the index.tsx with
`const connectionOptions: ConnectOptions = {
video: { height: 720, frameRate: 24, width: 1280 },
bandwidthProfile: {
video: {
mode: 'collaboration',
renderDimensions: {

high: {height:1080, width:1980},
standard: {height:720, width:1280},
low: {height:176, width:144}
},`

from twilio-video-app-react.

@Nicholashuber thanks for that! I'll give it a try when I'm back at work

from twilio-video-app-react.

hey @Nicholashuber @andresdsep

Apologies for the confusion about the issue transfer. Typically, quality issues are investigated by our platform team. I'm glad @manjeshbhargav was able to help.

Thanks everyone!

from twilio-video-app-react.

The new connectionOptions seem to have improved this slightly, but still seems to be lacking quality. Some Twilio attention on this may be required

from twilio-video-app-react.

Hey @andresdsep. I took a look at your room sid. I noticed that you are using P2P rooms. Any reason that you are using P2P rooms instead of group rooms?

This application works best with group rooms, so we recommend that you try group rooms if you can. Be sure to pick the closest Media Region in the Twilio console: https://www.twilio.com/docs/video/tutorials/video-regions-and-global-low-latency#selecting-the-media-region

If you still want to use P2P rooms, try the following connection options:

const connectionOptions: ConnectOptions = {
  video: { height: 1080, frameRate: 24, width: 1920 },
  maxAudioBitrate: 12000,
};

P2P rooms don't support dominant speaker detection or bandwidth profiles, so those options can be removed. Let me know if this helps.

from twilio-video-app-react.

Closing due to inactivity.

from twilio-video-app-react.

@timmydoza I updated my connectionOptions and the quality does seem to have improved, thanks!

from twilio-video-app-react.