Gearcloud Labs 正在探索使用开放技术来构建新型的共享视频体验。派对巴士是一个演示应用程序，它将多个实时视频流与交互式图形和同步音频混合在一起。我们使用 node.js、WebSockets、WebRTC、WebGL 和 Web Audio 的组合构建了它。本文分享了我们在构建过程中的一些经验。

用户体验

首先，体验一下派对巴士应用程序，看看它能做什么。你需要 Firefox 或 Chrome 以及一个性能不错的 GPU，但如果没有，你可以观看 YouTube 上的示例视频 来了解这个应用程序。

由于该应用程序使用了 WebRTC getUserMedia()，你需要允许浏览器使用你的摄像头。启动后，你会注意到你的视频流被安装在 3D 巴士上的座位上（以及来自任何其他同时使用者的实时流）。在大多数场景中，你可以使用鼠标左键（改变摄像头角度）、滚轮（放大/缩小）和鼠标右键（改变摄像头位置）来操控 3D 巴士。还可以尝试底部控制栏中的按钮，将特效应用到你的视频流：从改变颜色到将自己翻转过来、在座位上弹跳等等。

派对巴士如何使用 WebRTC

派对巴士使用 WebRTC 建立体验所需的点对点视频流。WebRTC 在支持浏览器中的原生视频方面做得很好，它可以穿透防火墙以启用对等连接（通过 STUN）。但使用 WebRTC 时，你还需要提供自己的信令器来协调哪些端点将参与给定的应用程序会话。

派对巴士应用程序使用我们构建的名为 Mixology 的原型平台来处理信令和支持使用动态对等拓扑结构。请注意，许多应用程序可以使用 peer.js，但我们正在使用 Mixology 来探索将大量流组合到各种不同连接图中，以实现新的可扩展方法。

例如，如果使用者加入一辆已经有其他使用者的巴士，系统会负责在新的使用者和同一辆巴士上的对等使用者之间构建必要的连接路径，然后通过 WebSocket 通知所有对等使用者，需要为新的使用者分配一个座位。

具体来说，客户端通过实例化一个 Mixology 对象来与 Mixology 信令服务器交互

var m = new Mixology(signalerURL);

然后使用它来注册信令器

m.register(['mix-in'], ['mix-out']);

这两个参数分别提供了客户端支持的特定输入流和输出流类型。通过这种方式对输入和输出进行类型化，Mixology 可以组装任意流连接图，这些连接图可能因应用程序需求而异。在派对巴士的情况下，我们只在所有对等使用者之间使用完全连接的网格。也就是说，所有客户端都使用相同的输入和输出类型注册。

信令器是作为 node.js 应用程序实现的，该应用程序维护着一个已注册对等使用者及其连接的表格。因此，信令器可以负责处理对等使用者的加入、退出和其他事件 - 通过回调函数根据需要更新其他对等使用者。对等使用者和信令器之间所有通信都在内部使用 WebSockets 实现，使用 socket.io。

例如，当注册一个新的对等使用者时，服务器会更新拓扑表格，并使用回调函数通知需要了解新连接的其他对等使用者。

m.onPeerRegistered = function(peer) { ... }

在这个函数中，被指定发送流的对等使用者会启动 WebRTC 协商代码。被指定接收流的对等使用者会启动 WebRTC 应答代码（以及提供一个 onAddStream() 回调函数，在新的输入流准备就绪时使用）。

在派对巴士的情况下，接下来由应用程序将新的视频流映射到 3D 巴士模型中的正确座位上，然后使用 three.js 应用必要的 3D 变换。类似地，如果一个使用者离开巴士，系统会负责通知其他客户端一个对等使用者已经退出，以便他们采取适当的操作来删除显示中原本是死视频流的东西。

派对巴士使用一个虚拟屏幕数组来组织巴士上的“使用者”

var vsArray = new Array(NUM_SEATS);

在使用 Mixology 注册自身后，应用程序会在新的对等视频流可用于其巴士实例时收到回调

function onAddStream(stream, peerId) {
    var i = getNextOpenSeat();
    vsArray[i] = new VScreen(stream, peerId);
}

派对巴士应用程序为当前巴士上的每个视频流创建一个虚拟屏幕对象。传入的流与虚拟屏幕构造函数中的 DOM 视频对象相关联

function VScreen(stream, id) {
    var v = document.createElement(‘video’);
    v.setAttribute(“id”, “monitor:” + id);
    v.style.visibility = “hidden”;
    v.src = window.URL.createObjectURL(stream);  // binds stream to dom video object
    v.autoplay = “true”;
    document.body.appendChild(v);
}

电影还是应用程序？

派对巴士使用 three.js 来绘制一辆双层巴士，以及“乘坐”在座位上的虚拟屏幕。动画循环大约运行两分钟，包含大约十二个导演“镜头”。在整个演示过程中，各个视频屏幕都是实时的，每个使用者都可以操控它们。镜头序列的设计是为了改变场景灯光并呈现其他视觉效果，例如使用 Stemkoski 的粒子引擎创建的巴士推进器。

派对巴士是一个 Web 应用程序，但动画被编程为使用者可以像电影一样运行它。好奇的使用者可能会尝试与它交互，并发现它在大多数场景中都可以改变 3D 视图。但是，在有移动摄像头或巴士的镜头中，我们发现有必要阻止某些摄像头平移（在 x、y、z 方向上的移动）或旋转（在 x、y、z 轴上的旋转） - 否则，鼠标会与程序“冲突”，导致画面卡顿。

但派对巴士的大部分乐趣仅仅是对着摄像头卖萌，将视觉效果应用到自己的流中，以及寻找其他实时使用者。

更多信息

有关派对巴士应用程序的更多信息，或想了解 Mixology 平台的开发动态，请访问 www.gearcloudlabs.com。