HTML如何调用摄像头？getUserMedia怎么配合HTML？-html教程-PHP中文网

HTML如何调用摄像头？getUserMedia怎么配合HTML？

穿越時空

发布： 2025-06-13 15:21:01

原创

681人浏览过

调用摄像头在网页中实现视频采集功能主要依赖于 getusermedia api 和 html 的 <video> 标签。1. 调用摄像头使用 navigator.mediadevices.getusermedia() 方法，传入指定约束对象，成功后将流绑定到 video 元素上展示；2. html 中通过添加 autoplay 属性的 <video> 标签配合 javascript 显示实时画面；3. 可通过停止流中的轨道实现关闭摄像头功能；4. 注意事项包括需运行在 https 环境、用户授权机制、移动端兼容性及 iframe 中的安全限制。整个流程需妥善处理错误与权限以确保功能正常。

HTML如何调用摄像头？getUserMedia怎么配合HTML？

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

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);
  });

登录后复制

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

立即学习“前端免费学习笔记（深入）”；

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

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

Alkaid.art

专门为Phtoshop打造的AIGC绘画插件

153

查看详情

<video autoplay></video>

登录后复制

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

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

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() 就能关闭摄像头了。