共用方式為

如何從相機預覽視訊 (HTML)

  • 發行項

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

您可以將相機與 <video> 標記建立關聯，以預覽視訊。

注意  這個主題說明如何以程式設計的方式，將相機與 HTML5 視訊控制項建立關聯。這個主題不會說明 CameraCaptureUI (「相機選擇器」)。此外，這個主題特別適用於使用 JavaScript 的 Windows 執行階段應用程式。使用 C++、C# 或 Visual Basic 的 Windows 執行階段應用程式會使用不同的 API。

 

先決條件

這個主題假設您可以使用 JavaScript 建立基本的 Windows 執行階段應用程式。如果建立您的第一個應用程式時需要協助，請參閱使用 JavaScript 建立您的第一個 Windows 市集應用程式。

指示

步驟 1: 在應用程式資訊清單中設定裝置功能

若要啟用網路攝影機存取，應用程式應該先在應用程式資訊清單中包含對應的 DeviceCapability。

  1. 在 Microsoft Visual Studio 中，按兩下 [方案總管] 中的 package.appxmanifest 項目，開啟應用程式資訊清單的設計工具
  2. 按一下 [功能]。
  3. 選取 [網路攝影機]**** 的方塊。

步驟 2: 新增程式碼

視訊標記可以用於預覽網路攝影機視訊。

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

相關主題

媒體擷取範例