다음을 통해 공유

카메라에서 비디오를 미리 보는 방법(HTML)

  • 아티클

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

카메라를 <video> 태그에 연결하여 동영상을 미리 볼 수 있습니다.

참고  이 항목에서는 카메라를 HTML5 동영상 컨트롤과 프로그래밍 방식으로 연결하는 방법에 대해 설명합니다. CameraCaptureUI("카메라 선택기")에 대해서는 설명하지 않습니다. 또한 이 항목은 특별히 JavaScript로 작성된 Windows 런타임 앱에 적용됩니다. C++, C# 또는 Visual Basic으로 작성한 Windows 런타임 앱은 다른 API를 사용합니다.

 

사전 요구 사항

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

지침

단계 1: 앱 매니페스트에 장치 접근 권한 값 설정

웹캠에 액세스할 수 있으려면 앱에서 먼저 앱 매니페스트에 해당 DeviceCapability를 포함해야 합니다.

  1. Microsoft Visual Studio의 솔루션 탐색기에서 package.appxmanifest 항목을 두 번 클릭하여 응용 프로그램 매니페스트 디자이너를 엽니다.
  2. 접근 권한 값을 클릭합니다.
  3. 웹캠의 확인란을 선택합니다.

단계 2: 코드 추가

웹캠 동영상 미리 보기에 동영상 태그를 사용할 수 있습니다.

<script type="text/javascript">
   function init(){
      var mediarec = new Windows.Media.MediaRecorder();
      var opInitializeRecorder = mediarec.initializeAsync(null);
      opInitializeRecorder.start();
   }

   function preview(){  
      var myVideo = document.getElementById("videoTag1");
      myVideo.src = URL.createObjectURL(mediarec);
      myVideo.play();
   }
</script>

관련 항목

미디어 캡처 샘플