如何实现Tokbox本地与远程视频单屏并排布局（远程大/本地小）

完全可以实现这种布局！我帮你整理了具体的调整方案，分HTML结构、CSS样式和Tokbox配置三步来做：

1. 调整HTML结构 #

把原来分开的本地和远程视频容器放到同一个父容器里，这样我们就能统一控制它们的布局：

<!-- 新的统一视频容器 -->
<div class="video-container">
  <!-- 远程视频容器（原来的.remote） -->
  <div class="remote"></div>
  <!-- 本地视频容器（原来的.local） -->
  <div class="local"></div>
</div>

2. 配置CSS样式 #

这里提供两种常见的布局方案，你可以根据需求选择：

方案A：小本地窗口叠加在大远程视频上（视频聊天常用） #

这种布局是把远程视频占满整个容器，本地小窗口固定在角落（比如右上角），代码如下：

.video-container {
  position: relative;
  /* 可以根据需求设置容器尺寸，或者用百分比做响应式 */
  width: 800px;
  height: 600px;
  border: 1px solid #eee;
}

/* 远程视频容器：占满整个父容器 */
.remote {
  width: 100%;
  height: 100%;
}

/* 本地视频容器：小尺寸悬浮在远程视频上方 */
.local {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 180px;
  height: 135px; /* 保持4:3的视频比例，和远程匹配 */
  border: 2px solid #fff; /* 加白边区分两个视频 */
  z-index: 10; /* 确保本地窗口在远程视频之上 */
}

方案B：左右并排布局（远程大，本地小） #

如果想要两个视频左右排列，远程占大部分宽度，本地占小部分，可以用Flex布局：

.video-container {
  display: flex;
  width: 800px;
  height: 600px;
  gap: 10px; /* 两个视频之间的间距 */
}

.remote {
  flex: 7; /* 远程占70%宽度 */
  height: 100%;
}

.local {
  flex: 3; /* 本地占30%宽度 */
  height: 100%;
}

3. 调整Tokbox的视频尺寸配置 #

最后要让Tokbox的publisher和subscriber适配我们的容器，初始化时设置width和height为100%，并选择合适的fitMode来保持视频比例：

// 初始化本地publisher，适配.local容器
const publisher = OT.initPublisher('local', {
  width: '100%',
  height: '100%',
  fitMode: 'cover' // 可选：'cover'填满容器（裁剪多余），'contain'保持比例（可能有黑边）
});

// 订阅远程流时，适配.remote容器
session.subscribe(stream, 'remote', {
  width: '100%',
  height: '100%',
  fitMode: 'cover'
});

如果需要响应式布局，只要把.video-container的width改成100%，再加上aspect-ratio: 16/9;（根据你的视频比例调整），容器就会自动适配屏幕宽度啦！

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