本文來自Google的開發專家Dan Jenkins，他喜歡將最新的Web API與RTC應用程序混合在一起。他還在Nimble Ape經營自己的咨詢和開發公司。本文中，他給出了一個代碼實現——通過使用WebVR將FreeSWITCH Verto WebRTC視頻會議轉換為虛擬現實會議的。LiveVideoStack對原文進行了摘譯。

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”元素，它創建了一個場景，其中包含了與你的VR體驗相關的所有內容。空的“a-assets”標簽是我們稍后放置WebRTC視頻標簽的地方。

接下來的“a-entity”線是一個“簡單”的讓用戶沉浸其中的體驗。它是一個具有森林預設環境的a-frame框架實體 - 基本上可以引導我們的整個體驗。

剩下的實體用于我們的相機和我們的daydream控制。查看帶有a-frame框架的可用組件以及可以使用的基本體來創建3D形狀和對象。

這一切只是把我們的場景組合在一起。接下來，我們將使用一些JavaScript設置我們的控制邏輯代碼。

JavaScript

Verto 通信器是一個基于角度的應用程序，因此可以從主應用程序空間添加和刪除元素。我們需要一些邏輯來將Verto鏈接到我們的A-Frame設置。大多數邏輯少于40行JavaScript：

functionlink(scope,element,attrs){varnewVideo=document.createElement('a-video');newVideo.setAttribute('height','9');newVideo.setAttribute('width','16');newVideo.setAttribute('position','05-15');console.log('ATTACHNOW');varnewParent=document.getElementsByClassName('video-holder');newParent[0].appendChild(newVideo);window.attachNow=function(stream){varvideo=document.createElement('video');varassets=document.querySelector('a-assets');assets.addEventListener('loadeddata',()=>{console.log('loadedassetdata');})video.setAttribute('id','newStream');video.setAttribute('autoplay',true);video.setAttribute('src','');assets.appendChild(video);video.addEventListener('loadeddata',()=>{video.play();//PointingthisaframeentitytothatvideoasitssourcenewVideo.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中：

functionupdateVideoRes(){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團隊知道你是否遇到與該鏈接相同的問題。