How to preview video from a webcam (Windows Store apps using JavaScript and HTML)

[This topic is featured in Develop great apps for Windows 8.]

You can associate a webcam with a <video> tag to preview the video.

Note  This topic describes how to programmatically associate the camera with the HTML5 video control. It does not describe the CameraCaptureUI ("camera picker"). Also, this topic applies specifically to Windows Store apps using JavaScript. Windows Store apps built for Windows using C++, C#, or Visual Basic use a different API.

Prerequisites

This topic assumes that you can create a basic Windows Store app built for Windows using JavaScript that uses the Windows Library for JavaScript template. For help creating your first app, see Create your first Windows Store app using JavaScript.

Instructions

Step 1: Set the device capability in the app manifest

To enable webcam access, the apps should first include the corresponding DeviceCapability in the app manifest.

1. In Microsoft Visual Studio Express 2012 for Windows 8, open the designer for the application manifest, by double-clicking on the package.appxmanifest item in Solution Explorer
2. Click on the Capabilities.
3. Check the box for Webcam.

Step 2: Add the code

The video tag can be used for Webcam video preview.

<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>

Related topics

Media Capture Sample

Build date: 11/29/2012