使用WebRTC和WebVR进行VR视频通话

本文来自Google的开发专家Dan Jenkins，他喜欢将最新的Web API与RTC应用程序混合在一起。他还在Nimble Ape经营自己的咨询和开发公司。本文中，他给出了一个代码实现——通过使用WebVR将FreeSWITCH Verto WebRTC视频会议转换为虚拟现实会议的。LiveVideoStack对原文进行了摘译。

文 / Dan Jenkins

译 / 元宝

审校 / Ant

原文 ： 

https://webrtchacks.com/webrtc-meets-webvr/

WebRTC不是Web平台上唯一流行的媒体API。几年前推出了Web虚拟现实（WebVR）规范，以便在Web浏览器中为虚拟现实设备提供支持。此后，它已移植到较新的WebXR设备API规范了。

今年早些时候在ClueCon，Dan Jenkins在演讲中表示，使用FreeSWITCH将WebRTC视频会议流添加到虚拟现实环境中相对容易。FreeSWITCH是比较流行的开源电话平台之一，已使用WebRTC好几年了。

几周前，我在ClueCon开发者大会上发表了一篇关于WebRTC和WebVR的演讲——Web开发者可以使用的新媒体。将虚拟现实内容带入你的浏览器和手机对于具有新人口统计数据的应用程序具有巨大潜力。在过去的两三年里，虚拟现实已经绝对可以负担得起，并且可以广泛使用，最近的手机使用Google的Cardboard，而现在的“白日梦”也适用于一些高端手机。还有Oculus Go，它根本不需要移动设备。我想探索如何将这种新的经济实惠的媒体用于WebRTC媒体应用。

老实说，当我将论文提交给征集文件中心时，我对WebVR一无所知，但我知道在看到其他演示能够实现的结果后，我可能会得到一些有用的东西。我似乎有时间去做一些新的、令人兴奋的事情，唯一的办法就是直接在Call For Papers去做一个疯狂的演讲。

注意：从技术上讲，它现在是“WebXR”，但我会坚持使用这篇文章中更常见的“VR”。

A-Frame框架

有很多方法可以开始使用WebVR，但我采用的方法是使用一个名为A-Frame的框架，它允许你编写一些HTML，并引入一个JavaScript库并立即开始构建VR体验。虽然演示并没有像我希望的那样完美，但它确实证明了你可以用非常少的代码构建出色的虚拟现实体验。

如果你对Web组件感到很满意，你就会马上意识到A-Frame的作用。现在，你可能会问为什么我沿着A-Frame路线走而不是直接使用WebGL以及使用WebVR polyfill和Three.js创建WebGL对象或许多其他框架中的一个。简单地说，我喜欢尽可能的少编写代码，而A-Frame框架似乎是为我量身定做的。

如果你不喜欢A-Frame框架，可在webvr.info上查看其他可用选项，如React 360。

使用WebRTC和Freeswitch构建WebVR

今天使用A-Frame框架可以获得一些WebRTC VR体验。在Mozilla的团队做了一个用户可以彼此看到表示为VR场景的点，并能听到彼此的声音。他们能够使用WebRTC数据通道和WebRTC音频来实现这一点，但我真的没有找到任何使用WebRTC视频的方法，因此开始了如何在3D环境中使用实时视频的挑战。

我演讲的演示基础是开源的FreeSWITCH Verto Communicator。Verto使用WebRTC，我已经知道如何使用Verto客户端库与FreeSWITCH中的Verto模块通信，因此已经打过了一半的战斗。Verto客户端库是信令部分——在将SIP PBX连接到WebRTC端点的更常见体验中，通过WebSocket替换SIP。

HTML

看一下我最终添加到Verto Communicator的A-Frame代码。总共有8行HTML：

<a-scene>
  <a-assets>
  </a-assets>
  <a-entity environment="preset: forest" class="video-holder">
    <a-entity camera="active: true" look-controls wasd-controls position="0 0 0" data-aframe-default-camera></a-entity>
    <a-entity daydream-controls></a-entity>
    <a-entity>
</a-scene>

首先，我们有一个“a-scene”元素，它创建了一个场景，其中包含了与你的VR体验相关的所有内容。空的“a-assets”标签是我们稍后放置WebRTC视频标签的地方。

接下来的“a-entity”线是一个“简单”的让用户沉浸其中的体验。它是一个具有森林预设环境的a-frame框架实体 - 基本上可以引导我们的整个体验。

剩下的实体用于我们的相机和我们的daydream控制。查看带有a-frame框架的可用组件以及可以使用的基本体来创建3D形状和对象。

这一切只是把我们的场景组合在一起。接下来，我们将使用一些JavaScript设置我们的控制逻辑代码。

JavaScript

Verto 通信器是一个基于角度的应用程序，因此可以从主应用程序空间添加和删除元素。我们需要一些逻辑来将Verto链接到我们的A-Frame设置。大多数逻辑少于40行JavaScript：

function link(scope, element, attrs) {

  var newVideo = document.createElement('a-video');
  newVideo.setAttribute('height', '9');
  newVideo.setAttribute('width', '16');
  newVideo.setAttribute('position', '0 5 -15');
  console.log('ATTACH NOW');
  var newParent = document.getElementsByClassName('video-holder');
  newParent[0].appendChild(newVideo);

  window.attachNow = function(stream) {
    var video = document.createElement('video');

    var assets = document.querySelector('a-assets');

    assets.addEventListener('loadeddata', () => {
      console.log('loaded asset data');
    })

    video.setAttribute('id', 'newStream');
    video.setAttribute('autoplay', true);
    video.setAttribute('src', '');
    assets.appendChild(video);

    video.addEventListener('loadeddata', () => {
      video.play();

      // Pointing this aframe entity to that video as its source
      newVideo.setAttribute('src', `#newStream`);
    });

    video.srcObject = stream;
  }

当你前往Verto Communicator应用程序中的会议页面时，将会加载上面的“link”函数。

修改Verto

你可以看到，当链接被调用时，它将创建一个新的“a-video”元素，并为其提供宽度和高度的一些属性，以及将其放置在我们的3D环境中的位置。

这个“attachNow”函数才是真正神奇的地方——当一个会话启动时，我修改了Verto库，在名为attachNow的窗口上调用一个函数。默认情况下，Verto库将初始化jQuery样式标记，并为你添加/删除该标记的媒体。这对我来说是不可能的——我需要获得一个流并且能够自己进行操作，这样我就可以将视频标签添加到我上面显示的所需空资产组件中。这让A-Frame可以发挥其神奇作用——从资产中获取数据并将其加载到在3D环境中显示的“a-video”标签内的画布上。

我有另外一个函数移动到了vertoServices.js中：

 function updateVideoRes() {
    data.conf.modCommand('vid-res', (unmutedMembers * 1280) + 'x720');
    attachNow();
    document.getElementsByTagName('a-video')[0].setAttribute('width', unmutedMembers*16);
  }

“updateVideoRes”旨在改变FreeSWITCH的Verto会议的输出分辨率。随着用户加入会议，我们希望在3D环境中创建一个越来越长的视频显示。实质上，每次我们获得新成员时，我们都会使输出变得越来越长，这样用户就会并排出现。

可视化

这就是最终的结果，在这个3D环境中，Simon Woodhead和我一起在一个“电影放映”中创建了一个虚拟现实环境。 

Verto WebVR会话的2D视图

关于WebVR的真正伟大之处在于，你无需使用VR耳机即可完成所有工作，你可以单击纸板按钮，你的虚拟现实体验将变成全屏显示，就像你戴着耳机一样。你可以在YouTube上观看ClueCon上的视频（https://youtu.be/FxIlzFs4A7o）

我们学到了什么？

演示的一半成功了，另一半没有。最大的学习是，尽管这可能是观看视频会议的绝妙方式，但将虚拟现实观众包括在视频会议中是不可行的。 当他们戴着耳机看着它的时候。也许这就是微软的HoloLens通过混合现实使事情变得更好的地方。

所有代码

代码可以在我的bitbucket（https://bitbucket.org/nimbleape/freeswitch/branches/compare/webvr..#diff）找到，直到我们弄清楚如何解决FreeSWITCH的git历史记录损坏的问题（https://freeswitch.org/jira/browse/FS-11338），这意味着您无法在其他任何地方托管代码（例如我首选的git store，github）——让FreeSWITCH团队知道你是否遇到与该链接相同的问题。