Cómo obtener una vista previa de vídeo desde una 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 ]
Puedes asociar una cámara con una etiqueta <video> para obtener una vista previa del vídeo.
Nota En este tema se describe cómo asociar mediante programación la cámara con el control de vídeo HTML5. No se describe CameraCaptureUI ("selector de cámara"). Además, este tema es específico de las aplicaciones de Windows en tiempo de ejecución con JavaScript. Las aplicaciones de Windows en tiempo de ejecución que usan C++, C# o Visual Basic hacen uso de una API distinta.
Requisitos previos
En este tema se da por hecho que sabes crear una aplicación de Windows en tiempo de ejecución básica con JavaScript. Si necesitas ayuda para crear tu primera aplicación, consulta Crear la primera aplicación de la Tienda Windows con JavaScript.
Instrucciones
Paso 1: Establecer las capacidades del dispositivo en el manifiesto de la aplicación
Para habilitar el acceso a la cámara web, las aplicaciones primero deben incluir la DeviceCapability correspondiente en el manifiesto de la aplicación.
- En Microsoft Visual Studio, abre el diseñador para el manifiesto de la aplicación haciendo doble clic en el elemento package.appxmanifest en el Explorador de soluciones.
- Haz clic en Capacidades.
- Activa la casilla Cámara web.
Paso 2: Agregar el código
La etiqueta de vídeo puede usarse para obtener una vista previa de vídeo en la cámara web.
<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>