Twilio视频：如何在桌面上呈现移动布局

问题描述

我正在将Twilio Video React应用程序用于我的视频应用程序。 Twilio视频基于设备在桌面和移动两种视图中呈现视频。由于桌面应用程序的空间限制，我想渲染类似于台式机上的视频，这可能吗？是否可以设置一个变量以允许我执行此操作？基本上，我希望Twilio视频能够认为我正在移动设备上运行该应用程序。

我试图在utils中将isMobile设置为true（如下所示），这似乎对UI没有影响。

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

我想实现以下目标：

解决方法

这里是Twilio开发人员的传播者。

我自己尚未开发此应用程序，因此我不熟悉其样式。虽然没有设置移动样式的变量，但是它主要由CSS媒体查询断点控制。

您将在代码中注意到的是CSS嵌入在JavaScript中。您还会发现以下行：

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

该断点定义了在小屏幕尺寸下应该如何使用多种样式。因此，如果删除断点并将断点内的样式用作默认样式，则该应用程序将在移动版本中进行布局。

完成此操作后，您可以将应用程序的视频部分放置在您定义的宽度内的div中，并将应用程序的其余部分围绕它放置。

让我知道是否有帮助。

twilio twilio-video