Cómo grabar audio o vídeo (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 grabar vídeo desde la cámara y/o audio desde el micrófono.
Instrucciones
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 Windows.Media.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 Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync. O bien, si conoces la configuración de codificación exacta que deseas, puedes crear un nuevo objeto Windows.Media.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 grabar 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 adecuadamente 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()
);
};