Inicio rápido: transcodificar archivos de vídeo (HTML)

Artículo
02/16/2016

[ 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 ]

La API Windows.Media.Transcoding transcodifica un archivo de vídeo de un formato a otro.

La transcodificación es la conversión de un archivo multimedia digital, como un archivo de vídeo o audio, de un formato a otro. Para ello, generalmente, se descodifica el archivo y después se lo vuelve a codificar. Por ejemplo, puedes convertir un archivo de Windows Media a MP4 para que pueda reproducirse en un dispositivo portátil compatible con este formato. O bien, puedes convertir un archivo de vídeo de alta definición a una resolución más baja. En ese caso, el archivo que se volvió a codificar podría usar el mismo códec que el archivo original, pero tendría un perfil de codificación diferente.

En este tutorial se muestra cómo transcodificar un archivo de vídeo al formato MP4. También se describe cómo usar la clase FileOpenPicker para abrir un archivo de vídeo del sistema y después la clase MediaTranscoder para transcodificar el archivo al formato MP4. Finalmente, se explica cómo usar la clase FileSavePicker para guardar el archivo recién codificado.

La lista completa de códigos de este inicio rápido se encuentra al final de este tutorial. Agrega este código al archivo Program.js.

Para obtener otro ejemplo de transcodificación en una aplicación de Windows en tiempo de ejecución con JavaScript, consulta la muestra de transcodificación de multimedia.

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

1. Crear un nuevo proyecto

Comienza por la creación de una aplicación de la Tienda Windows vacía con JavaScript. Para obtener más información, consulta el tema sobre cómo crear tu primera aplicación de la Tienda Windows con JavaScript.

2. Seleccionar un archivo de origen y crear un archivo de destino

Usa la clase FileOpenPicker para seleccionar un archivo de origen y la clase FileSavePicker para crear el archivo de destino. Establece las propiedades SuggestedStartLocation y FileTypeFilter en FileOpenPicker. En el objeto FileSavePicker, establece las propiedades SuggestedStartLocation, DefaultFileExtension, SuggestedFileName y FileTypeChoices. Ten en cuenta que esta función llama a una función denominada TranscodeFile. Se trata de una función definida por el usuario que realiza la operación de transcodificación. Crearemos esta función en el paso siguiente.

Una aplicación de la Tienda de Windows Phone con JavaScript debe usar PickSingleFileAndContinue en lugar de PickSingleFileAsync.

function transcodeVideoFile() {
    var source;
    var destination

    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
    openPicker.fileTypeFilter.replaceAll([".wmv", ".mp4"]);

    openPicker.pickSingleFileAsync().then(
        function (file) {
            source = file;
            var savePicker = new Windows.Storage.Pickers.FileSavePicker();

            savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
            savePicker.defaultFileExtension = ".mp4";
            savePicker.suggestedFileName = "New Video";
            savePicker.fileTypeChoices.insert("MPEG4", [".mp4"]);

            return savePicker.pickSaveFileAsync();
        }).then(
        function (file) {
            destination = file;

            TranscodeFile(source, destination);
        });
};

3. Crear un perfil de codificación

El perfil de codificación contiene todas las opciones de configuración que determinan el modo en que se codificará el archivo de destino. Se trata del lugar donde tienes el mayor número de opciones al transcodificar un archivo.

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.

var 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 de 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 los detalles del perfil.

4. Transcodificar el archivo

Para transcodificar el archivo, crea un nuevo objeto MediaTranscoder y llama al método MediaTranscoder.PrepareFileTranscodeAsync. Pasa el archivo de origen, el archivo de destino y el perfil de codificación. Después llama a la función TranscodeAsync en el objeto PrepareTranscodeResult que devolvió la operación de transcodificación asincrónica. También puedes crear funciones para controlar los errores, el progreso y la finalización de la operación asincrónica.

/// <param name="srcFile" type="IStorageFile"/>
/// <param name="destFile" type="IStorageFile"/>
function TranscodeFile(srcFile, destFile) {

    var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
            Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);

    var transcoder = new Windows.Media.Transcoding.MediaTranscoder();

    transcoder.prepareFileTranscodeAsync(srcFile, destFile, profile).then(function (result) {
        if (result.canTranscode) {
            result.transcodeAsync().then(transcodeComplete, transcoderErrorHandler, transcodeProgress);
        } else {
            // Handle error condition. result.failureReason
        }
    });
};

El método PrepareFileTranscodeAsync es asincrónico. Esto permite que la transcodificación se lleve a cabo en segundo plano mientras la interfaz de usuario continúa respondiendo.

También deberías actualizar la interfaz de usuario y controlar los errores que ocurran.

function transcodeComplete(result) {
    // handle completion.

    // This snippet writes to an HTML control which is defined external to this snippet.
    OutputText.innerHTML = "Transcode Complete";
};

function transcoderErrorHandler(error) {
    // handle error condition
};

function transcodeProgress(percent) {

    // handle progress.
    // This snippet writes to an HTML control which is defined external to this snippet.
    ProgressText.innerHTML = "Transcode Progress: " + percent.toString().split(".")[0] + "%";
};

Resumen

El siguiente ejemplo de código muestra la secuencia de llamadas completa para la operación de transcodificación.

Primero, el código para abrir y guardar el archivo.

function transcodeVideoFile() {
    var source;
    var destination

    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
    openPicker.fileTypeFilter.replaceAll([".wmv", ".mp4"]);

    openPicker.pickSingleFileAsync().then(
        function (file) {
            source = file;
            var savePicker = new Windows.Storage.Pickers.FileSavePicker();

            savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.videosLibrary;
            savePicker.defaultFileExtension = ".mp4";
            savePicker.suggestedFileName = "New Video";
            savePicker.fileTypeChoices.insert("MPEG4", [".mp4"]);

            return savePicker.pickSaveFileAsync();
        }).then(
        function (file) {
            destination = file;

            TranscodeFile(source, destination);
        });
};

Después, el código para transcodificar el archivo.

/// <param name="srcFile" type="IStorageFile"/>
/// <param name="destFile" type="IStorageFile"/>
function TranscodeFile(srcFile, destFile) {

    var profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
            Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);

    var transcoder = new Windows.Media.Transcoding.MediaTranscoder();

    transcoder.prepareFileTranscodeAsync(srcFile, destFile, profile).then(function (result) {
        if (result.canTranscode) {
            result.transcodeAsync().then(transcodeComplete, transcoderErrorHandler, transcodeProgress);
        } else {
            // Handle error condition. result.failureReason
        }
    });
};

Finalmente, el código para controlar el progreso, los errores y la finalización de la transcodificación.

function transcodeComplete(result) {
    // handle completion.

    // This snippet writes to an HTML control which is defined external to this snippet.
    OutputText.innerHTML = "Transcode Complete";
};

function transcoderErrorHandler(error) {
    // handle error condition
};

function transcodeProgress(percent) {

    // handle progress.
    // This snippet writes to an HTML control which is defined external to this snippet.
    ProgressText.innerHTML = "Transcode Progress: " + percent.toString().split(".")[0] + "%";
};