讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript媒体设备如何访问_怎样使用摄像头和麦克风【教程】

陌辰酱_8910

陌辰酱_8910

发布时间:2026-02-01 18:36:39

|

605人浏览过

|

来源于php中文网

原创

navigator.mediaDevices.getUserMedia()调用需HTTPS(localhost除外)、用户授权、正确Promise处理;参数为{video: true}等对象;流需赋给video.srcObject并加autoplay;设备变更需监听devicechange事件。

javascript媒体设备如何访问_怎样使用摄像头和麦克风【教程】

浏览器里调用摄像头和麦克风,核心就靠 navigator.mediaDevices.getUserMedia(),但它不是“一调就通”,权限、设备状态、HTTPS 环境、Promise 拒绝逻辑都得对上,否则白写。

为什么 getUserMedia() 直接报错或静默失败

最常见原因是当前页面没走 HTTPS(本地 localhost 除外),或者用户点了“拒绝”后没重试逻辑。Chrome/Firefox 在非安全上下文里会直接拒绝 Promise,连权限弹窗都不出现。

  • 检查地址栏:必须是 https:// 或 http://localhost(127.0.0.1 不行)
  • 确保没在 iframe 里调用且该 iframe 没加 allow="camera;microphone" 属性
  • 如果之前拒绝过,浏览器不会再次弹窗,需手动进设置里重置站点权限(Chrome 地址栏右侧锁图标 → “网站设置” → 权限项)
  • getUserMedia() 返回的是 Promise,一定要用 .catch() 捕获拒绝,不能只写 .then()

怎样只开摄像头、只开麦克风、或两者都开

参数是对象,键名固定为 video 和 audio,值为布尔或配置对象。布尔值最简,但实际项目中常要控制分辨率、帧率、是否强制前置摄像头等。

  • 仅摄像头:{ video: true }
  • 仅麦克风:{ audio: true }
  • 两者都开:{ video: true, audio: true }
  • 指定前置摄像头(移动端常用):{ video: { facingMode: "user" } }
  • 限制分辨率:{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } }
  • 禁用音频回声消除(某些耳机场景需要):{ audio: { echoCancellation: false } }

注意:部分约束(如 facingMode)在桌面 Chrome 上可能被忽略,优先在真机调试。

Java Maven Common
Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

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

拿到媒体流后怎么显示在页面上

流对象(MediaStream)本身不可见,必须绑定到 <video> 元素的 srcObject 属性才能播放。别用已废弃的 createObjectURL()。

const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream; // 关键:直接赋值流对象
  })
  .catch(err => console.error('访问失败:', err.name)); // err.name 可能是 "NotAllowedError" 或 "NotFoundError"
  • video 元素需加 autoplay 属性,否则即使有流也不会自动播放
  • 移动端 Safari 要求用户手势触发(比如点击按钮后才调用 getUserMedia),否则静音且不播
  • 流对象可多次复用,但关闭时应调用 stream.getTracks().forEach(t => t.stop()),避免后台持续采集

如何检测设备列表变化(插拔摄像头/麦克风)

用户热插拔设备时,页面默认不会感知。需监听 navigator.mediaDevices 的 devicechange 事件,并主动重新枚举设备。

  • 首次加载后立即调用 navigator.mediaDevices.enumerateDevices() 获取初始设备列表
  • 监听事件:navigator.mediaDevices.addEventListener('devicechange', () => { /* 再次 enumerateDevices */ })
  • 注意:该事件在 Firefox 中需用户已授予权限后才触发;Safari 17+ 才支持
  • 枚举返回的每个 MediaDeviceInfo 对象含 deviceId、kind("videoinput"/"audioinput")、label(可能为空,需先获权才填充)

设备 label 为空是常态,别依赖它做 UI 显示;真正切换设备时,应重新调用 getUserMedia() 并传入目标 deviceId。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2746

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5399

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3847

2026.03.24

php中foreach用法
php中foreach用法

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

778

2025.12.04

promise的用法
promise的用法

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

4500

2023.10.12

html文本框类型介绍
html文本框类型介绍

html文本框类型有单行文本框、密码文本框、数字文本框、日期文本框、时间文本框、文件上传文本框、多行文本框等等。详细介绍:1、单行文本框是最常见的文本框类型,用于接受单行文本输入,用户可以在文本框中输入任意文本,例如用户名、密码、电子邮件地址等;2、密码文本框用于接受密码输入,用户在输入密码时,文本框中的内容会被隐藏,以保护用户的隐私;3、数字文本框等等。

4043

2023.10.12

http500解决方法
http500解决方法

http500解决方法有检查服务器日志、检查代码错误、检查服务器配置、检查文件和目录权限、检查资源不足、更新软件版本、重启服务器或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3543

2023.11.09

http请求415错误怎么解决
http请求415错误怎么解决

解决方法:1、检查请求头中的Content-Type;2、检查请求体中的数据格式;3、使用适当的编码格式;4、使用适当的请求方法;5、检查服务器端的支持情况。更多http请求415错误怎么解决的相关内容,可以阅读下面的文章。

894

2023.11.14

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

0

2026.10.22

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn