我可以自定义参与者在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;
  }
}