Question

我正在尝试使特定尺寸的视频面板正常工作，但是正在努力使其无法在Chrome之外的其他浏览器中正常工作。我的堆栈是Angular 5，Twilio Video（使用npm和twilio-video使用1.10.0）和Twilio库1.13（来自此处：//media.twiliocdn.com/taskrouter/js/v1.13/taskrouter.min.js）< / p>

我有以下代码（基于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

这里是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 2

您可以像这样添加视频尺寸

 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 3

万一任何人都应该遇到相同的行为：我一直遇到问题，Firefox忽略了特定摄像机（准确地说是Microsoft LifeCam HD-3000）的aspectRatio设置，并且总是创建尽管宽高比设置为16：9，但仍为4：3图像。我的代码如下所示：

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

此功能在除Firefox之外的所有浏览器中均能正常工作。修复它的唯一方法是专门提供width属性：

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

Firefox中的Twilio视频大小调整

3 个答案: