本文來(lái)自Google的開(kāi)發(fā)專(zhuān)家Dan Jenkins，他喜歡將最新的Web API與RTC應(yīng)用程序混合在一起。他還在Nimble Ape經(jīng)營(yíng)自己的咨詢和開(kāi)發(fā)公司。本文中，他給出了一個(gè)代碼實(shí)現(xiàn)——通過(guò)使用WebVR將FreeSWITCH Verto WebRTC視頻會(huì)議轉(zhuǎn)換為虛擬現(xiàn)實(shí)會(huì)議的。LiveVideoStack對(duì)原文進(jìn)行了摘譯。

WebRTC不是Web平臺(tái)上唯一流行的媒體API。幾年前推出了Web虛擬現(xiàn)實(shí)（WebVR）規(guī)范，以便在Web瀏覽器中為虛擬現(xiàn)實(shí)設(shè)備提供支持。此后，它已移植到較新的WebXR設(shè)備API規(guī)范了。

今年早些時(shí)候在ClueCon，Dan Jenkins在演講中表示，使用FreeSWITCH將WebRTC視頻會(huì)議流添加到虛擬現(xiàn)實(shí)環(huán)境中相對(duì)容易。FreeSWITCH是比較流行的開(kāi)源電話平臺(tái)之一，已使用WebRTC好幾年了。

幾周前，我在ClueCon開(kāi)發(fā)者大會(huì)上發(fā)表了一篇關(guān)于WebRTC和WebVR的演講——Web開(kāi)發(fā)者可以使用的新媒體。將虛擬現(xiàn)實(shí)內(nèi)容帶入你的瀏覽器和手機(jī)對(duì)于具有新人口統(tǒng)計(jì)數(shù)據(jù)的應(yīng)用程序具有巨大潛力。在過(guò)去的兩三年里，虛擬現(xiàn)實(shí)已經(jīng)絕對(duì)可以負(fù)擔(dān)得起，并且可以廣泛使用，最近的手機(jī)使用Google的Cardboard，而現(xiàn)在的“白日夢(mèng)”也適用于一些高端手機(jī)。還有Oculus Go，它根本不需要移動(dòng)設(shè)備。我想探索如何將這種新的經(jīng)濟(jì)實(shí)惠的媒體用于WebRTC媒體應(yīng)用。

老實(shí)說(shuō)，當(dāng)我將論文提交給征集文件中心時(shí)，我對(duì)WebVR一無(wú)所知，但我知道在看到其他演示能夠?qū)崿F(xiàn)的結(jié)果后，我可能會(huì)得到一些有用的東西。我似乎有時(shí)間去做一些新的、令人興奮的事情，唯一的辦法就是直接在Call For Papers去做一個(gè)瘋狂的演講。

注意：從技術(shù)上講，它現(xiàn)在是“WebXR”，但我會(huì)堅(jiān)持使用這篇文章中更常見(jiàn)的“VR”。

A-Frame框架

有很多方法可以開(kāi)始使用WebVR，但我采用的方法是使用一個(gè)名為A-Frame的框架，它允許你編寫(xiě)一些HTML，并引入一個(gè)JavaScript庫(kù)并立即開(kāi)始構(gòu)建VR體驗(yàn)。雖然演示并沒(méi)有像我希望的那樣完美，但它確實(shí)證明了你可以用非常少的代碼構(gòu)建出色的虛擬現(xiàn)實(shí)體驗(yàn)。

如果你對(duì)Web組件感到很滿意，你就會(huì)馬上意識(shí)到A-Frame的作用。現(xiàn)在，你可能會(huì)問(wèn)為什么我沿著A-Frame路線走而不是直接使用WebGL以及使用WebVR polyfill和Three.js創(chuàng)建WebGL對(duì)象或許多其他框架中的一個(gè)。簡(jiǎn)單地說(shuō)，我喜歡盡可能的少編寫(xiě)代碼，而A-Frame框架似乎是為我量身定做的。

如果你不喜歡A-Frame框架，可在webvr.info上查看其他可用選項(xiàng)，如React 360。

使用WebRTC和Freeswitch構(gòu)建WebVR

今天使用A-Frame框架可以獲得一些WebRTC VR體驗(yàn)。在Mozilla的團(tuán)隊(duì)做了一個(gè)用戶可以彼此看到表示為VR場(chǎng)景的點(diǎn)，并能聽(tīng)到彼此的聲音。他們能夠使用WebRTC數(shù)據(jù)通道和WebRTC音頻來(lái)實(shí)現(xiàn)這一點(diǎn)，但我真的沒(méi)有找到任何使用WebRTC視頻的方法，因此開(kāi)始了如何在3D環(huán)境中使用實(shí)時(shí)視頻的挑戰(zhàn)。

我演講的演示基礎(chǔ)是開(kāi)源的FreeSWITCH Verto Communicator。Verto使用WebRTC，我已經(jīng)知道如何使用Verto客戶端庫(kù)與FreeSWITCH中的Verto模塊通信，因此已經(jīng)打過(guò)了一半的戰(zhàn)斗。Verto客戶端庫(kù)是信令部分——在將SIP PBX連接到WebRTC端點(diǎn)的更常見(jiàn)體驗(yàn)中，通過(guò)WebSocket替換SIP。

HTML

看一下我最終添加到Verto Communicator的A-Frame代碼。總共有8行HTML：

首先，我們有一個(gè)“a-scene”元素，它創(chuàng)建了一個(gè)場(chǎng)景，其中包含了與你的VR體驗(yàn)相關(guān)的所有內(nèi)容。空的“a-assets”標(biāo)簽是我們稍后放置WebRTC視頻標(biāo)簽的地方。

接下來(lái)的“a-entity”線是一個(gè)“簡(jiǎn)單”的讓用戶沉浸其中的體驗(yàn)。它是一個(gè)具有森林預(yù)設(shè)環(huán)境的a-frame框架實(shí)體 - 基本上可以引導(dǎo)我們的整個(gè)體驗(yàn)。

剩下的實(shí)體用于我們的相機(jī)和我們的daydream控制。查看帶有a-frame框架的可用組件以及可以使用的基本體來(lái)創(chuàng)建3D形狀和對(duì)象。

這一切只是把我們的場(chǎng)景組合在一起。接下來(lái)，我們將使用一些JavaScript設(shè)置我們的控制邏輯代碼。

JavaScript

Verto 通信器是一個(gè)基于角度的應(yīng)用程序，因此可以從主應(yīng)用程序空間添加和刪除元素。我們需要一些邏輯來(lái)將Verto鏈接到我們的A-Frame設(shè)置。大多數(shù)邏輯少于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;}

當(dāng)你前往Verto Communicator應(yīng)用程序中的會(huì)議頁(yè)面時(shí)，將會(huì)加載上面的“l(fā)ink”函數(shù)。

修改Verto

你可以看到，當(dāng)鏈接被調(diào)用時(shí)，它將創(chuàng)建一個(gè)新的“a-video”元素，并為其提供寬度和高度的一些屬性，以及將其放置在我們的3D環(huán)境中的位置。

這個(gè)“attachNow”函數(shù)才是真正神奇的地方——當(dāng)一個(gè)會(huì)話啟動(dòng)時(shí)，我修改了Verto庫(kù)，在名為attachNow的窗口上調(diào)用一個(gè)函數(shù)。默認(rèn)情況下，Verto庫(kù)將初始化jQuery樣式標(biāo)記，并為你添加/刪除該標(biāo)記的媒體。這對(duì)我來(lái)說(shuō)是不可能的——我需要獲得一個(gè)流并且能夠自己進(jìn)行操作，這樣我就可以將視頻標(biāo)簽添加到我上面顯示的所需空資產(chǎn)組件中。這讓A-Frame可以發(fā)揮其神奇作用——從資產(chǎn)中獲取數(shù)據(jù)并將其加載到在3D環(huán)境中顯示的“a-video”標(biāo)簽內(nèi)的畫(huà)布上。

我有另外一個(gè)函數(shù)移動(dòng)到了vertoServices.js中：

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

“updateVideoRes”旨在改變FreeSWITCH的Verto會(huì)議的輸出分辨率。隨著用戶加入會(huì)議，我們希望在3D環(huán)境中創(chuàng)建一個(gè)越來(lái)越長(zhǎng)的視頻顯示。實(shí)質(zhì)上，每次我們獲得新成員時(shí)，我們都會(huì)使輸出變得越來(lái)越長(zhǎng)，這樣用戶就會(huì)并排出現(xiàn)。

可視化

這就是最終的結(jié)果，在這個(gè)3D環(huán)境中，Simon Woodhead和我一起在一個(gè)“電影放映”中創(chuàng)建了一個(gè)虛擬現(xiàn)實(shí)環(huán)境。

Verto WebVR會(huì)話的2D視圖

關(guān)于WebVR的真正偉大之處在于，你無(wú)需使用VR耳機(jī)即可完成所有工作，你可以單擊紙板按鈕，你的虛擬現(xiàn)實(shí)體驗(yàn)將變成全屏顯示，就像你戴著耳機(jī)一樣。你可以在YouTube上觀看ClueCon上的視頻（https://youtu.be/FxIlzFs4A7o）

我們學(xué)到了什么？

演示的一半成功了，另一半沒(méi)有。最大的學(xué)習(xí)是，盡管這可能是觀看視頻會(huì)議的絕妙方式，但將虛擬現(xiàn)實(shí)觀眾包括在視頻會(huì)議中是不可行的。 當(dāng)他們戴著耳機(jī)看著它的時(shí)候。也許這就是微軟的HoloLens通過(guò)混合現(xiàn)實(shí)使事情變得更好的地方。

所有代碼

代碼可以在我的bitbucket（https://bitbucket.org/nimbleape/freeswitch/branches/compare/webvr..#diff）找到，直到我們弄清楚如何解決FreeSWITCH的git歷史記錄損壞的問(wèn)題（https://freeswitch.org/jira/browse/FS-11338），這意味著您無(wú)法在其他任何地方托管代碼（例如我首選的git store，github）——讓FreeSWITCH團(tuán)隊(duì)知道你是否遇到與該鏈接相同的問(wèn)題。