Quickstart: capturing a photo or video using the camera dialog (Windows Store apps using JavaScript and HTML) (Windows)

5 out of 8 rated this helpful - Rate this topic

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

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 Express 2012 for Windows 8 installed on Windows 8.

Time to complete: 20 minutes.

Instructions

1. Open Visual Studio Express 2012 for Windows 8

Open an instance of Visual Studio Express 2012 for Windows 8.

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

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

Choose Debug > Start Debugging to test the solution.
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.