Compartilhar via


Como visualizar vídeo de uma câmera (HTML)

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Você pode associar uma câmera a uma marca <video> para visualizar o vídeo.

Observação  Este tópico descreve como associar de forma programática a câmera ao controle de vídeo HTML5. Ele não descreve o CameraCaptureUI ("seletor de câmera"). Além disso, este tópico se aplica especificamente aos aplicativos do Tempo de Execução do Windows em JavaScript. Os aplicativos do Tempo de Execução do Windows em C++, C# ou Visual Basic usam outra API.

 

Pré-requisitos

Este tópico presume que você possa criar um aplicativo básico do Tempo de Execução do Windows em JavaScript. Para obter ajuda para criar seu primeiro aplicativo, veja Criar seu primeiro aplicativo da Windows Store em JavaScript.

Instruções

Etapa 1: Defina a capacidade do dispositivo no manifesto de aplicativo

Para habilitar o acesso à webcam, os aplicativos devem incluir primeiro a DeviceCapability correspondente no manifesto de aplicativo.

  1. No Microsoft Visual Studio, abra o designer do manifesto do aplicativo clicando duas vezes no item package.appxmanifest do Gerenciador de Soluções.
  2. Clique em Recursos.
  3. Marque a caixa Webcam.

Etapa 2: Adicione o código

Esta marca vídeo pode ser usada para visualização de vídeo de webcam.

<script type="text/javascript">
   function init(){
      var mediarec = new Windows.Media.MediaRecorder();
      var opInitializeRecorder = mediarec.initializeAsync(null);
      opInitializeRecorder.start();
   }

   function preview(){  
      var myVideo = document.getElementById("videoTag1");
      myVideo.src = URL.createObjectURL(mediarec);
      myVideo.play();
   }
</script>

Tópicos relacionados

Exemplo de Captura de Mídia