手把手教你用HTML的getUserMedia调用摄像头

想在网页上实现炫酷的视频采集功能吗？本文将手把手教你如何使用 HTML 调用摄像头！通过浏览器提供的 `getUserMedia API`，配合 HTML 的 `

调用摄像头在网页中实现视频采集功能主要依赖于 getUserMedia API 和 HTML 的

调用摄像头在网页中实现视频采集功能，主要依赖于浏览器提供的 getUserMedia API。这个 API 可以通过 JavaScript 获取用户的媒体设备（比如摄像头和麦克风），然后配合 HTML 中的 标签进行实时展示。

1. 基本使用：如何调用摄像头

要调用摄像头，首先需要使用 navigator.mediaDevices.getUserMedia() 方法。它接收一个约束对象作为参数，用来指定请求哪种类型的媒体流。

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(stream) {
    // 成功获取流后，可以将其绑定到 video 元素上显示
    const video = document.querySelector('video');
    video.srcObject = stream;
  })
  .catch(function(error) {
    console.error('无法获取摄像头', error);
  });

上面这段代码的意思是：尝试获取摄像头视频流，并把它显示在一个 标签里。如果用户拒绝权限或者没有摄像头，就会触发 .catch() 分支。

2. 配合 HTML 使用：video 标签的作用

HTML 中最常用的就是 标签来展示摄像头的画面。你只需要定义一个空的标签即可：

<video autoplay></video>

注意加上 autoplay 属性，否则有些浏览器不会自动播放流内容。

JavaScript 拿到流之后，通过 srcObject 把流绑定到 上，这样就能看到实时画面了。不需要额外写播放逻辑，因为流一旦接入就会自动开始。

3. 添加一些实用控制：比如关闭摄像头

有时候你想让用户能“关闭”摄像头，这时候可以通过访问流中的轨道并停止它们来实现。

let stream;

navigator.mediaDevices.getUserMedia({ video: true })
  .then(function(s) {
    stream = s;
    const video = document.querySelector('video');
    video.srcObject = stream;
  });

function stopCamera() {
  if (stream) {
    stream.getTracks().forEach(track => track.stop());
  }
}

这样你可以加一个按钮，点击时执行 stopCamera() 就能关闭摄像头了。

4. 注意事项与兼容性

• HTTPS 环境：大多数现代浏览器要求页面必须运行在 HTTPS 下才能访问摄像头。
• 用户授权：第一次调用时会弹出权限提示，用户可以选择允许或拒绝。
• 移动端支持：主流浏览器基本都支持 getUserMedia，但在某些老旧设备或低版本浏览器中可能会有问题。
• 安全限制：iframe 中加载的页面如果没有特定权限，可能无法调用摄像头。

基本上就这些。整个流程不算复杂，但要注意处理错误和权限问题，否则容易出现黑屏或静音等现象。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《手把手教你用HTML的getUserMedia调用摄像头》文章吧，也可关注golang学习网公众号了解相关技术文章。