Guida introduttiva: Codifica intermedia di file video (HTML)

Articolo
02/12/2016

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

L'API Windows.Media.Transcoding esegue la codifica intermedia di un file video da un formato a un altro.

Per codifica intermedia si intende la conversione di un file multimediale digitale, ad esempio un file video o audio, da un formato a un altro. Tale operazione implica in genere la decodifica e la ricodifica del file. Puoi ad esempio convertire un file Windows Media in formato MP4 per poterlo riprodurre su un dispositivo portatile che supporta il formato MP4. Puoi anche convertire un file video ad alta definizione in una risoluzione inferiore. In questo caso il file ricodificato può usare lo stesso codec del file originale, ma avere un profilo di codifica diverso.

Questa esercitazione mostra come eseguire la codifica intermedia di un file video nel formato MP4. Descrive come usare la classe FileOpenPicker per aprire un file video dal sistema e quindi la classe MediaTranscoder per eseguire la codifica intermedia del file video nel formato MP4. Spiega infine come usare la classe FileSavePicker per salvare il nuovo file codificato.

Il codice completo di questa Guida introduttiva è riportato in fondo a questa esercitazione. Aggiungi questo codice al file Program.js.

Per un altro esempio di codifica intermedia in un'app di Windows Runtime in JavaScript, vedi l'Esempio di codifica intermedia di un file multimediale.

Prerequisiti

Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Runtime in JavaScript. Se hai bisogno di aiuto per creare la tua prima app, vedi Creare la prima app di Windows Store in JavaScript.

Istruzioni

1. Creare un nuovo progetto

Per iniziare, crea un app di Windows Store vuota in JavaScript. Per ulteriori informazioni, vedi Creare la prima app di Windows Store scritta in JavaScript.

2. Selezionare un file di origine e creare un file di destinazione

Usa la classe FileOpenPicker per selezionare un file di origine e la classe FileSavePicker per creare il file di destinazione. Imposta le proprietà SuggestedStartLocation e FileTypeFilter in FileOpenPicker. Nell'oggetto FileSavePicker imposta le proprietà SuggestedStartLocation, DefaultFileExtension, SuggestedFileName e FileTypeChoices. Nota che questa funzione chiama una funzione denominata TranscodeFile. Si tratta di una funzione definita dall'utente che esegue l'operazione di codifica intermedia. Creeremo questa funzione nel prossimo passaggio.

L'app di Windows Phone Store in JavaScript deve usare PickSingleFileAndContinue anziché 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. Creare un profilo di codifica

Il profilo di codifica contiene tutte le impostazioni relative alla modalità di codifica del file di destinazione. Il profilo include il maggior numero di opzioni disponibili durante la codifica intermedia di un file.

Lo spazio dei nomi Windows.Media.MediaProperties include un set di profili di codifica predefiniti:

Audio AAC (M4A)
Audio MP3
Windows Media Audio (WMA)
Video MP4 video (combinazione di video H.264 e audio AAC)
Windows Media Video (WMV)

I primi tre profili dell'elenco contengono solo audio. Gli altri due contengono invece anche video.

Il codice seguente consente di creare un profilo per il video MP4.

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

Il metodo CreateMp4 statico crea il profilo di codifica MP4. Il parametro di questo metodo specifica la risoluzione di destinazione del video. In questo caso VideoEncodingQuality.hd720p indica 1280 x 720 pixel a 30 fotogrammi al secondo. "720p" indica 720 linee di scansione progressiva per fotogramma. Gli altri metodi per la creazione di profili predefiniti sono tutti basati su questo schema.

In alternativa, puoi creare un profilo corrispondente a un file multimediale esistente usando il metodo Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync. Se poi conosci con esattezza le impostazioni di codifica da usare, puoi creare un nuovo oggetto Windows.Media.MediaProperties.MediaEncodingProfile e inserirvi i dettagli del profilo.

4. Eseguire la codifica intermedia del file

Per eseguire la codifica intermedia del file, crea un nuovo oggetto MediaTranscoder e chiama il metodo MediaTranscoder.PrepareFileTranscodeAsync. Passa il file di origine, il file di destinazione e il profilo di codifica. Chiama quindi la funzione TranscodeAsync sull'oggetto PrepareTranscodeResult restituito dall'operazione di codifica intermedia asincrona. Puoi anche creare funzioni per gestire errori, stato e completamento dell'operazione asincrona.

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

Il metodo PrepareFileTranscodeAsync è asincrono. In questo modo la codifica intermedia viene eseguita in background e l'interfaccia utente rimane disponibile.

Devi inoltre aggiornare l'interfaccia utente e gestire eventuali errori.

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

Riepilogo

L'esempio di codice seguente mostra la sequenza completa di chiamate per l'operazione di codifica intermedia.

Prima di tutto, ecco il codice per aprire e salvare il file.

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

Quindi, ecco il codice per la codifica intermedia del file.

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

Infine, ecco il codice per gestire stato, errori e completamento della codifica intermedia.

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