Inicio rápido: capturar una foto o un vídeo mediante la interfaz de usuario de captura de cámara (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
En este tema se explica la forma más fácil para capturar una foto o un vídeo desde la cámara insertada o adjunta, mediante la API CameraCaptureUI. Esta API abre un cuadro de diálogo de pantalla completa, que presenta una interfaz de usuario de cámara y te permite capturar una foto o un vídeo con tan solo una llamada de método.
Como alternativa, si quieres crear tu propia interfaz de usuario en lugar de usar la que proporciona la clase CameraCaptureUI, debes usar MediaCapture. Consulta Inicio rápido: capturar vídeo con la API MediaCapture para obtener más información.
Objetivo: Capturar una foto o un vídeo desde una cámara web.
Requisitos previos
Debes estar familiarizado con JavaScript y tener Microsoft Visual Studio instalado en Windows 8.
Tiempo para finalizar: 20 minutos.
Instrucciones
1. Abrir Visual Studio
Abre una instancia de Visual Studio.
2. Crear un nuevo proyecto
En el cuadro de diálogo Nuevo proyecto, elige una aplicación vacía en los tipos de proyecto JavaScript.
3. Insertar el código JavaScript y HTML de la aplicación
Abre el archivo Default.html y copia el siguiente código HTML en el archivo (reemplazando su contenido 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 la funcionalidad de cámara web
Usa el diseñador del archivo de manifiesto de la aplicación para agregar la funcionalidad de cámara web. Selecciona la pestaña Capacidades y, a continuación, elige Cámara web en la lista.
5. Compilar la aplicación
Elige Compilar > Compilar solución para compilar el proyecto.
6. Probar la aplicación
- Elige Depurar > Iniciar depuración para probar la solución.
- Haz clic en el botón Tomar imagen para tomar una imagen.
Resumen
Acabas de tomar una imagen con la configuración predeterminada. También puedes especificar un formato o una relación de aspecto diferentes, o bien grabar un vídeo.
Para tomar una foto con una relación de aspecto 4:3 en el formato PNG, inserta el código que se muestra debajo de la llamada a captureFileAsync en el código que pegaste en la aplicación.
captureUI.photoCaptureSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png; captureUI.photoCaptureSettings.croppedAspectRatio = {width:4, height:3};