Web平臺(tái)上的WebRTC并不是其唯一的媒體API。WebVR說明書于幾年前被引入來為瀏覽器中的虛擬現(xiàn)實(shí)設(shè)備提供支持。目前已經(jīng)變?yōu)樾碌腤ebXR設(shè)備API說明書。
今年夏天我在ClueCon，Dan Jenkin說使用WebVR,FreeSWITCH向虛擬現(xiàn)實(shí)環(huán)境中添加一個(gè)WebRTC視頻會(huì)議流是相對(duì)簡(jiǎn)單的。FreeSWITCH是一個(gè)流行的開源電話平臺(tái)，并且已經(jīng)擁有WebRTC有幾年時(shí)間了。WebRTC, WebVR，開源-很明顯這是很好的webrtcHacks材料。
Dan是一個(gè)google開發(fā)專家，他喜歡講將最新的Web API和RTC App結(jié)合起來. 以下文章給出了他的代碼來說明他是如何使用WebVR將FreeSWITCH Verto WebRTC視頻會(huì)議轉(zhuǎn)變成虛擬現(xiàn)實(shí)會(huì)議的。
幾周之前，我參加了一個(gè)關(guān)于WebRTC和WebVR的ClueCON開發(fā)者會(huì)議。將VR內(nèi)容加入你的瀏覽器和移動(dòng)電話會(huì)增加App的潛力，吸引更多人。在過去的兩三年內(nèi)，伴隨著Google的Cardboard，VR對(duì)于手機(jī)來說已經(jīng)可以負(fù)擔(dān)得起，并被廣泛使用，同時(shí)Oculus Go完全不需要移動(dòng)設(shè)備。我想探索對(duì)于App如何在WebRTC媒體中使用這種新的廉價(jià)媒介。
事實(shí)上，在向Call For Papers上傳討論之前我對(duì)于WebVR并沒有任何頭緒，但是我知道在看到其它演示之后我可能有所收獲。我認(rèn)為只需要勇敢向前，上傳一段瘋狂的討論，并看看有誰認(rèn)同。
A-Frame 框架
開始WebVR有幾種方法，我選擇使用一個(gè)叫做A-Frame的框架，它允許我寫入一些html并引入JAVAScript庫(kù)，直接建立VR體驗(yàn)。盡管演示不像我期待的那樣，但是這說明你確實(shí)可以用很少的代碼實(shí)現(xiàn)令人驚訝的VR體驗(yàn)。
如果你熟悉Web組成，你會(huì)直接知道A-Frame在做什么。現(xiàn)在，你可能會(huì)問為什么我會(huì)用它而不是直接使用WebGL，WebVR polyfill和Three.js來創(chuàng)建WebGL對(duì)象或者另外一種框架。簡(jiǎn)單來說，我喜歡少寫代碼，A-Frame看起來滿足這一點(diǎn)。
如果你不喜歡A-Frame，你可以試試其它選擇，例如webvr.info上的React360.
使用WebRTC建立WebVR體驗(yàn)
如今使用A-Frame可以實(shí)現(xiàn)多種WebRTC VR體驗(yàn)。Mozilla 團(tuán)隊(duì)實(shí)現(xiàn)了一種，在VR場(chǎng)景中，用戶可以相互看到用點(diǎn)表示的對(duì)方，并且可以聽到對(duì)方的聲音。他們使用WebRTC Data Channels 和WebRTC Audio實(shí)現(xiàn)了這個(gè)過程，但是我并不能找到任何使用了WebRTC視頻的地方，因此引出了一個(gè)如何在3D環(huán)境中使用實(shí)時(shí)視頻的挑戰(zhàn)。
我的演示基于開源FreeSWITCH Verto Communicator。Verto使用了WebRTC,并且我已經(jīng)知道如何在FreeSWITCH中使用Verto客戶端庫(kù)與Verto組件交流，因此已經(jīng)完成了一半的挑戰(zhàn)。Verto客戶端庫(kù)是發(fā)信部分—替換Websocket上的SIP，將SIP PBX與WebRTC斷點(diǎn)連接。
HTML
請(qǐng)查看我向Verto Communicator中添加的A-Frame代碼，一共只有8行。
首先a-scene元素創(chuàng)建了一個(gè)場(chǎng)景，包含了VR體驗(yàn)中所有過程，空的a-assets標(biāo)簽用來放入我們的WebRTC視頻標(biāo)簽。
下一行a-entity是使用戶沉浸的簡(jiǎn)單體驗(yàn)中最重要的一行。它是一個(gè)a-frame整體，具有預(yù)先配置的環(huán)境，將整體體驗(yàn)分步。
其它的entities負(fù)責(zé)攝像頭和幻想控制。查看建立3D形狀和對(duì)象時(shí)，你可以用的A-frame中支持的組件。
這些只是將場(chǎng)景集合起來，接下來我們建立控制邏輯代碼，使用JavaScript.
JavaScript
Verto Communicator是一個(gè)angular based的App,因此元素可以被加入或移出主應(yīng)用空間。我們需要一些邏輯來連接Verto和A-frame。這個(gè)邏輯所需代碼不到40行：
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;
}
當(dāng)你使用Verto Communicator app進(jìn)入會(huì)議界面時(shí)，以上Link函數(shù)被安裝。
修改Verto
如你所見，當(dāng)鏈接被調(diào)用時(shí)，它將會(huì)創(chuàng)建一個(gè)新的視頻元素并賦予其寬度和高度屬性，將它添加到3D環(huán)境中。
AttachNow函數(shù)是real magic發(fā)生的地方，我修改了Verto庫(kù)，當(dāng)一個(gè)session被建立時(shí)，調(diào)用一個(gè)叫attachNow的函數(shù)。默認(rèn)情況下，Verto庫(kù)使用jQuery形式的標(biāo)簽來初始化，并向標(biāo)簽中添加或移出媒體。我需要一個(gè)流來自己管理，這樣就可以向以上我展示的空對(duì)象中加入video標(biāo)簽。這就可以使A-Frame實(shí)現(xiàn)它的邏輯—獲取數(shù)據(jù)并加載到3D環(huán)境中a-video標(biāo)簽中一個(gè)canvas。
我還向vertoService.js里添加了一個(gè)函數(shù)：
function updateVideoRes() {
data.conf.modCommand('vid-res', (unmutedMembers * 1280) + 'x720');
attachNow();
document.getElementsByTagName('a-video')[0].setAttribute('width', unmutedMembers*16);
}
UpdateVideoRes被設(shè)計(jì)成改變FreeSWITCH的Verto會(huì)議的輸出分辨率。當(dāng)用戶加入會(huì)議時(shí)，我們想在3D環(huán)境下創(chuàng)建一個(gè)更長(zhǎng)的視頻展示。必要的，每次有新成員加入時(shí)，我們將輸出延長(zhǎng)，這樣用戶就可以在每一端看到其他用戶。
視覺
這是最終結(jié)果，一個(gè)VR環(huán)境，包括我和Simon Woodhead。
關(guān)于WebVR有一點(diǎn)很不錯(cuò)，為了讓它全部工作， 你不需要具有VR耳機(jī)，你只需要點(diǎn)擊按鈕，就可以得到全屏的VR體驗(yàn)，就像你帶了一個(gè)VR耳機(jī)一樣。你可以查看YouTube上的視頻.
我們學(xué)到了什么？
這個(gè)演示只有一半起到了效果，最大的收獲就是即使只有一半演示有效，這也是一個(gè)觀看視頻會(huì)議不錯(cuò)的方式。對(duì)于VR觀看者來說，當(dāng)他們使用耳機(jī)觀看時(shí)，將他們加入流中不是一個(gè)可行的方案。可能這就是為什么微軟的HoloLens要使用混合現(xiàn)實(shí)優(yōu)化它的原因。
所有代碼：
代碼可以在bitbucket上找到。
