0

0

JavaScript怎样操作摄像头_JavaScript中getUserMedia API如何使用

狼影

狼影

发布时间:2025-12-27 20:35:33

|

489人浏览过

|

来源于php中文网

原创

javascript通过mediadevices.getusermedia()获取摄像头权限并获取视频流,需在https或localhost安全上下文中调用;成功后将mediastream赋给video.srcobject实时显示;不再使用时应遍历track.stop()释放资源;需捕获notallowederror、notfounderror等错误并提示用户。

javascript怎样操作摄像头_javascript中getusermedia api如何使用

JavaScript 通过 MediaDevices.getUserMedia() API 获取用户授权并访问摄像头(和麦克风),这是 Web 实现实时音视频采集的核心接口。关键在于正确请求权限、处理媒体流、绑定到 HTML 元素显示,并妥善管理生命周期。

获取摄像头权限并获取视频流

调用 navigator.mediaDevices.getUserMedia(),传入约束对象指定需要视频(可选音频)。该方法返回 Promise,成功后得到 MediaStream 对象:

  • 只启用摄像头:{ video: true }
  • 同时启用摄像头和麦克风:{ video: true, audio: true }
  • 指定分辨率等高级约束(如 { video: { width: { ideal: 1280 }, height: { ideal: 720 } } }

注意:必须在安全上下文(https://localhost)中运行,否则浏览器会拒绝调用。

将视频流显示在页面上

拿到 MediaStream 后,赋值给 <video></video> 元素的 srcObject 属性即可实时播放:

立即学习Java免费学习笔记(深入)”;

Clips AI
Clips AI

自动将长视频或音频内容转换为社交媒体短片

下载
const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
  })
  .catch(err => {
    console.error('访问摄像头失败:', err.name, err.message);
  });

无需再用 URL.createObjectURL()(旧写法已废弃),现代浏览器直接支持 srcObject

停止摄像头(释放资源)

不再需要视频流时,应主动停止所有轨道,避免持续占用摄像头、耗电或影响其他应用:

  • 遍历 stream.getTracks(),对每个 MediaStreamTrack 调用 .stop()
  • 常见做法:stream.getTracks().forEach(track => track.stop());
  • 也可设 video.srcObject = null,但不释放底层设备,推荐显式 stop

例如在组件卸载、切换页面或用户点击“关闭摄像头”时执行。

处理常见错误与兼容性

用户拒绝权限、设备不可用、不支持 HTTPS 等都会触发 Promise reject。常见错误类型包括:

  • NotAllowedError:用户点击了“拒绝”或浏览器自动阻止(如 iframe 无用户手势)
  • NotFoundError:未检测到可用摄像头
  • NotReadableError:摄像头被其他程序占用
  • SecurityError:非安全上下文(HTTP 非 localhost)

建议在 catch 中根据 err.name 给出明确提示,并引导用户检查设置或刷新页面。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

252

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1008

2024.03.01

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

203

2025.12.04

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1824

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

594

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2341

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.19

promise的用法
promise的用法

“promise” 是一种用于处理异步操作的编程概念,它可以用来表示一个异步操作的最终结果。Promise 对象有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。Promise的用法主要包括构造函数、实例方法(then、catch、finally)和状态转换。

333

2023.10.12

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

4

2026.03.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.8万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.3万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号