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 开发者宣传员。

经过一些自我测试后，我发现 Firefox 不喜欢 width 的许多值作为媒体约束的一部分。

如果你从

切换你的约束

video: {
  width: 195
}

到

video: {
  width: {
    exact: 195
  }
}

然后尝试获取相机流，它将失败并显示消息“约束可能不满足”。在这种情况下，Firefox 之前忽略了 195，因为它是一个建议，当使用 exact 时，它要么必须遵守，要么失败，并且失败了。

我的建议是为浏览器可以从中选择最佳选项的宽度提供一系列约束。在您的情况下，理想的宽度是 195，但如果 Firefox 不支持它，我们应该给它一个可接受的宽度范围。比如：

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

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

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

让我知道这是否有帮助。

Answer 3

以防万一有人遇到相同的行为：我一直遇到问题，Firefox 忽略了特定相机（确切地说是 Microsoft 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,
})