0

用于多方视频聊天的灵活布局容器

已有 87 阅读此文人 - - WebRTC -

作者:Adam Ullman(原文链接

翻译:刘通

原标题:A flexible layout container for multiparty video chat

 

每个人在建立一个多方视频聊天应用程序的时候,都会很快就遇到如何布置许多不同参与者的问题。你希望每个人都可以在他们的屏幕里看到其他人,而且还希望视频可以占据尽可能多的空间而不会浪费空白的界面。在网络中,会有很多不同的显示尺寸。参与者会使用手机或者平板电脑进行视频会话,甚至只是调整浏览器窗口大小,以便在视频聊天旁边看到其他内容。出于这个原因,你很需要一个布局算法来应对。

我们一直在使用我们为应用程序内部编写的布局容器。并且一直在更新迭代,增加了越来越多的功能和不同的方式来布置参与者。你可以在https://github.com/aullman/opentok-layout-js上找到布局容器,以及如何轻松将其放入任何OpenTok应用的说明。

固定长宽比

我们第一次尝试解决这个问题的方法是构建一个使所有参与者具有相同大小的布局容器。它只是假定每个参与者都是相同的长宽比,然后计算出最佳布局是什么。

container1

该算法查看第一个参与者的长宽比,在这种情况下是16:9,然后使每个其他参与者的画面比例也设置为这个值。之后使用暴力方法来确定最佳布局。它通过尝试行和列的不同组合来确定哪一个占据最多的空间。例如,如果有4个参与者,它将尝试1列和4行,2列和2行,3列和2行,或者4列和1行。然后它会弄清楚哪一种安排占用了容器最多的空间。这样无论容器的尺寸是多少,它都能正常的进行工作。

高的容器的话就是1列4行。

container2

宽的容器就是4列1行。

container3

大多数其他尺寸的是2列2行。

container4

你可以向下面那样,通过使用布局容器并将其传给fixedRatio:true来获得此布局:

container5

裁剪

你可能已经注意到,你仍然总是会在视频周围留下一些空白区域。我们可以通过剪裁视频来消除这些空白。在正常的面对面交流中,你不需要视频两边。所以如果我们把这些剪掉,就可以有更多的布局空间来放下我们参与者的面孔。

container6

尊重不同的长宽比

有时不是所有的参与者都有相同的长宽比。随着OpenTok现在在iOS上支持Safari,越来越多的参与者都通过移动设备加入。此外还有屏幕共享的情况,导致了会更多可能的长宽比。

有些时候如果你不想剪裁任何视频内容的话。例如,共享一个屏幕时,或者一个摄像头前面有多个参与者,并且你希望能看到所有参与者时。在这些情况下,你不会想裁减掉任何视频内容,因为你可能会因此丢掉一些很重要的信息。

为了解决这个问题,让我们修改我们的布局算法,以尊重多个不同的长宽比。

在这个例子中,你可以看到容器中显示了几种不同的长宽比,并且这些长宽比都被考虑了进去。为了使此算法可以工作,我们从一些照片布局算法来寻找灵感,比如说Flickr的对齐布局。但是因为它不能以相同的方式工作,所以我们不能直接用Flickr布局。它假定你将坤东浏览照片列表,所以它不会限制图片的高度。但是我们可以借用其中的一些概念。

再次说明,这只是现有布局算法的变体。它使用相同的算法来确定要使用的行数和列数。然后,在放置元素时,只要确保尊重其原始的长宽比旧可以了。然后(从Flickr借鉴),如果容器的整个高度没有占完,那么检查每一行的另一个视频,看它们是否可以被调整的更高以占据更多的高度。这意味着一些行现在可以比其他行更高,但是这也意味着我们要么占用整个高度,要么占据整个分配空间的高度。

整合到一起

我们将所有这些布局算法都放在了meet.tokbox.com中,使用不同的按钮可以在不同的布局之间切换。未来,可以自动检测什么时候重视长宽比以及什么时候不重视。我们通过检测视频中的面部来实现,如果一个视频中检测到有多张脸,那么就确保尊重其长宽比,这样就不会把部分参与者裁剪掉。

期待你一针见血的评论,Come on!

不用想啦,马上 "登录"  发表自已的想法.