MediaDevices.getUserMedia` undefined 的问题

通过 MediaDevices.getUserMedia() 获取用户多媒体权限时,需要注意其只工作于以下三种环境:

  • localhost
  • 开启了 HTTPS 的域
  • 使用 file:/// 协议打开的本地文件

其他情况下,比如在一个 HTTP 站点上,navigator.mediaDevices 的值为 undefined

如果想要 HTTP 环境下也能使用和调试 MediaDevices.getUserMedia(),可通过开启 Chrome 的相应参数。

通过相应参数启动 Chrome

传递相应参数来启动 Chrome,以 http://example.com 为例,

 --unsafely-treat-insecure-origin-as-secure="http://example.com"

开启相应 flag

通过传递相应参数来启动 Chrome Insecure origins treated as secure flag 并填入相应白名单。

  • 打开 chrome://flags/#unsafely-treat-insecure-origin-as-secure
  • 将该 flag 切换成 enable 状态
  • 输入框中填写需要开启的域名,譬如 http://example.com",多个以逗号分隔。
  • 重启后生效。

相关资源

转载于:https://www.cnblogs.com/Wayou/p/using_MediaDevices_getUserMedia_wihtout_https.html

### 移动端 `navigator.mediaDevices.getUserMedia` 的使用方法及兼容性 #### 方法概述 在移动端通过 JavaScript API 访问摄像头和麦克风等媒体设备,主要依赖于 `navigator.mediaDevices.getUserMedia()` 函数。此函数返回一个 Promise 对象,在成功解析时会提供 MediaStream 实例作为参数传递给回调函数[^1]。 ```javascript // 请求访问用户的音视频流 navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function(stream) { // 处理成功的逻辑 let videoElement = document.querySelector('video'); videoElement.srcObject = stream; videoElement.play(); }).catch(function(err) { // 错误处理逻辑 console.error('获取媒体设备失败:', err); }); ``` #### 兼容性注意事项 不同移动操作系统及其浏览器版本对于 `getUserMedia` 支持程度有所差异: - **iOS 设备**:特别是针对苹果手机用户需要注意的是,当 iOS 版本低于 14.3 时,可能会遇到未定义对象的问题 (`undefined is not an object evaluating navigator.mediaDevices.getUserMedia`) 。因此建议开发者检测当前环境并给出相应的提示或降级方案[^2]。 - **前置权限请求**:为了避免某些情况下因延迟加载而导致的 bug ,可以考虑提前请求必要的权限。比如可以在进入特定界面之前就完成对麦克风或其他资源的授权操作[^3]。 #### 安全与隐私保护措施 考虑到安全性和用户隐私的重要性,现代浏览器通常会在调用此类敏感接口前弹窗询问用户是否允许授予相应权限。应用程序应当合理设计交互流程来引导用户做出选择,并妥善管理可能发生的拒绝情况下的后续行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值