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

文 / Dan Jenkins

譯 / 元寶

審校 / Ant

原文 ：?

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

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

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

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

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

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

A-Frame框架

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

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

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

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

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

我演講的演示基礎是開源的FreeSWITCH Verto Communicator。Verto使用WebRTC，我已經(jīng)知道如何使用Verto客戶端庫與FreeSWITCH中的Verto模塊通信，因此已經(jīng)打過了一半的戰(zhàn)斗。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”元素，它創(chuàng)建了一個場景，其中包含了與你的VR體驗相關(guān)的所有內(nèi)容。空的“a-assets”標簽是我們稍后放置WebRTC視頻標簽的地方。

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

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

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

JavaScript

Verto 通信器是一個基于角度的應用程序，因此可以從主應用程序空間添加和刪除元素。我們需要一些邏輯來將Verto鏈接到我們的A-Frame設置。大多數(shù)邏輯少于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應用程序中的會議頁面時，將會加載上面的“l(fā)ink”函數(shù)。

修改Verto

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

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

我有另外一個函數(shù)移動到了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環(huán)境中創(chuàng)建一個越來越長的視頻顯示。實質(zhì)上，每次我們獲得新成員時，我們都會使輸出變得越來越長，這樣用戶就會并排出現(xiàn)。

可視化

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

Verto WebVR會話的2D視圖

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

我們學到了什么？

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

所有代碼

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

總結(jié)

以上是生活随笔為你收集整理的使用WebRTC和WebVR进行VR视频通话的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。