react-bootstrap中WebRTC双端通话视频组件显示异常求助

我之前也遇到过类似的跨设备WebRTC视频布局问题，核心原因其实是移动端竖屏视频的宽高比（比如9:16）和桌面端容器的宽高比不匹配，加上height: auto会让视频根据自身比例无限拉伸，最终超出视口。结合你的React Bootstrap布局，我给你几个具体的调整方案：

核心思路 #

不要在列容器上限制尺寸，而是直接给视频元素设置最大宽高约束，同时配合object-fit: contain保持视频比例，再通过Bootstrap的flex类让视频在容器内居中显示。

修改后的代码示例 #

<Container fluid className="p-0">
  <Row className="align-items-center min-vh-100">
    {/* 本地视频：移动端占满行，桌面占2列 */}
    <Col sm={12} lg={2} className="d-flex justify-content-center align-items-center p-2">
      <video
        style={{
          width: '80%',
          maxHeight: '20vh', // 限制本地视频最大高度，避免桌面端过高
          objectFit: 'contain'
        }}
        muted
        ref={userVideo}
        autoPlay
        playsInline
      />
    </Col>
    {/* 远端视频：移动端占满行，桌面占10列 */}
    <Col sm={12} lg={10} className="p-2 d-flex justify-content-center align-items-center">
      <video
        style={{
          maxWidth: '100%',   // 不超出列容器宽度
          maxHeight: '80vh',  // 关键：限制视频最大高度为视口的80%
          width: 'auto',
          height: 'auto',
          objectFit: 'contain'
        }}
        playsInline
        autoPlay
        ref={ref}
      />
    </Col>
  </Row>
</Container>

关键调整点说明 #

1. 容器与行的优化

   • 给Container加p-0去掉默认内边距，避免不必要的留白
   • Row用min-vh-100让布局至少占满视口高度，配合align-items-center让视频垂直居中，防止顶部/底部溢出

2. 本地视频的约束

   • 通过d-flex类让视频在列内水平+垂直居中，避免边角对齐的突兀感
   • maxHeight: '20vh'确保桌面端本地视频不会过高，同时移动端width:80%保证不会占满整个屏幕

3. 远端视频的核心修复

   • 直接在video元素上设置maxHeight: '80vh'，不管视频是竖屏还是横屏，高度都不会超过视口的80%
   • maxWidth: '100%'保证视频不会超出列容器的宽度，objectFit: contain始终保持视频原始比例，不会拉伸变形

进阶优化（可选） #

如果想让远端视频在桌面端尽可能填满容器但不溢出，可以添加aspect-ratio属性适配常见视频比例：

/* 比如适配16:9横屏，竖屏视频会自动留黑边 */
video {
  aspect-ratio: 16/9;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

你可以先测试上面的基础方案，基本能解决移动端视频在桌面端溢出的问题，再根据实际需求调整细节~

内容的提问来源于stack exchange，提问作者teamerMan