빠른 시작: MediaCapture API를 사용하여 동영상 캡처
[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]
이 항목에서는 Windows.Media.Capture API를 사용하여 동영상을 파일에 캡처하는 방법을 보여 줍니다. Windows.Media.Capture API를 사용하여 비동기 캡처 작업을 제어하고, 인코딩 프로필을 선택하고, 결과 동영상을 파일로 전송할 수 있습니다.
JavaScript로 작성한 Windows 런타임 앱에서 미디어를 캡처하는 다른 예는 미디어 캡처 샘플(영문)을 참조하세요.
목표: 이 자습서에서는 Windows.Media.Capture API를 사용하여 동영상을 캡처하는 방법을 보여 줍니다.
사전 요구 사항
이 항목에서는 JavaScript로 작성한 기본 Windows 런타임 앱을 만들 수 있다고 가정합니다. 첫 번째 앱을 만드는 자세한 내용은 JavaScript를 사용하여 첫 번째 Windows 스토어 앱 만들기를 참조하세요.
지침
웹캠 접근 권한 값 선언
응용 프로그램 매니페스트의 디자이너를 사용하여 웹캠 접근 권한 값을 추가합니다. 접근 권한 값 탭을 선택한 다음 목록에서 웹캠을 선택합니다.
MediaCaptureSettings 초기화
MediaCaptureSettings 속성은 MediaCapture 개체의 구성 설정을 제공합니다. 다음 예와 같이 MediaCaptureInitializationSettings 클래스를 사용하여 이러한 속성을 초기화합니다.
// 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;
}
MediaCapture 개체 만들기
MediaCapture 개체에는 비디오를 캡처하는 데 필요한 메서드와 비동기 작업이 포함되어 있습니다.
oMediaCapture = new Windows.Media.Capture.MediaCapture();
MediaCapture 개체 초기화
MediaCapture.InitializeAsync 메서드를 사용하여 MediaCapture 개체를 초기화합니다. 기본적으로 InitializeAsync는 기본 비디오 캡처 장치를 사용하며 오디오 또는 비디오를 캡처합니다. 또는 고유한 MediaCaptureInitializationSettings 개체를 만들고 초기화한 다음 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);
}
인코딩 프로필 만들기
인코딩 프로필에는 대상 파일의 인코드 방법에 대한 모든 설정이 포함되어 있습니다. MediaProperties API에서는 MediaEncodingProfile 개체를 만드는 여러 옵션을 제공합니다.
Windows.Media.MediaProperties 네임스페이스는 미리 정의된 인코딩 프로필 집합을 제공합니다.
- AAC 오디오(M4A)
- MP3 오디오
- WMA(Windows Media 오디오)
- MP4 비디오(H.264 비디오 및 AAC 오디오)
- WMV(Windows Media 비디오)
이 목록의 처음 세 개 프로필에는 오디오만 포함되어 있습니다. 다른 두 프로필에는 비디오와 오디오가 포함되어 있습니다.
다음 코드는 MP4 비디오용 프로필을 만듭니다.
// Create a profile.
function createProfile() {
profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
}
정적 CreateMp4 메서드는 MP4 인코딩 프로필을 만듭니다. 이 메서드의 매개 변수는 비디오의 대상 해상도를 제공합니다. 이 경우 VideoEncodingQuality.HD720p는 초당 30 프레임 속도에서 1280 x 720 픽셀을 의미합니다. "720p"는 프레임당 720 프로그레시브 스캔 선을 나타냅니다. 미리 정의된 프로필을 만드는 다른 모든 메서드도 이 패턴을 따릅니다.
또는 MediaProperties.MediaEncodingProfile.CreateFromFileAsync 메서드를 사용하여 기존 미디어 파일과 일치하는 프로필을 만들 수 있습니다. 또는 원하는 인코딩 설정을 정확하게 알고 있는 경우 새 MediaProperties.MediaEncodingProfile 개체를 만들고 모든 프로필 세부 정보를 채울 수 있습니다.
녹화 시작
비디오를 파일에 캡처하기 시작하려면 캡처된 비디오에 사용할 파일을 만듭니다. 그런 다음 MediaEncodingProfile 및 대상 저장소 파일을 전달하여 StartRecordToStorageFileAsync 메서드를 호출합니다.
// 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);
} );
}
녹화 중지
비디오 캡처를 중지하려면 StopRecordAsync 메서드를 호출합니다.
// Stop the video capture.
function stopMediaCaptureSession() {
oMediaCapture.stopRecordAsync().then(function (result) {
}, errorHandler);
}
전체 예제
다음 예제에서는 동영상을 파일에 캡처하는 단계를 한데 모으는 방법을 보여 줍니다.
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);
}
MediaCapture 리소스 제대로 정리
경고
앱이 일시 중단되면 MediaCapture 개체 및 관련 개체를 제대로 종료하고 삭제해야 합니다. 그렇지 않으면 장치의 카메라에 액세스하는 다른 앱을 방해하여 앱의 사용자 환경에 부정적인 영향을 줄 수 있습니다.
Windows Phone에서는 oncheckpoint 앱 수명 이벤트에 대한 처리기에서 MediaCapture 리소스를 정리합니다. Windows에서는 SoundLevelChanged 이벤트를 사용하여 소리 수준이 음소거되었는지 확인합니다. 음소거된 경우 MediaCapture 리소스를 정리합니다. 이벤트가 다른 소리 수준을 나타내는 경우 해당 이벤트를 사용하여 리소스를 다시 만듭니다. 이 이벤트는 앱이 실행되는 동안 수동으로 소리를 음소거/음소거 해제하는 경우에도 코드를 트리거하지 않습니다. 따라서 이 이벤트는 휴대폰의 일시 중단 및 다시 시작과 동일한 프로세스를 효율적으로 제공합니다. Windows에서는 사용자가 현재 앱을 일시 중단하지 않고도 앱 간을 전환할 수 있기 때문에 이 이벤트가 필요합니다.
위의 참고에 있는 지침에서 설명한 대로 앱이 Windows Phone의 oncheckpoint 이벤트 또는 Windows의 SoundLevelChanged 상태인 경우 미디어 캡처 리소스를 정리해야 합니다. 좋은 방법 중 하나는 app.xaml.cs 파일에서 몇 가지 public 속성을 선언하여 MediaCapture 개체 및 앱이 현재 동영상을 녹화하는지 미리 보고 있는지를 나타내는 부울을 저장하는 것입니다. 그런 다음 녹화 또는 미리 보기가 진행 중인 경우 중지하는 함수를 만들고 MediaCapture 개체의 close 메서드를 호출하여 null로 설정합니다. 다음 코드에서는 이 메서드의 예제 구현을 보여 줍니다.
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);
}
마지막으로 다음 코드를 oncheckpoint 이벤트 처리기에 추가합니다. 정리 메서드를 호출하기 전에 지연 시간을 갖는 것이 중요합니다. 이렇게 하면 시스템에서 앱을 일시 중단하기 전에 메서드를 완료할 수 있습니다.
app.oncheckpoint = function (args) {
args.setPromise(
cleanupCaptureResources()
);
};
요약
이 항목에서는 MediaCapture 클래스를 사용하여 동영상을 캡처하는 방법을 보여 줍니다.
관련 항목
로드맵
JavaScript를 사용하는 Windows 스토어 앱용 로드맵
샘플
작업
빠른 시작: 카메라 대화 상자를 사용하여 사진 또는 동영상 캡처
참조
다른 리소스