HTML如何调用摄像头？getUserMedia怎么配合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);   });

上面这段代码的意思是：尝试获取摄像头视频流，并把它显示在一个

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

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 中加载的页面如果没有特定权限，可能无法调用摄像头。

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