javascript - 我可以自定义 Twilio 可编程视频中参与者共享的接收视频的大小吗？

Question

我正在开发一个使用 twilio 可编程视频的视频聊天应用程序。我的应用程序中的聊天室仅包含两个参与者，一个使用 ReactJS 的 Web 前端和一个平板设备（IOS 设备）。当这两个参与者使用 Twilio 加入房间时，他们将相互共享视频轨道。当我从 IOS 设备接收到视频轨道时（该设备上的视频比率限制设置为 16:9）并且我想在我的 ReactJS 应用程序上调整平板电脑的视频比率（例如 3:4）。我怎么能得到那个？

我正在尝试使用一些 CSS 使视频元素变为全宽和全高。结果，视频元素相对于它们的父元素改变了 100% 的宽度和 100% 的高度，但实际的视频帧根本没有改变。

这是我的视频容器

<div className='col-md-6 px-0 video-with-guest-action-container'>
    <div id='remote-video' className=''>
        <canvas id="canvas" hidden></canvas>
    </div>
</div>

附加参与者轨道的代码：

// Attach the Tracks of the Room's Participants.
room.participants.forEach((participant) => {
    if (room.participants.size < 1) {
      this.attachParticipantTracks(participant, document.getElementById("remote-video"))
    }
});

我的CSS代码：

#remote-video{
  video {
    border: 1px solid #272727;
    height: 100%;
    width: 100% !important;
    background-color: #272726;
    background-repeat: no-repeat;
  }
}

标签： javascripthtmlcsstwilio