通过

如何通过相机预览视频 (HTML)

  • 项目

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

你可将相机与 <video> 标记关联以预览视频。

注意  本主题介绍了如何以编程方式将相机与 HTML5 视频控件相关联。它没有介绍 CameraCaptureUI（“相机选取器”）。另外，本主题尤其适用于使用 JavaScript 的 Windows 运行时应用。使用 C++、C# 或 Visual Basic 的 Windows 运行时应用使用不同的 API。

 

先决条件

本主题假设你可以创建使用 JavaScript 的基本的 Windows 运行时应用。有关创建你的第一个应用的帮助，请参阅创建你的第一个使用 JavaScript 的 Windows 应用商店应用。

说明

步骤 1: 在应用部件清单 (manifest) 中设置设备功能

若要启用摄像机访问，应用应该首先在应用部件清单 (manifest) 中包含相应的 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>

相关主题

媒体捕获示例