快速入門：使用相機擷取 UI 拍攝相片或影片 (HTML)

發行項
02/12/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

這個主題示範最簡單的方法，讓您利用 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. 測試應用程式

選取 [偵錯]**** > [開始偵錯]，開始測試方案。
按一下 [拍攝相片]****，開始拍照。

摘要

您剛才使用預設值拍攝相片。您也可以指定不同的格式或外觀比例，或者錄製視訊。

如果想拍攝外觀比例為 4:3 的 PNG 格式相片，將這個程式碼插在您之前貼入應用程式的程式碼中 captureFileAsync 的上方。

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

共用方式為