时间戳

首页 > 解决方案 > 自定义布局的 Tokbox 组视频存档

tokbox - 自定义布局的 Tokbox 组视频存档

问题描述

我正在尝试为群组视频广播配置存档，但我无法正确设置。组合文件的归档及其启动/停止工作正常，custom布局type和stylesheet正在正确考虑，但我没有得到我想要的结果。

我的样式表目前看起来像这样

stream {
  float: left;
  position: absolute;
}

stream:first-child:nth-last-child(1) {
  width: 100%;
  height: 100%;
}

stream:first-child:nth-last-child(2) {
  width: 100%;
  height: 50%;
}

stream:first-child:nth-last-child(2)+stream {
  width: 100%;
  height: 50%;
  top: 50%;
}

stream:first-child:nth-last-child(3) {
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;
}

stream:first-child:nth-last-child(3)+stream {
  width: 50%;
  height: 50%;
  top: 50%;
}

stream:first-child:nth-last-child(3)+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
}

stream:first-child:nth-last-child(4) {
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
}

stream:first-child:nth-last-child(4)+stream {
  width: 50%;
  height: 50%;
  top: 0;
  left: 50%;
}

stream:first-child:nth-last-child(4)+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 0;
}

stream:first-child:nth-last-child(4)+stream+stream+stream {
  width: 50%;
  height: 50%;
  top: 50%;
  left: 50%;
}

stream:first-child:nth-last-child(5) {
  width: 50%;
  height: 33.3%;
  top: 0;
  left: 25%;
  object-fit: cover;
}

stream:first-child:nth-last-child(5)+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  left: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  right: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  left: 55px;
}

stream:first-child:nth-last-child(5)+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  right: 55px;
}

stream:first-child:nth-last-child(6) {
  width: 50%;
  height: 33.3%;
  top: 0;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream {
  width: 50%;
  height: 33.3%;
  top: 0;
  right: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 33%;
  right: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  left: 55px;
}

stream:first-child:nth-last-child(6)+stream+stream+stream+stream+stream {
  width: 50%;
  height: 33.3%;
  top: 66%;
  right: 55px;
}

例如，

当有 5 个流时，我希望得到这样的结果：https ://tokbox.com/blog/wp-content/uploads/2017/07/multiparty2.png

当有 6 个流时像这样： https ://tokbox.com/blog/wp-content/uploads/2017/07/multiparty1-1.png

广播将在手机中播放，因此布局将完全一样。

我可以达到这些图像中的结果吗？

谢谢

标签： tokbox

解决方案

目前，输出画布可以是 640x480 或 1280x720，两者都是横向纵横比。从您的示例所需图像中，您似乎想要纵向纵横比。

您可以做的一个技巧是定义一个仅在具有纵向纵横比的区域中在输出画布内绘制的 css，因此最终视频的两侧将有黑色条纹，相关内容将位于该区域的中心纵向纵横比区域。请注意，视频的纵横比仍然是横向的。因此，当面向纵向的设备播放该广播流时，播放器可以放大以仅关注相关内容而忽略视频的黑条

推荐阅读