Видео Twilio: рендеринг мобильного макета на рабочем столе

Я использую приложение Twilio Video React для своего видеоприложения. Twilio Video отображает видео в двух режимах просмотра, настольном и мобильном, в зависимости от устройства. Из-за нехватки места в моем настольном приложении я хотел бы визуализировать видео, подобное видео на мобильном устройстве, на рабочем столе. Возможно ли это? Есть ли переменная, которую я мог бы установить, чтобы я мог это сделать? По сути, я бы хотел, чтобы Twilio video думала, будто я запускаю приложение на мобильном телефоне.

Я попытался установить для isMobile значение true в утилитах (как показано ниже), похоже, это не влияет на пользовательский интерфейс.

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

Я бы хотел добиться следующего:

введите описание изображения здесь


twilio twilio-video
person SpaceX    schedule 26.08.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проповедник разработчиков Twilio здесь.

Я сам не работал над этим приложением, поэтому не знаком с его оформлением. Однако нет переменной для установки стиля на мобильных устройствах, она в основном контролируется точками останова медиа-запроса CSS.

Что вы заметите среди кода, так это то, что CSS встроен в JavaScript. Вы также найдете такие строки, как:

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

Эта точка останова определяет, как несколько стилей должны работать при небольшом размере экрана. Поэтому, если вы удалите точку останова и используете стили внутри точки останова в качестве стилей по умолчанию, приложение будет размещено в мобильной версии.

Как только вы это сделаете, вы можете поместить части видео приложения в div с шириной, которую вы определяете, и разместить вокруг него остальную часть вашего приложения.

Сообщите мне, если это поможет.

person philnash    schedule 26.08.2020