0

I am using Twilio Video React application, for my video application. Twilio video renders video in two views, desktop and mobile, based on the device. Due to space constraints on my desktop application I would like to render the video similar to that of a mobile on desktop, Is this possible? Is there a variable that I could set to allow me to do this ? Basically, I would like Twilio video to think that I am running the app on the mobile.

I tried to set isMobile to true in utils (as shown below), this doesn't seem to make a difference to the UI.

export const isMobile = (() => {
  if (
    typeof navigator === "undefined" ||
    typeof navigator.userAgent !== "string"
  ) {
    return true; 
  }
  return /Mobile/.test(navigator.userAgent);
})();

I would like to achieve the below:

enter image description here

SpaceX
  • 2,814
  • 2
  • 42
  • 68

1 Answers1

0

Twilio developer evangelist here.

I've not worked on this application myself, so I'm not familiar with how it is styled. There is not a variable for setting the style on mobile though, it is mostly controlled by CSS media query break points.

What you will notice among the code is that the CSS is embedded within the JavaScript. You will also find lines like:

[theme.breakpoints.down('xs')]: {
  // styles
}

That breakpoint defines how a number of the styles are supposed to work at the small screen size. So if you remove the breakpoint and use the styles inside the breakpoint as the default styles, then the application will lay out in the mobile version.

Once you've done that, you can then place the video parts of the application within a div with a width you define and place the rest of your application around it.

Let me know if that helps at all.

philnash
  • 70,667
  • 10
  • 60
  • 88