How to preview video from a camera (HTML)

  • Article

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

You can associate a camera 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 Runtime apps using JavaScript. Windows Runtime apps using C++, C#, or Visual Basic use a different API.

 

Prerequisites

This topic assumes that you can create a basic Windows Runtime app using JavaScript. 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, 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>

Media Capture Sample