Inicio rápido: capturar vídeo con la API MediaCapture
[ 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 muestra cómo capturar vídeo en un archivo mediante la API Windows.Media.Capture. Puedes usar la API Windows.Media.Capture para controlar la operación de captura asincrónica, seleccionar un perfil de codificación y enviar el vídeo obtenido a un archivo.
Para obtener otra muestra de captura de multimedia en una aplicación de Windows en tiempo de ejecución con JavaScript, consulta la muestra de captura de multimedia.
Objetivo: En este tutorial se muestra cómo capturar vídeo mediante la API Windows.Media.Capture.
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. Para obtener ayuda para crear tu primera aplicación, consulta Crear la primera aplicación de la Tienda Windows con JavaScript.
Instrucciones
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.
Inicializar MediaCaptureSettings
La propiedad MediaCaptureSettings proporciona las opciones de configuración para el objeto MediaCapture. Usa la clase MediaCaptureInitializationSettings para inicializar estas propiedades, como se muestra en el siguiente ejemplo.
// Initialize the MediaCaptureInitialzationSettings.
function initCaptureSettings() {
captureInitSettings = null;
captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
captureInitSettings.audioDeviceId = "";
captureInitSettings.videoDeviceId = "";
captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
if (deviceList.length > 0)
captureInitSettings.videoDeviceId = deviceList[0].id;
}
Crear el objeto MediaCapture
El objeto MediaCapture contiene los métodos y las operaciones asincrónicas que necesitas para capturar un vídeo.
oMediaCapture = new Windows.Media.Capture.MediaCapture();
Inicializar el objeto MediaCapture
Usa el método MediaCapture.InitializeAsync para inicializar el objeto MediaCapture. De manera predeterminada, InitializeAsync usa el dispositivo de captura de vídeo predeterminado y captura tanto audio como vídeo. Como alternativa, puedes crear e inicializar tu propio objeto MediaCaptureInitializationSettings y pasarlo al método InitializeAsync.
// Create and initialze the MediaCapture object.
function initMediaCapture() {
oMediaCapture = null;
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
createProfile();
}, errorHandler);
}
Crear un perfil de codificación
El perfil de codificación contiene todas las opciones para configurar el modo en que se codificará el archivo de destino. La API MediaProperties proporciona varias opciones para crear un objeto MediaEncodingProfile.
El espacio de nombres Windows.Media.MediaProperties proporciona un conjunto de perfiles de codificación predefinidos:
- Audio AAC (M4A)
- Audio MP3
- Audio de Windows Media (WMA)
- Vídeo MP4 (vídeo H.264 más audio AAC)
- Vídeo de Windows Media (WMV)
Los tres primeros perfiles de esta lista contienen solo audio. Los otros dos contienen vídeo y audio.
Con el siguiente código se crea un perfil para vídeo MP4.
// Create a profile.
function createProfile() {
profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
}
El método CreateMp4 estático crea un perfil de codificación MP4. El parámetro para este método proporciona la resolución de destino para el vídeo. En este caso, VideoEncodingQuality.HD720p significa 1280 x 720 píxeles a 30 fotogramas por segundo. ("720p" significa 720 líneas de escaneo progresivo por fotograma). Todos los otros métodos para crear perfiles predefinidos siguen este modelo.
Como alternativa, puedes crear un perfil que coincida con un archivo multimedia existente mediante el método MediaProperties.MediaEncodingProfile.CreateFromFileAsync. O bien, si conoces la configuración de codificación exacta que deseas, puedes crear un nuevo objeto MediaProperties.MediaEncodingProfile y rellenar todos los detalles del perfil.
Iniciar la grabación
Para comenzar a capturar vídeo en un archivo, crea un archivo para el vídeo capturado. Después llama al método StartRecordToStorageFileAsync, pasando MediaEncodingProfile y el archivo de almacenamiento de destino.
// Start the video capture.
function startMediaCaptureSession() {
Windows.Storage.KnownFolders.videosLibrary.createFileAsync("cameraCapture.mp4", Windows.Storage.CreationCollisionOption.generateUniqueName).then(function (newFile) {
storageFile = newFile;
oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {
}, errorHandler);
} );
}
Detener la grabación
Para detener la captura de vídeo, llama al método StopRecordAsync.
// Stop the video capture.
function stopMediaCaptureSession() {
oMediaCapture.stopRecordAsync().then(function (result) {
}, errorHandler);
}
Ejemplo completo
En el siguiente ejemplo se muestra cómo se unen los pasos para capturar vídeo en un archivo.
var oMediaCapture;
var profile;
var captureInitSettings;
var deviceList = new Array();
var recordState = false;
var storageFile;
function errorHandler(e) {
sdkSample.displayStatus(e.message + ", Error Code: " + e.code.toString(16));
}
// Begin initialization.
function initialization() {
document.getElementById("message").innerHTML = "Initialization started.";
enumerateCameras();
}
// Identify available cameras.
function enumerateCameras() {
var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).then(function (devices) {
// Add the devices to deviceList
if (devices.length > 0) {
for (var i = 0; i < devices.length; i++) {
deviceList.push(devices[i]);
}
initCaptureSettings();
initMediaCapture();
document.getElementById("message").innerHTML = "Initialization complete.";
} else {
sdkSample.displayError("No camera device is found ");
}
}, errorHandler);
}
// Initialize the MediaCaptureInitialzationSettings.
function initCaptureSettings() {
captureInitSettings = null;
captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
captureInitSettings.audioDeviceId = "";
captureInitSettings.videoDeviceId = "";
captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
if (deviceList.length > 0)
captureInitSettings.videoDeviceId = deviceList[0].id;
}
// Create a profile.
function createProfile() {
profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
}
// Create and initialze the MediaCapture object.
function initMediaCapture() {
oMediaCapture = null;
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
createProfile();
}, errorHandler);
}
// Start the video capture.
function startMediaCaptureSession() {
Windows.Storage.KnownFolders.videosLibrary.createFileAsync("cameraCapture.mp4", Windows.Storage.CreationCollisionOption.generateUniqueName).then(function (newFile) {
storageFile = newFile;
oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {
}, errorHandler);
} );
}
// Stop the video capture.
function stopMediaCaptureSession() {
oMediaCapture.stopRecordAsync().then(function (result) {
}, errorHandler);
}
Limpiar correctamente los recursos de MediaCapture
Advertencia
Es de suma importancia cerrar y desechar correctamente el objeto MediaCapture y los objetos relacionados cuando se suspende tu aplicación. Si no se hace, podrían generarse interferencias con el acceso de otras aplicaciones a la cámara del dispositivo, lo que tendría como consecuencia una experiencia del usuario negativa para tu aplicación.
En Windows Phone, limpia tus recursos MediaCapture en el controlador del evento de vigencia de la aplicación oncheckpoint. En Windows, usa los eventos SoundLevelChanged y comprueba si se silenció el nivel de sonido. Si se silenció, limpia los recursos de MediaCapture. Si el evento indica otros niveles de sonido, úsalo para volver a crearlos. Ten en cuenta que este evento no desencadenará el código aunque silencies o reactives el sonido mientras se ejecuta la aplicación. Por tanto, este evento tiene la misma finalidad que Suspend y Resume en el teléfono. Esto es necesario porque, en Windows, el usuario podría cambiar entre aplicaciones sin suspender la aplicación actual.
Deberías limpiar los recursos de captura de elementos multimedia en el evento oncheckpoint en Windows Phone o SoundLevelChanged en Windows, tal y como se explica en la información incluida en la nota anterior. Una buena manera de hacerlo consiste en declarar algunas variables para almacenar el objeto MediaCapture y booleanos que indiquen si la aplicación está actualmente grabando o mostrando la vista previa de vídeo. A continuación crea una función que detenga la grabación o vista previa si está en curso, que llame al método de cierre del objeto MediaCapture y que lo establezca como nulo. El código mostrado a continuación presenta una posible implementación de este método.
function cleanupCaptureResources()
{
var promises = [];
if (mediaCapture) {
if (isRecording) {
promises.push(mediaCapture.stopRecordAsync().then(function () {
isRecording = false;
}));
}
promises.push(new WinJS.Promise(function (complete) {
mediaCapture.close();
mediaCapture = null;
complete();
}));
}
return WinJS.Promise.join(promises).done(null, errorHandler);
}
Por último, agrega el siguiente código a tu controlador de eventos oncheckpoint. Es muy importante que utilices una promesa de llamada a tu método de limpieza. De este modo te aseguras de que el sistema permita que el método se complete antes de suspender tu aplicación.
app.oncheckpoint = function (args) {
args.setPromise(
cleanupCaptureResources()
);
};
Resumen
En este tema se describió cómo capturar vídeo mediante la clase MediaCapture.
Temas relacionados
Guías básicas
Guía básica para crear aplicaciones de la Tienda Windows con JavaScript
Diseño de la experiencia del usuario para aplicaciones
Muestras
Muestra de captura de multimedia
Muestra de interfaz de usuario de captura de cámara
Muestra de interfaz de usuario de opciones de la cámara
Muestra de enumeración de dispositivos
Muestra de comunicación en tiempo real
Muestra de extensión multimedia
Tareas
Inicio rápido: capturar una foto o un vídeo mediante el cuadro de diálogo de la cámara
Referencia
Otros recursos