Chime SDK视频无响应

问题描述

我已经构建了一个与Chime SDK和一些REST API接口的react.js客户端应用程序。它创建一个会议,一个与会者,连接本地硬件并启动音频和视频。

我的问题是视频是固定大小的。

它位于React Bootsrap响应式布局内,如下所示:

<Container fluid style={containerStyle}>
    <Row>
        <Col sm="10">
            <audio id="my-audio-element"></audio>
            <video id="my-video-element"></video>
        </Col>
        <Col sm="2">
            ...
        </Col>
    </Row>
</Container>

SDK文档建议<audio id="my-audio-element"></audio><video id="my-video-element"></video>元素。父级<Col sm="10">响应迅速。

无论我在页面上做什么,Chime视频都保持固定大小?

更新

设置class="h-100 w-100"可以调整视频的大小,但是它仍然具有固定的宽高比吗?

解决方法

我在SDK演示/浏览器应用程序中找到了答案:

.video-tile-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}