---
title: WebVR API
slug: Web/API/WebVR_API
translation_of: Web/API/WebVR_API
---
<div>{{draft("The WebVR API documentation is currently being updated to cover the v1.0 spec, therefore some of this information will be out of date. Contact ~~chrisdavidmills if you have any questions about this work.")}}{{DefaultAPISidebar("WebVR API")}}{{SeeCompatTable}}</div>

<p class="summary">O WebVR oferece suporte para expor dispositivos de realidade virtual - por exemplo, telas montadas na cabeça, como o Oculus Rift - para aplicativos da web, permitindo que os desenvolvedores traduzam informações de posição e movimento da tela para movimento em torno de uma cena 3D. Isso tem inúmeras aplicações muito interessantes, de passeios de produtos virtuais e aplicativos de treinamento interativo para super imersivo jogos em primeira pessoa.</p>

<h2 id="Conceitos_e_uso">Conceitos e uso</h2>

<p><img alt="Sketch of a person in a chair with wearing goggles labelled Head mounted display (HMD) facing a monitor with a webcam labelled Position sensor " src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p>

<p>Todos os dispositivos VR ligados ao computador serão devolvidos pelo {{domxref("Navigator.getVRDisplays()")}} método. Que retorna uma matriz de objetos para representar os dispositivos conectados, que herdam do objeto geral {{domxref("VRDevice")}} Geralmente o display usado na cabeça terá dois dispositivos - o próprio display montado na cabeça, representado por {{domxref("HMDVRDevice")}}, e uma câmera com sensor na posição que manterá o controle de sua posição de cabeça, representada por {{domxref("PositionSensorVRDevice")}}.</p>

<p>O objeto {{domxref("PositionSensorVRDevice")}} contém o método {{domxref("PositionSensorVRDevice.getState", "getState()")}}, que retorna um objeto {{domxref("VRPositionState")}} - isto representa o estado do sensor num dado carimbo de data e inclui propriedades que contêm dados úteis tais como velocidade, aceleração e orientação atuais, úteis para atualizar o processamento de uma cena em cada trama de acordo com o movimento do visor montado na cabeça VR.</p>

<p>O método {{domxref("HMDVRDevice.getEyeParameters()")}} retorna um objeto {{domxref("VREyeParameters")}}, que pode ser usado para retornar informações do campo de exibição - quanto da cena a tela montada na cabeça pode ver.O {{domxref("VREyeParameters.currentFieldOfView")}} retorna um objeto {{domxref("VRFieldOfView")}} que contém 4 ângulos que descrevem a vista atual a partir de um ponto central. Você também pode alterar o campo de visualização usando {{domxref("HMDVRDevice.setFieldOfView()")}}.</p>

<div id="gt-res-content">
<h2 class="trans-verified-button-small" dir="ltr" id="WebVR_Interfaces">WebVR Interfaces</h2>

<p class="trans-verified-button-small" dir="ltr">{{domxref("VRDisplay")}}<br>
 Representa qualquer dispositivo VR suportado por esta API. Ele inclui informações genéricas, como IDs de dispositivo e descrições, bem como métodos para começar a apresentar uma cena VR, recuperar os parâmetros do olho e exibir capacidades e outras funcionalidades importantes.<br>
 {{domxref("VRDisplayCapabilities")}}<br>
 Descreve os recursos de um {{domxref("VRDisplay")}} - seus recursos podem ser usados ​​para executar testes de capacidade do dispositivo VR, por exemplo, ele pode retornar informações de posição.<br>
 {{domxref("VRPose")}}<br>
 Representa o estado de posição em um dado carimbo de data/hora (que inclui orientação, posição, velocidade e aceleração).<br>
 {{domxref ("VREyeParameters")}}<br>
 Fornece acesso a todas as informações necessárias para processar corretamente uma cena para cada olho, incluindo informações de campo de visão.<br>
 {{domxref("VRFieldOfView")}}<br>
 Representa um campo de visão definido por 4 valores de graus diferentes que descrevem a vista a partir de um ponto central.<br>
 {{Domxref("VRLayer")}}<br>
 Representa uma camada a ser apresentada em {{domxref("VRDisplay")}}.<br>
 {{domxref("VRStageParameters")}}<br>
 Representa os valores que descrevem a área de estágio para dispositivos que suportam experiências em escala de sala.</p>

<h2 class="trans-verified-button-small" dir="ltr" id="Extensões_para_outras_interfaces">Extensões para outras interfaces</h2>

<p class="trans-verified-button-small" dir="ltr">{{domxref("Gamepad.displayId")}} {{readonlyInline}}<br>
 Retorna o {{domxref("VRDisplay.displayId")}} do associado {{domxref("VRDisplay")}} - o VRDisplay que o gamepad está controlando a cena exibida de.<br>
 {{domxref("Navigator.activeVRDisplays")}} {{readonlyInline}}<br>
 Retorna uma matriz contendo todos os objetos {{domxref("VRDisplay")}} que está sendo apresentado ({{domxref("VRDisplay.ispresenting")}}).<br>
 {{domxref("Navigator.getVRDisplays()")}}<br>
 Retorna uma promessa que resolve uma matriz de objetos {{domxref("VRDisplay")}} que representa qualquer dispositivo VR disponível conectado ao computador.<br>
 {{domxref("Window.onvrdisplayconnected")}}<br>
 Representa um manipulador de eventos que será executado quando um dispositivo VR compatível tiver sido conectado ao computador (quando o evento {{event("vrdisplayconnected")}} for acionado).<br>
 {{domxref("Window.onvrdisplaydisconnected")}}<br>
 Representa um manipulador de eventos que será executado quando um dispositivo VR compatível tiver sido desconectado do computador (quando o evento {{event("vrdisplaydisconnected")}} for acionado).<br>
 {{domxref("Window.onvrdisplaypresentchange")}}<br>
 Representa um manipulador de eventos que será executado quando o estado de apresentação de um dispositivo VR mudar - isto é, vai de apresentar a não apresentar, ou vice-versa (quando o evento {{event("onvrdisplaypresentchange")}} é acionado).</p>
</div>

<h2 id="Examplos">Examplos</h2>

<p>Você pode encontrar uma série de exemplos nesses repositórios Github:</p>

<ul>
 <li><a href="https://github.com/aframevr/aframe">A-Frame</a>: Estrutura web de código aberto para a construção de experiências VR. Muitos exemplos.</li>
 <li><a href="https://github.com/mdn/webvr-tests">mdn/webvr-tests</a>: Demonstrações simples construídas para ilustrar o uso de recursos básicos.</li>
 <li><a href="https://github.com/MozVR/">MozVR team</a>: Mais demonstrações, sobre WebVR e muito mais!</li>
</ul>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('WebVR')}}</td>
   <td>{{Spec2('WebVR')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_do_Browser_(navegador)">Compatibilidade do Browser (navegador)</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Chromium</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>
    <p>Suporte Básico</p>
   </td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
   <th>Samsung Internet for GearVR</th>
  </tr>
  <tr>
   <td>
    <p>Suporte Básico</p>
   </td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_Também">Veja Também</h2>

<ul>
 <li><a href="https://webvr.info">webvr.info</a>- Informações atualizadas sobre WebVR, configuração do navegador e comunidade.</li>
 <li><a href="https://iswebvrready.com">webvr.rocks</a>- Informações atualizadas sobre o suporte ao navegador WebVR (incluindo compilações experimentais).</li>
 <li><a href="http://mozvr.com/">MozVr.com</a>- Demos, downloads, outros recursos da equipe de VR da Mozilla.</li>
 <li><a href="https://aframe.io">A-Frame</a>- A web framework para a construção de experiências VR (com HTML), a partir da equipe Mozilla VR.</li>
 <li><a href="http://dsmu.me/ConsoleGameOnWeb/">Console Game on Web</a>- Uma coleção de demonstrações interessantes conceito de jogo, alguns dos quais incluem WebVR.</li>
 <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a>- Um modelo de iniciador muito útil para escrever aplicações WebVR.</li>
 <li><a href="https://developer.oculus.com/">Oculus Rift homepage</a></li>
</ul>