>我們的下一步是使用這些選項實際吸引我們的相機(jī)提要。為此，我們使用MediaStream API。這是一組JavaScript API，使我們能夠從本地音頻和視頻流中獲取數(shù)據(jù) - 非常適合獲取手機(jī)的相機(jī)流。特別是，我們將使用getusermedia函數(shù)。 MediaStream API仍在“ W3C編輯器的草稿”中，并且與瀏覽器的瀏覽器略有不同。該演示主要集中在用于移動的Google Chrome上，但出于將來的兼容性，我們得到了一個與用戶當(dāng)前瀏覽器一起使用的并將其分配給Navigator.GetuserMedia：>

video<span>,
</span>      canvas<span>,
</span>      context<span>,</span>

>在稱為源的數(shù)組中，我們可以使用此功能的返回值。我們循環(huán)瀏覽每個來源，并尋找等于“視頻”的源。每個源將具有一種“音頻”或“視頻”。然后，我們查看發(fā)現(xiàn)的視頻是否具有與“環(huán)境”相等的屬性，如果是環(huán)境，這是我們希望使用的相機(jī)。我們在API中檢索其ID，然后從前更新我們的選項對象，以將此源ID作為我們首選的視頻流。

<span>var scene,
</span>      camera<span>, 
</span>      renderer<span>,
</span>      element<span>,
</span>      container<span>,
</span>      effect<span>,</span>

video<span>,
</span>      canvas<span>,
</span>      context<span>,</span>

themes <span>= ['blackandwhite', 'sepia', 'arcade', 'inverse'],
</span>      currentTheme <span>= 0,
</span>      lookingAtGround <span>= false;</span>

在頁面中播放相機(jī)流后，我們在JavaScript中創(chuàng)建了一個帆布元素，我們用來對視頻數(shù)據(jù)進(jìn)行操縱。帆布元素本身永遠(yuǎn)不會添加到頁面本身中，它僅保留在我們的JavaScript中。

<span>init();
</span>
  <span>function init() {
</span>    scene <span>= new THREE<span>.Scene</span>();
</span>    camera <span>= new THREE<span>.PerspectiveCamera</span>(90, window.innerWidth / window.innerHeight, 0.001, 700);
</span>    camera<span>.position.set(0, 15, 0);
</span>    scene<span>.add(camera);
</span>
    renderer <span>= new THREE<span>.WebGLRenderer</span>();
</span>    element <span>= renderer.domElement;
</span>    container <span>= document.getElementById('webglviewer');
</span>    container<span>.appendChild(element);
</span>
    effect <span>= new THREE<span>.StereoEffect</span>(renderer);
</span>
    element<span>.addEventListener('click', fullscreen, false);</span>

<span>if (window.<span>DeviceOrientationEvent</span>) {
</span>    <span>window.addEventListener('deviceorientation', function(evt) {
</span>      <span>if (evt.gamma > -1 && evt.gamma < 1 && !lookingAtGround) {
</span>        lookingAtGround <span>= true;
</span>        currentTheme <span>= (themes.length > currentTheme+1) ? currentTheme+1 : 0;
</span>
        <span>setTimeout(function() {
</span>          lookingAtGround <span>= false;
</span>        <span>}, 4000);
</span>      <span>}
</span>    <span>}.bind(this));
</span>  <span>}</span>

video <span>= document.createElement('video');
</span>  video<span>.setAttribute('autoplay', true);
</span>  
  <span>var options = {
</span>    <span>video: {
</span>      <span>optional: [{facingMode: "environment"}]
</span>    <span>}
</span>  <span>};</span>

>

<span>navigator.getUserMedia = navigator.getUserMedia ||
</span>  <span>navigator.webkitGetUserMedia || navigator.mozGetUserMedia;</span>

<span>var scene,
</span>      camera<span>, 
</span>      renderer<span>,
</span>      element<span>,
</span>      container<span>,
</span>      effect<span>,</span>

應(yīng)用過濾器

我們的Animate（）函數(shù)首先使用context.drawimage（）將最新幀從相機(jī)繪制到我們的畫布上

video<span>,
</span>      canvas<span>,
</span>      context<span>,</span>

themes <span>= ['blackandwhite', 'sepia', 'arcade', 'inverse'],
</span>      currentTheme <span>= 0,
</span>      lookingAtGround <span>= false;</span>

<span>init();
</span>
  <span>function init() {
</span>    scene <span>= new THREE<span>.Scene</span>();
</span>    camera <span>= new THREE<span>.PerspectiveCamera</span>(90, window.innerWidth / window.innerHeight, 0.001, 700);
</span>    camera<span>.position.set(0, 15, 0);
</span>    scene<span>.add(camera);
</span>
    renderer <span>= new THREE<span>.WebGLRenderer</span>();
</span>    element <span>= renderer.domElement;
</span>    container <span>= document.getElementById('webglviewer');
</span>    container<span>.appendChild(element);
</span>
    effect <span>= new THREE<span>.StereoEffect</span>(renderer);
</span>
    element<span>.addEventListener('click', fullscreen, false);</span>

看起來像這樣的

<span>if (window.<span>DeviceOrientationEvent</span>) {
</span>    <span>window.addEventListener('deviceorientation', function(evt) {
</span>      <span>if (evt.gamma > -1 && evt.gamma < 1 && !lookingAtGround) {
</span>        lookingAtGround <span>= true;
</span>        currentTheme <span>= (themes.length > currentTheme+1) ? currentTheme+1 : 0;
</span>
        <span>setTimeout(function() {
</span>          lookingAtGround <span>= false;
</span>        <span>}, 4000);
</span>      <span>}
</span>    <span>}.bind(this));
</span>  <span>}</span>

最后，我最喜歡所有效果！ “街機(jī)”風(fēng)格的一種像素化圖像使其看起來像復(fù)古世界。為了實現(xiàn)這種效果，我調(diào)整了David Desandro和John Schulz的Close像素酸插件。插件的原始版本將轉(zhuǎn)換為內(nèi)聯(lián)圖像，并用像素化的畫布版本代替。我的版本取而代之的是帆布數(shù)據(jù)，并將其放回同一畫布和上下文中，因此我們可以將其用于實時視頻。我的調(diào)整后版仍然接受與插件頁面上的所有參數(shù)相同的參數(shù)。它比上面的其他過濾器要慢一些，如果我有時間研究它，可能會優(yōu)化。目前，我有點滯后，使它感覺更復(fù)古！對于希望將新選項應(yīng)用于該過濾器的任何人（例如，將世界變成鉆石）的任何人都可以使其更加滯后！

>

video <span>= document.createElement('video');
</span>  video<span>.setAttribute('autoplay', true);
</span>  
  <span>var options = {
</span>    <span>video: {
</span>      <span>optional: [{facingMode: "environment"}]
</span>    <span>}
</span>  <span>};</span>

>最后，我們將紋理設(shè)置為在下一個幀上更新三個。JS（因為我們肯定以某種方式對其進(jìn)行了更改），然后在下一個requestAnepanimationFrame（）再次運(yùn)行Animate（）。我們還運(yùn)行代碼以更新和恢復(fù)我們的三個。

<span>var scene,
</span>      camera<span>, 
</span>      renderer<span>,
</span>      element<span>,
</span>      container<span>,
</span>      effect<span>,</span>

是https time

截至2015年底 - 我正在回到本文中，以添加新的相當(dāng)重要的信息 - Chrome現(xiàn)在要求使用攝像頭的網(wǎng)頁通過HTTPS提供。因此，在嘗試運(yùn)行此操作之前，您需要找到一種通過HTTPS運(yùn)行服務(wù)的方法。到目前為止，我用于測試的一種方法是Ngrok，它可以為您的Localhost提供HTTPS隧道。我們有一個指南，可以從這里的任何地方訪問Localhost，這可以幫助您入門。

中 為了能夠訪問網(wǎng)絡(luò)攝像頭，似乎您需要將其托管在服務(wù)器上，而不是本地運(yùn)行它。為了進(jìn)行測試，我使用Ngrok在手機(jī)上從Mac進(jìn)行測試。否則，將您的東西ftp放在某個地方的Web服務(wù)器上并進(jìn)行測試！

>在您的Google紙板或其他VR耳機(jī)內(nèi)運(yùn)行它，您應(yīng)該使用我們的黑白過濾器看到周圍的環(huán)境。如果您向下看地面，則應(yīng)切換過濾器。這很有趣！這是一個小型動畫gif，可以顯示它的作用（在耳機(jī)之外，因此您可以看到它顯示的內(nèi)容）：

結(jié)合了Google紙板，HTML5，JavaScript和Trix.js的功能，帶來了一些真正整潔的可能性，這些可能不僅限于虛擬現(xiàn)實。使用攝像頭輸入，您也可以將周圍的世界帶入現(xiàn)場！最初的想法可以發(fā)展成許多其他領(lǐng)域。也可以使用著色器通過三個js本身過濾圖像，并可能在您的場景中添加增強(qiáng)現(xiàn)實對象 - 我將在以后的文章中介紹的兩個想法。

>如果您根據(jù)此演示進(jìn)行一些非常整潔的AR體驗，請在評論中留下筆記或在Twitter上與我聯(lián)系（@thatpatrickguy），我總是很想看看！

經(jīng)常詢問有關(guān)JavaScript和Google Cardboard的問題（常見問題解答）

>

> JavaScript在創(chuàng)建AR體驗中的作用是什么？它用于控制AR元素的行為，例如它們?nèi)绾我苿?，對用戶輸入反?yīng)或隨時間變化。 JavaScript也可以用來處理更復(fù)雜的任務(wù)，例如跟蹤用戶的位置和方向，或管理多個AR對象之間的相互作用。

>

>

>