通过 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",多个以逗号分隔。
  • 重启后生效。

相关资源

  • MediaDevices.getUserMedia()
  • getUserMedia() in chrome 47 without using https

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

`MediaDevices.getUserMedia` `undefined` 的问题相关推荐

  1. chrome 报错 navigator.mediaDevices is undefined

    what?chrome 会报错?你代码写错了把! chrome 报错 navigator.mediaDevices is undefined 最近在开发一个摄像头项目(多人会议,需要摄像头~~).然后 ...

  2. H5通过navigator.mediaDevices.getUserMedia调用手机摄像头

    navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能.打开getUserMedia文档,链接如下: https://d ...

  3. uniapp调用手机摄像头_HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题...

    navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能.打开getUserMedia文档,链接如下: https://d ...

  4. MediaDevices html5,HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头

    HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头 发布时间:2021-05-23 15:03:11 来源:亿速云 阅读:76 作者:小新 这篇文章 ...

  5. MediaDevices html5,HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题

    .kind === 'videoinput') { carema.push(deviceInfos.deviceId) } } deviceInfoId = carema[后置位置]; } var c ...

  6. Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能

    目录 前言 API `MediaDevices.getUserMedia()` 拍照功能实例 完整代码 实现效果 录像功能实例 完整代码 实现效果 总结 前言 最近在做开源实例: Vue.js 实战系 ...

  7. 前端使用navigator.mediaDevices.getUserMedia和window.MediaRecorder实现调用摄像头录制视屏

    前端使用navigator.mediaDevices.getUserMedia和window.MediaRecorder实现调用摄像头录制视屏 一.navigator.mediaDevices.get ...

  8. H5部署后navigator获取不到mediaDevices问题处理(navigator.mediaDevices为undefined)

    问题产生 最近在开发过程中,有一个具体需要要使用摄像头内嵌到h5页面中实现拍照效果,相当于变相通过还H5调原生拍照.摄像等效果. 在这个过程中发现在开发环境时,各种访问媒体设备都没有问题,但是当部署到 ...

  9. 微信IOS navigator.getUserMedia undefined

    估计跟IOS的微信浏览器有关 https://caniuse.com/#search=getUserMedia 点击打开链接

最新文章

  1. C# DataSet与DataTable的区别和用法
  2. 芯片项目烂尾怎么办?国家发改委回应了!
  3. jconsole工具使用----jvm内存泄漏问题
  4. 【 Verilog HDL 】函数(function)与任务(task)简单介绍
  5. 理解 JavaScript 作用域和作用域链
  6. MySQL - 库表设计之IP和TIMESTAMP的处理
  7. Mysql数据库大表归档操作
  8. Design layer interface的设计与实现
  9. javasript --- 一个日期规范(x秒前,x分前...)
  10. vue 学习之路 —— 图片的引入
  11. VS2008 JS脚本调试总是调试旧代码 真不知道怎么回事?谁能帮帮我呀!
  12. Arm学习总结之 32位和64位寄存器
  13. 【Absible学习】Ansible普通用户sudo执行指令
  14. mysql格式化11位时间戳_格式化MYSQL时间戳函数FROM_UNIXTIME
  15. OFFICE技术讲座:段落的行是如何布局不同对齐方式的
  16. t470键盘拆解_张大妈 ThinkPad T470p 首篇 开箱拆机晒物
  17. macos复制粘贴快捷键 快速_苹果MAC系统复制粘贴快捷键是什么?
  18. 基础知识(五)Blend2015 具有强大的组合功能,即合并功能。
  19. python 椭圆曲线加法_椭圆曲线上点的运算
  20. CVPR2021目标检测方向论文

热门文章

  1. python 操作 表格
  2. 【WPF】右键菜单ContextMenu可点击区域太小的问题
  3. Spring 嵌套方法AOP不生效问题
  4. Django - Python3 常用命令
  5. 普及组模板——线性筛素数
  6. LintCode Python 简单级题目 96.链表划分
  7. basepath的作用 (转)
  8. 九、oracle 事务
  9. NavReady的使用
  10. MPlayer1.1.1移植记录