Guia de início rápido: capturando uma foto ou um vídeo usando a interface do usuário de captura com 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 ]
Este tòpico mostra a você a maneira mais simples de capturar uma foto ou um vídeo da câmera incorporada ou anexada usando a API CameraCaptureUI. Essa API inicia uma caixa de diálogo de tela cheia que apresenta uma interface do usuário da câmera e permite que você capture uma foto ou um vídeo apenas com um método de chamada.
Como uma alternativa, se você desejar criar sua própria interface do usuário em vez de uma fornecida pela classe CameraCaptureUI, deverá usar MediaCapture. Consulte Início rápido: capturando vídeo usando o API MediaCapture para obter mais informações.
Objetivo: Capturar uma foto ou um vídeo de uma webcam.
Pré-requisitos
Você deve estar familiarizado com o JavaScript e ter o Microsoft Visual Studio instalado no Windows 8.
Tempo para conclusão: 20 minutos.
Instruções
1. Abrir o Visual Studio
Abra uma instância do Visual Studio.
2. Criar um novo projeto
Na caixa de diálogo Novo Projeto, escolha um aplicativo em branco dos tipos de projeto em JavaScript.
3. Inserir JavaScript e HTML do aplicativo
Abra o arquivo Default.html e copie o seguinte HTML para este arquivo (substituindo o conteúdo original).
<!DOCTYPE html>
<html>
<head>
<title>WinWebApp1</title>
<!-- WinJS references -->
<link rel="stylesheet" href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script src="/winjs/js/wwaapp.js"></script>
<!-- WinWebApp1 references -->
<link rel="stylesheet" href="/css/default.css" />
<script type = "text/javascript" >
// Takes a photo using the default JPEG format.
function takepicture() {
var captureUI = new Windows.Media.Capture.CameraCaptureUI();
captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
if (capturedItem) {
document.getElementById("message").innerHTML = "User captured a photo."
}
else {
document.getElementById("message").innerHTML = "User didn't capture a photo."
}
});
}
</script>
</head>
<body>
<input type="button" onclick="takepicture()" value="Take a Picture" /><br />
<span id="message"></span>
</body>
</html>
4. Declarar o recurso de webcam
Use o designer do arquivo de manifesto do aplicativo para adicionar o recurso de webcam. Selecione a guia Capabilities (Recursos) e selecione Webcam na lista.
5. Criar o aplicativo
Escolha Build (Criar) > Build Solution (Criar Solução) para criar o projeto.
6. Testar o aplicativo
- Escolha Debug (Depurar) > Start Debugging (Iniciar Depuração) para testar a solução.
- Clique no botão Take Picture (Tirar Foto) para tirar uma foto.
Resumo
Você acabou de tirar uma imagem usando as configurações padrão. Você também pode especificar um formato ou taxa de proporção diferente ou pode gravar um vídeo.
Para tirar uma foto com uma taxa de proporção de 4:3 no formato PNG, insira este código acima da chamada para capturar FileAsync no código que você colou no aplicativo.
captureUI.photoCaptureSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png; captureUI.photoCaptureSettings.croppedAspectRatio = {width:4, height:3};