基於 WebRTC 和 WebVR 實現 VR 視頻通話

  歡迎訪問 RTC 開發者社區 ，與更多WebRTC開發者交流經驗。 

Web 平臺上的 WebRTC 並非其惟一的媒體 API。WebVR 說明書於幾年前被引入來爲瀏覽器中的虛擬現實設備提供支持。目前已經變爲新的 WebXR設備API說明書。

Dan Jenkin 說使用 WebVR、FreeSWITCH 向虛擬現實環境中添加一個 WebRTC 視頻會議流是相對簡單的。FreeSWITCH 是一個流行的開源電話平臺，而且已經擁有 WebRTC 有幾年時間了。

Dan 是一個 Google 開發專家，他喜歡講將最新的 Web API 和 RTC App 結合起來. 如下文章給出了他的代碼來講明他是如何使用 WebVR 將 FreeSWITCH Verto WebRTC 視頻會議轉變成虛擬現實會議的。

幾周以前，我參加了一個關於 WebRTC 和 WebVR 的活動。將VR內容加入你的瀏覽器和移動電話會增長 App 的潛力，吸引跟多人。在過去的兩三年內，伴隨着 Google 的 Cardboard，VR對於手機來講已經能夠負擔得起，並被普遍使用，同時 Oculus Go 徹底不須要移動設備。我想探索對於 App 如何在 WebRTC 媒體中使用這種新的廉價媒介。

事實上，在向 Call For Papers 上傳討論以前我對於 WebVR 並無任何頭緒，可是我知道在看到其它演示以後我可能有所收穫。我認爲只須要勇敢向前，上傳一段瘋狂的討論，並看看有誰認同。

A-Frame 框架

開始WebVR有幾種方法，我選擇使用一個叫作A-Frame的框架，它容許我寫入一些HTML並引入 JavaScript庫，直接創建VR體驗。儘管演示不像我期待的那樣，可是這說明你確實能夠用不多的代碼實現使人驚訝的VR體驗。

若是你熟悉Web組成，你會直接知道A-Frame在作什麼。如今，你可能會問爲何我會用它而不是直接使用WebGL，WebVR polyfill和Three.js來建立WebGL對象或者另一種框架。簡單來講，我喜歡少寫代碼，A-Frame看起來知足這一點。

若是你不喜歡A-Frame，你能夠試試其它選擇，例如webvr.info上的React360.

使用WebRTC創建WebVR體驗

現在使用A-Frame能夠實現多種WebRTC VR體驗。Mozilla 團隊實現了一種，在VR場景中，用戶能夠相互看到用點表示的對方，而且能夠聽到對方的聲音。他們使用WebRTC Data Channels 和WebRTC Audio實現了這個過程，可是我並不能找到任何使用了WebRTC視頻的地方，所以引出了一個如何在3D環境中使用實時視頻的挑戰。

個人演示基於開源FreeSWITCH Verto Communicator。Verto使用了WebRTC,而且我已經知道如何在FreeSWITCH中使用Verto客戶端庫與Verto組件交流，所以已經完成了一半的挑戰。Verto客戶端庫是發信部分—替換Websocket上的SIP，將SIP PBX與WebRTC斷點鏈接。

HTML

請查看我向Verto Communicator中添加的A-Frame代碼，一共只有8行。

首先a-scene元素建立了一個場景，包含了VR體驗中全部過程，空的a-assets標籤用來放入咱們的WebRTC視頻標籤。

下一行a-entity是使用戶沉浸的簡單體驗中最重要的一行。它是一個a-frame總體，具備預先配置的環境，將總體體驗分步。

其它的entities負責攝像頭和幻想控制。查看創建3D形狀和對象時，你能夠用的A-frame中支持的組件。

這些只是將場景集合起來，接下來咱們創建控制邏輯代碼，使用 JavaScript.

JavaScript

Verto Communicator是一個angular based的App,所以元素能夠被加入或移出主應用空間。咱們須要一些邏輯來鏈接Verto和A-frame。這個邏輯所需代碼不到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;
  }
複製代碼

當你使用Verto Communicator app進入會議界面時，以上Link函數被安裝。

修改Verto

如你所見，當連接被調用時，它將會建立一個新的視頻元素並賦予其寬度和高度屬性，將它添加到3D環境中。

AttachNow函數是real magic發生的地方，我修改了Verto庫，當一個session被創建時，調用一個叫attachNow的函數。默認狀況下，Verto庫使用jQuery形式的標籤來初始化，並向標籤中添加或移出媒體。我須要一個流來本身管理，這樣就能夠向以上我展現的空對象中加入video標籤。這就可使A-Frame實現它的邏輯—獲取數據並加載到3D環境中a-video標籤中一個canvas。

我還向vertoService.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環境下建立一個更長的視頻展現。必要的，每次有新成員加入時，咱們將輸出延長，這樣用戶就能夠在每一端看到其餘用戶。

視覺

這是最終結果，一個VR環境，包括我和Simon Woodhead。

關於WebVR有一點很不錯，爲了讓它所有工做， 你不須要具備VR耳機，你只須要點擊按鈕，就能夠獲得全屏的VR體驗，就像你帶了一個VR耳機同樣。你能夠查看YouTube上的視頻.

咱們學到了什麼？

這個演示只有一半起到了效果，最大的收穫就是即便只有一半演示有效，這也是一個觀看視頻會議不錯的方式。對於VR觀看者來講，當他們使用耳機觀看時，將他們加入流中不是一個可行的方案。可能這就是爲何微軟的HoloLens要是用混合現實優化它的緣由。