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

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

>在稱為源的數(shù)組中，我們可以使用此功能的返回值。我們循環(huán)瀏覽每個(gè)來(lái)源，並尋找等於“視頻”的源。每個(gè)源將具有一種“音頻”或“視頻”。然後，我們查看發(fā)現(xiàn)的視頻是否具有與“環(huán)境”相等的屬性，如果是環(huán)境，這是我們希望使用的相機(jī)。我們?cè)贏PI中檢索其ID，然後從前更新我們的選項(xiàng)對(duì)象，以將此源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>

在頁(yè)面中播放相機(jī)流後，我們?cè)贘avaScript中創(chuàng)建了一個(gè)帆布元素，我們用來(lái)對(duì)視頻數(shù)據(jù)進(jìn)行操縱。帆布元素本身永遠(yuǎn)不會(huì)添加到頁(yè)面本身中，它僅保留在我們的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)用過(guò)濾器

我們的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>

看起來(lái)像這樣的

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

>

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è)置為在下一個(gè)幀上更新三個(gè)。 JS（因?yàn)槲覀兛隙ㄒ阅撤N方式對(duì)其進(jìn)行了更改），然後在下一個(gè)requestAnepanimationFrame（）再次運(yùn)行Animate（）。我們還運(yùn)行代碼以更新和恢復(fù)我們的三個(gè)。

<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)頁(yè)通過(guò)HTTPS提供。因此，在嘗試運(yùn)行此操作之前，您需要找到一種通過(guò)HTTPS運(yùn)行服務(wù)的方法。到目前為止，我用於測(cè)試的一種方法是Ngrok，它可以為您的Localhost提供HTTPS隧道。我們有一個(gè)指南，可以從這裡的任何地方訪問(wèn)Localhost，這可以幫助您入門。

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

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

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

>如果您根據(jù)此演示進(jìn)行一些非常整潔的AR體驗(yàn)，請(qǐng)?jiān)谠u(píng)論中留下筆記或在Twitter上與我聯(lián)繫（@thatpatrickguy），我總是很想看看！

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

>

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

>

>

>