Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: capturar vídeo con la API MediaCapture

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 la Tienda Windows 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 supone que puedes crear una aplicación de la Tienda Windows desarrollada para Windows con JavaScript que use la plantilla de la Biblioteca de Windows para JavaScript. Si necesitas ayuda para crear tu primera aplicación, consulta el tema sobre cómo crear tu 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;
    captureInitSettings.realTimeModeEnabled = true;
    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.qvga);
}


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;
    captureInitSettings.realTimeModeEnabled = true;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}


// Create a profile.
function createProfile() {
    profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.qvga);
}

// 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);         
}


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
Agregar recursos multimedia
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
Windows.Media
Windows.Media.Capture
Windows.Media.Devices
Windows.Media.MediaProperties
Audio y vídeo HTML5
Otros recursos
Formatos de audio y vídeo compatibles
Rendimiento de audio y vídeo

 

 

Mostrar:
© 2018 Microsoft