快速入门：使用相机捕获 UI 捕获照片或视频 (HTML)

项目
02/12/2016

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

本主题为你显示了通过使用 CameraCaptureUI API，从你的嵌入或附加相机中捕获照片或视频的最简单方法。此 API 启动了显示相机 UI 的全屏对话框，并让你至少使用一种调用方法捕获照片或视频。

作为替代方法，如果你希望创建自己的用户界面而不是使用 CameraCaptureUI 类提供的用户界面，你应该使用 MediaCapture。有关详细信息，请参阅快速入门：使用 MediaCapture API 捕获视频。

目标: 从摄相机捕获照片或视频。

先决条件

你应当熟悉 JavaScript，并在 Windows 8 上安装了 Microsoft Visual Studio。

完成所需时间: 20 分钟.

说明

1. 打开 Visual Studio

打开 Visual Studio 的一个实例。

2. 创建新项目

在“新建项目”对话框中，从 JavaScript 项目类型中选择一个空白应用程序。

3. 插入应用 JavaScript 和 HTML

打开你的文件 Default.html，将下面的 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. 声明摄相机功能

使用应用程序清单设计器文件添加摄像机功能。选择“功能”****选项卡，然后从列表中选择“网络摄像机”。

5. 生成应用

选择“生成”****>“生成解决方案”以生成项目。

6. 测试应用

选择“调试”****>“启动调试”测试该解决方案。
单击“拍照”****按钮拍摄照片。

摘要

你可使用默认设置拍摄照片。你还可指定其他格式或纵横比，或者录制视频。

若要以 PNG 格式捕获纵横比为 4:3 的照片，请在你粘贴到应用中的代码中，将此代码插入到 captureFileAsync 调用的上方。

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

通过