Размер видео Twilio в Firefox

Question

Я пытаюсь заставить работать видео панель определенного размера, но изо всех сил пытаюсь заставить ее работать в браузерах, отличных от Chrome. Мой стек - Angular 5, Twilio Video (1.10.0 с использованием npm и twilio-video) и библиотека Twilio 1.13 (отсюда: //media.twiliocdn.com/taskrouter/js/v1.13/taskrouter.min.js)

У меня есть следующий код (который основан на проекте QuickStart: https://github.com/twilio/video-quickstart-js), который прекрасно работает в Chrome и дает мне окно шириной 195, но когда я запускаю тот же код в Firefox, я получаю окно видео размером 640x480. Любая помощь здесь будет высоко ценится!

import { connect, Room, Track } from 'twilio-video';

makeConnection(token: string, roomName: string): void {
  connect(token,
    {
      audio: true,
      name: roomName,
      video: { width: 195 }
    }
  ).then(room => {
    this.room = room;

    this.roomJoined(room);
  }, error => {
    this.error = error;
  });
}

roomJoined(room) {
  // Attach LocalParticipant's Tracks, if not already attached.
  let previewContainer = document.getElementById('local-media');
  if (!previewContainer.querySelector('video')) {
    console.log("Adding preview");
    this.attachParticipantTracks(room.localParticipant, previewContainer);
  }

  // Attach the Tracks of the Room's Participants.
  room.participants.forEach(participant => {
    console.log("Already in Room: '" + participant.identity + "'");
    let viewContainer = document.getElementById('remote-media');
    this.attachParticipantTracks(participant, viewContainer);
  });

  // When a Participant joins the Room, log the event.
  room.on('participantConnected', participant => {
    console.log("Joining: '" + participant.identity + "'");
  });

  // When a Participant adds a Track, attach it to the DOM.
  room.on('trackAdded', (track, participant) => {
    console.log(participant.identity + " added track: " + track.kind);
    let viewContainer = document.getElementById('remote-media');
    this.attachTracks([track], viewContainer);
  });

  // When a Participant removes a Track, detach it from the DOM.
  room.on('trackRemoved', (track, participant) => {
    console.log(participant.identity + " removed track: " + track.kind);
    this.detachTracks([track]);
  });

  // When a Participant leaves the Room, detach its Tracks.
  room.on('participantDisconnected', (participant) => {
    console.log("Participant '" + participant.identity + "' left the room");
    this.detachParticipantTracks(participant);
  });

  // Once the LocalParticipant leaves the room, detach the Tracks
  // of all Participants, including that of the LocalParticipant.
  room.on('disconnected', () => {
    console.log('Left');
    if (this.previewTracks) {
      this.previewTracks.forEach( (track) => {
        track.stop();
      });
    }
    room.participants.forEach(participant => this.detachParticipantTracks(participant));
  });
}

// Attach the Tracks to the DOM.
attachTracks(tracks, container) {
  tracks.forEach(track => {
    container.appendChild(track.attach());
  });
}

// Attach the Participant's Tracks to the DOM.
attachParticipantTracks(participant, container) {
  let tracks = Array.from(participant.tracks.values());
  this.attachTracks(tracks, container);
}

// Detach the Tracks from the DOM.
detachTracks(tracks) {
  tracks.forEach(track => {
    track.detach().forEach( (detachedElement) => {
      detachedElement.remove();
    });
  });
}

// Detach the Participant's Tracks from the DOM.
detachParticipantTracks(participant) {
  let tracks = Array.from(participant.tracks.values());
  this.detachTracks(tracks);
}

disconnectFromRoom(): void {
  console.log("Disconnecting");
  this.room.disconnect();
}

Answer 1

Вы можете добавить размер видео, как это

 function attachTracks(tracks, container) {

   tracks.forEach(function(track) {
    container.appendChild(track.attach());
   });

   $('#remote-media > video').css({'width': '100%'});
  $('#local-media > video').css({'width': '100%', 'margin-left': '0px'});
}

Answer 2

Разработчик Twilio здесь.

После небольшого тестирования я обнаружил, что Firefox не любит многие значения width как часть ограничений медиа.

Если вы переключите свое ограничение с

video: {
  width: 195
}

до

video: {
  width: {
    exact: 195
  }
}

Затем попытайтесь получить поток с камеры, он не будет отображен с сообщением «Ограничения могут быть не удовлетворены». В этом случае Firefox игнорировал 195 раньше, потому что это было предложение, при использовании exact он либо должен соответствовать, либо потерпеть неудачу, и это не удалось.

Моя рекомендация - предоставить диапазон ограничений для ширины, из которых браузеры могут выбрать лучший вариант. В вашем случае идеальная ширина равна 195, но если Firefox не собирается поддерживать это, мы должны предоставить ему диапазон допустимой ширины. Что-то вроде:

video: {
  width: {
    ideal: 195,
    min: 160,
    max: 320
  }
}

Затем я рекомендую изменить размер получившегося элемента <video> с помощью CSS, чтобы он соответствовал нужному размеру.

Подробнее о настройке ограничений и диапазонов носителей можно узнать из MDN .

Дайте мне знать, если это поможет.