언어: HTML | XAML

빠른 시작: 동영상 파일 코드 변환(HTML)

Applies to Windows and Windows Phone

Windows.Media.Transcoding API는 동영상 파일을 한 형식에서 다른 형식으로 코드 변환합니다.

코드 변환은 동영상 또는 오디오 파일과 같은 디지털 미디어 파일을 한 형식에서 다른 형식으로 변환하는 작업입니다. 이 작업은 일반적으로 파일을 디코드한 후 다시 인코드하여 수행됩니다. 예를 들어 MP4 형식을 지원하는 휴대용 장치에서 재생할 수 있도록 Windows Media 파일을 MP4로 변환할 수 있습니다. 또는 HD 동영상 파일을 저해상도로 변환할 수 있습니다. 이 경우 다시 인코딩된 파일은 원본 파일과 동일한 코덱을 사용할 수 있지만 다른 인코딩 프로필을 갖게 됩니다.

이 자습서에서는 동영상 파일을 MP4 형식으로 코드 변환하는 방법을 보여 줍니다. FileOpenPicker 클래스를 사용하여 시스템에서 동영상 파일을 연 다음 MediaTranscoder 클래스를 사용하여 동영상 파일을 MP4 형식으로 코드 변환하는 방법에 대해 설명합니다. 마지막으로, FileSavePicker 클래스를 사용하여 새로 인코드한 파일을 저장하는 방법에 대해 설명합니다.

이 빠른 시작의 전체 코드 목록은 이 자습서의 끝 부분에 나와 있습니다. 이 코드를 Program.js 파일에 추가합니다.

JavaScript를 사용하는 Windows 런타임 앱에서 코드 변환하는 다른 예는 미디어 코드 변환 샘플(영문)을 참조하세요.

사전 요구 사항

이 항목에서는 JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 스토어 앱 만들기를 참조하세요.

지침

1. 새 프로젝트 만들기

먼저 JavaScript를 사용하여 빈 Windows 스토어 앱을 만듭니다. 자세한 내용은 JavaScript를 사용하는 첫 번째 Windows 스토어 앱 만들기를 참조하세요.

2. 원본 파일 선택 및 대상 파일 만들기

FileOpenPicker 클래스를 사용하여 원본 파일을 선택하고 FileSavePicker 클래스를 사용하여 대상 파일을 만듭니다. FileOpenPicker에서 SuggestedStartLocationFileTypeFilter 속성을 설정합니다. FileSavePicker 개체에서SuggestedStartLocation, DefaultFileExtension, SuggestedFileNameFileTypeChoices 속성을 설정합니다. 이 함수는 TranscodeFile이라는 함수를 호출합니다. 이 함수는 코드 변환 작업을 수행하는 사용자 정의 함수입니다. 다음 단계에서는 이 함수를 만듭니다.

JavaScript로 작성한 Windows Phone 스토어 앱은 PickSingleFileAsync가 아닌 PickSingleFileAndContinue를 사용해야 합니다.


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. 인코딩 프로필 만들기

인코딩 프로필에는 대상 파일의 인코드 방법을 결정하는 설정이 포함되어 있습니다. 파일을 트랜스코딩하는 경우 여기서 가장 많은 옵션을 사용할 수 있습니다.

Windows.Media.MediaProperties 네임스페이스는 미리 정의된 인코딩 프로필 집합을 제공합니다.

  • AAC 오디오(M4A)
  • MP3 오디오
  • WMA(Windows Media 오디오)
  • MP4 동영상(H.264 동영상 및 AAC 오디오)
  • WMV(Windows Media 동영상)

이 목록의 처음 세 개 프로필에는 오디오만 포함되어 있습니다. 다른 두 프로필에는 동영상과 오디오가 포함되어 있습니다.

다음 코드는 MP4 동영상용 프로필을 만듭니다.


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


정적 CreateMp4 메서드는 MP4 인코딩 프로필을 만듭니다. 이 메서드의 매개 변수는 동영상의 대상 해상도를 제공합니다. 이 경우 VideoEncodingQuality.hd720p는 초당 30 프레임 속도에서 1280 x 720 픽셀을 의미합니다. "720p"는 프레임당 720 프로그레시브 스캔 선을 나타냅니다. 미리 정의된 프로필을 만드는 다른 모든 메서드도 이 패턴을 따릅니다.

또는 Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync 메서드를 사용하여 기존 미디어 파일과 일치하는 프로필을 만들 수 있습니다. 또는 원하는 인코딩 설정을 정확하게 알고 있는 경우 새 Windows.Media.MediaProperties.MediaEncodingProfile 개체를 만들고 프로필 세부 정보를 채울 수 있습니다.

4. 파일 코드 변환

파일을 트랜스코딩하려면 새 MediaTranscoder 개체를 만들고 MediaTranscoder.PrepareFileTranscodeAsync 메서드를 호출합니다. 원본 파일, 대상 파일 및 인코딩 프로필을 전달합니다. 그런 다음 비동기 코드 변환 작업에서 반환된 TranscodeAsync 개체의 PrepareTranscodeResult 함수를 호출합니다. 또한 비동기 작업의 오류, 진행률 및 완료를 처리하는 함수를 만들 수도 있습니다.


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


PrepareFileTranscodeAsync 메서드는 비동기 작업입니다. 이 메서드를 사용하면 UI가 응답하는 동시에 백그라운드에서 코드 변환을 수행할 수 있습니다.

또한 UI를 업데이트하고 발생하는 모든 오류를 처리해야 합니다.


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


요약

다음 코드 샘플은 코드 변환 작업의 전체 호출 시퀀스를 보여 줍니다.

먼저 파일을 열고 저장하는 코드입니다.


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


다음에는 파일을 트랜스코딩하는 코드입니다.


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


마지막으로 코드 변환 진행률, 오류 및 완료를 처리하는 코드입니다.


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


관련 항목

로드맵
JavaScript를 사용하는 Windows 스토어 앱용 로드맵
앱용 UX 디자인
멀티미디어 추가
샘플
미디어 코드 변환 샘플
Media Extension 샘플
실시간 통신 샘플
작업
동영상 파일을 자르는 방법
참조
Windows.Media
Windows.Media.MediaProperties
Windows.Media.Transcoding
MediaTranscoder
PrepareTranscodeResult
TranscodeAsync
다른 리소스
지원되는 오디오 및 동영상 형식
오디오 및 동영상 성능

 

 

표시:
© 2014 Microsoft