Share via

Quickstart: capturing a photo or video using the camera capture UI (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]

This topic shows you the simplest way to capture a photo or video from your embedded or attached camera, by using the CameraCaptureUI API. This API launches a full-screen dialog that presents a camera UI, and enables you to capture a photo or video with as little as one method call.

As an alternative, if you want to create your own user interface rather than using the one that the CameraCaptureUI class provides, you should use MediaCapture. See Quickstart: Capturing video using the MediaCapture API for more information.

Objective: Capture a photo or video from a webcam.

Prerequisites

You should be familiar with JavaScript, and have Microsoft Visual Studio installed on Windows 8.

Time to complete: 20 minutes.

Instructions

1. Open Visual Studio

Open an instance of Visual Studio.

2. Create a new project

In the New Project dialog box, choose a blank application from the JavaScript project types.

3. Insert the app JavaScript and HTML

Open your file Default.html and copy the following HTML into this file (replacing its original contents).

<!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. Declare the webcam capability

Use the designer of the application manifest file to add the webcam capabilty. Select the Capabilities tab and then select Webcam from the list.

5. Build the app

Choose Build > Build Solution to build the project.

6. Test the app

  1. Choose Debug > Start Debugging to test the solution.
  2. Click the Take Picture button to take a picture.

Summary

You just took a picture using the default settings. You can also specify a different format or aspect ratio, or record a video.

  • To capture a photo with an aspect ration of 4:3 in the PNG format, insert this code above the call to captureFileAsync in the code you pasted into your app.

    captureUI.photoCaptureSettings.format = Windows.Media.Capture.CameraCaptureUIPhotoFormat.png;
captureUI.photoCaptureSettings.croppedAspectRatio = {width:4, height:3};

Quickstart: Capturing video using the MediaCapture API

Media Capture Sample