在Firefox中调整Twilio视频大小

Question

我正在尝试让一个特定大小的视频面板工作，但我正在努力让它在浏览器中工作，而不是Chrome。我的堆栈是Angular 5、Twilio Video (1.10.0使用npm I 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开发者的布道者在这里。

在对自己进行了一些测试之后，我发现火狐不喜欢将width的许多值作为媒体限制的一部分。

如果您将约束从

video: {
  width: 195
}

至

video: {
  width: {
    exact: 195
  }
}

然后尝试获取摄像头流，它将失败，并显示消息“约束可能未得到满足”。在这种情况下，火狐之前忽略了195，因为这是一个建议，当使用exact时，它要么必须遵守，要么失败，结果失败了。

我的建议是为浏览器可以从中选择最佳选项的宽度提供一系列限制。在你的例子中，理想的宽度是195，但是如果Firefox不支持这个宽度，我们应该给它一个可接受的宽度范围。类似于：

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

然后，我建议您使用CSS调整生成的<video>元素的大小，使其也适合您想要的大小。

你可以阅读更多关于setting media constraints and ranges on MDN的内容。

如果有任何帮助，请告诉我。

Answer 3

为了防止任何人遇到相同的行为:我一直有问题，火狐忽略了特定摄像头(准确地说，是微软LifeCam HD-3000 )的aspectRatio设置，总是创建4:3的图像，尽管宽高比设置为16:9。我的代码看起来像这样：

createLocalVideoTrack({
  height: 720,
  aspectRatio: 16/9,
  deviceId,
})

这在所有浏览器上都运行得很好，除了Firefox。解决这个问题的唯一方法就是专门提供width属性：

createLocalVideoTrack({
  height: 720,
  width: 720 * (16/9)
  aspectRatio: 16/9,
  deviceId,
})