빠른 시작: 카메라 캡처 UI를 사용하여 사진 또는 동영상 캡처(HTML)

Applies to Windows only

이 항목에서는 포함되거나 연결된 카메라에서 사진이나 비디오를 캡처하는 가장 간단한 방법인 CameraCaptureUI API를 사용하는 방법을 보여 줍니다. 이 API에서는 카메라 UI를 표시하는 전체 화면 대화 상자를 시작하며 한 번 정도의 메서드 호출로 사진이나 비디오를 캡처할 수 있습니다.

다른 방법으로 CameraCaptureUI 클래스가 제공하는 것을 사용하지 않고 고유한 사용자 인터페이스를 만들려면 MediaCapture를 사용해야 합니다. 자세한 내용은 빠른 시작: MediaCapture API를 사용하여 비디오 캡처를 참조하세요.

목표: 웹캠에서 사진 또는 비디오를 캡처합니다.

사전 요구 사항

JavaScript와 Windows 8에 설치되는 Microsoft Visual Studio에 대해 잘 알고 있어야 합니다.

완료 시간: 20 분.

지침

1. Visual Studio를 엽니다.

Visual Studio의 인스턴스를 엽니다.

2. 새 프로젝트 만들기

새 프로젝트 대화 상자에서 JavaScript 프로젝트 유형으로 새 응용 프로그램을 선택합니다.

3. 앱 JavaScript 및 HTML 삽입

Default.html 파일을 열고 이 파일에 다음 HTML을 복사하여 원래 내용을 대체합니다.


<!DOCTYPE html>
<html>
<head>   
   <title>WinWebApp1</title>
   <!-- WinJS references -->
   <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
   <script src="/winjs/js/base.js"></script>
   <script src="/winjs/js/wwaapp.js"></script>
   <!-- WinWebApp1 references -->
   <link rel="stylesheet" href="/css/default.css" />
    
   <script type = "text/javascript" >

   // Takes a photo using the default JPEG format.
   function takepicture() {
      var captureUI = new Windows.Media.Capture.CameraCaptureUI();
      captureUI.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).then(function (capturedItem) {
         if (capturedItem) {
             document.getElementById("message").innerHTML = "User captured a photo."
         }
         else {
             document.getElementById("message").innerHTML = "User didn't capture a photo."
         }
      });
   }
   </script>
</head>
<body>
   <input type="button" onclick="takepicture()" value="Take a Picture" /><br />
   <span id="message"></span>
</body>
</html>


4. 웹캠 기능 선언

응용 프로그램 매니페스트의 디자이너를 사용하여 웹캠 기능을 추가합니다. 기능 탭을 선택한 다음 목록에서 웹캠을 선택합니다.

5. 앱 빌드

빌드 > 솔루션 빌드를 클릭하여 프로젝트를 빌드합니다.

6. 앱 테스트

  1. 디버그 > 디버깅 시작을 선택하여 솔루션을 테스트합니다.
  2. 사진 찍기 단추를 클릭하여 사진을 찍습니다.

요약

기본 설정을 사용하여 사진을 찍으면 됩니다. 다른 형식 또는 가로 세로 비율을 지정하거나 비디오를 녹화할 수도 있습니다.

  • 가로 세로 비율 4:3의 PNG 형식으로 사진을 캡처하려면 앱에 전달하는 코드에서 captureFileAsync에 대한 호출 위에 다음 코드를 삽입합니다.
    
    captureUI.photoCaptureSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
    captureUI.photoCaptureSettings.croppedAspectRatio = {width:4, height:3};
    
    
    

관련 항목

빠른 시작: MediaCapture API를 사용하여 비디오 캡처
미디어 캡처 샘플

 

 

표시:
© 2014 Microsoft