Démarrage rapide : transcodage de fichiers vidéo (HTML)

Article
02/12/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

L’API Windows.Media.Transcoding permet de transcoder un fichier vidéo d’un format vers un autre.

Le transcodage consiste à convertir un fichier multimédia numérique, tel qu’un fichier vidéo ou audio, d’un format vers un autre. Lors de ce processus, le fichier est généralement décodé puis réencodé. Par exemple, vous pouvez souhaiter convertir un fichier Windows Media au format MP4 pour qu’il puisse être lu sur un appareil mobile qui prend en charge le format MP4. Ou encore, vous pouvez souhaiter convertir un fichier vidéo à haute définition en fichier de résolution inférieure. Dans ce cas, le fichier réencodé peut utiliser le même codec que le fichier d’origine, mais il aura un profil d’encodage différent.

Ce didacticiel montre comment transcoder un fichier vidéo au format MP4. Il explique comment utiliser la classe FileOpenPicker pour ouvrir un fichier vidéo sur le système et la classe MediaTranscoder pour transcoder le fichier vidéo au format MP4. Enfin, il explique comment utiliser la classe FileSavePicker pour enregistrer le fichier nouvellement encodé.

Le code complet de ce guide de démarrage rapide est disponible à la fin de ce didacticiel. Ajoutez ce code à votre fichier Program.js.

Pour obtenir un autre exemple de transcodage dans une application Windows Runtime en JavaScript, voir Exemple de transcodage d’éléments multimédias.

Prérequis

Dans cette rubrique, nous partons du principe que vous savez créer une application Windows Runtime de base en JavaScript. Pour obtenir de l’aide lors de la création de votre première application, voir Créer votre première application du Windows Store en JavaScript.

Instructions

1. Créer un projet

Commencez par créer une application du Windows Store vide en JavaScript. Pour plus d’informations, voir Créer votre première application du Windows Store en JavaScript.

2. Sélectionner un fichier source et créer un fichier de destination

Utilisez la classe FileOpenPicker pour sélectionner un fichier source et la classe FileSavePicker pour créer le fichier de destination. Définissez les propriétés SuggestedStartLocation et FileTypeFilter de l’objet FileOpenPicker. Sur l’objet FileSavePicker, définissez les propriétés SuggestedStartLocation, DefaultFileExtension, SuggestedFileName et FileTypeChoices. Notez que cette fonction en appelle une autre appelée TranscodeFile. Celle-ci est définie par l’utilisateur et se charge de l’opération de transcodage. Nous allons créer cette fonction à l’étape suivante.

Une application du Windows Phone Store en JavaScript doit utiliser PickSingleFileAndContinue au lieu 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. Créer un profil d’encodage

Le profil d’encodage contient les paramètres qui déterminent le mode d’encodage du fichier de destination. C’est à ce stade du processus de transcodage d’un fichier que les options proposées sont les plus nombreuses.

L’espace de noms Windows.Media.MediaProperties fournit un ensemble de profils d’encodage prédéfinis :

Audio AAC (M4A)
Audio MP3
Audio Windows Media (WMA)
Vidéo MP4 (vidéo H.264 plus audio AAC)
Vidéo Windows Media (WMV)

Les trois premiers profils de cette liste contiennent uniquement de l’audio. Les deux autres contiennent de la vidéo et de l’audio.

Le code suivant crée un profil pour la vidéo MP4.

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

La méthode statique CreateMp4 permet de créer un profil d’encodage MP4. Le paramètre de cette méthode détermine la résolution cible de la vidéo. Dans ce cas, VideoEncodingQuality.hd720p signifie 1280 x 720 pixels à 30 images par seconde. ("720p" correspond à un balayage progressif de 720 lignes par image.) Les autres méthodes de création de profils prédéfinis suivent toutes ce modèle.

Sinon, vous pouvez créer un profil qui correspond à un fichier multimédia existant à l’aide de la méthode Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync. Ou bien, si vous avez une idée précise des paramètres d’encodage que vous voulez utiliser, vous pouvez créer un objet Windows.Media.MediaProperties.MediaEncodingProfile et compléter les détails du profil.

4. Transcoder le fichier

Pour transcoder le fichier, créez un objet MediaTranscoder et appelez la méthode MediaTranscoder.PrepareFileTranscodeAsync. Transmettez le fichier source, le fichier de destination et le profil d’encodage. Ensuite, appelez la fonction TranscodeAsync sur l’objet PrepareTranscodeResult qui a été renvoyé par l’opération de transcodage asynchrone. Vous pouvez également créer des fonctions pour gérer les erreurs, la progression et la finalisation de l’opération asynchrone.

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

La méthode PrepareFileTranscodeAsync est asynchrone. Le transcodage peut ainsi se dérouler en arrière-plan sans nuire à la réactivité de l’interface utilisateur.

Vous devez également mettre à jour l’interface utilisateur et traiter les erreurs qui surviennent.

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] + "%";
};

Récapitulatif

L’exemple de code suivant présente la séquence d’appels complète de l’opération de transcodage.

En premier lieu, le code permettant d’ouvrir et enregistrer le fichier.

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

Ensuite, le code permettant de transcoder le fichier.

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

Enfin, le code permettant de gérer la progression, les erreurs et la finalisation du transcodage.

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] + "%";
};