通过 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` `undefined` 的问题的更多相关文章

  1. 录制用户的音频,视屏 navigator.mediaDevices.getUserMedia

    google 文档 HACKS 文档 相关代码 获取本地的音频 <input type="file" accept="audio/*" capture=& ...

  2. navigator.mediaDevices.getUserMedia

    navigator.mediaDevices.getUserMedia: 作用:为用户提供直接连接摄像头.麦克风的硬件设备的接口 语法: navigator.mediaDevices.getUserM ...

  3. javascript使用H5新版媒体接口navigator.mediaDevices.getUserMedia,做扫描二维码,并识别内容

    本文代码测试要求,最新的chrome浏览器(手机APP),并且要允许chrome拍照录像权限,必须要HTTPS协议,http不支持. 原理:调用摄像头,将摄像头返回的媒体流渲染到视频标签中,再通过ca ...

  4. 谷歌使用navigator.mediaDevices.getUserMedia 调用摄像头拍照功能,不兼容IE

    <template>     <div>       <!--canvas截取流-->       <canvas ref="canvas" ...

  5. MediaDevices.getUserMedia()

    MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道.此流可以包含一个视频轨道(来自硬件或 ...

  6. JavaScripts调用摄像头【MediaDevices.getUserMedia()】

    h5调用摄像头(允许自定义界面)[MediaDevices.getUserMedia()] <!DOCTYPE html> <html lang="en"> ...

  7. 手机调取摄像头问题(getUserMedia)

    先说坏消息,苹果机没法玩这个!!! 而且,必须拥有 https 的安全协议!!! 而安卓机想完成这个功能倒是很 easy 的,看一眼代码 主要传入三个参数,配置对象,成功,失败 var mediaOp ...

  8. 使用 getUserMedia API获取麦克风和相机等流媒体

    概览 mediaDevices 是 Navigator 对象的只读属性,一个单列对象,可以连接访问相机和麦克风,屏幕共享等媒体输入设备 方法 enumerateDevices 请求一个可用的媒体输入和 ...

  9. HTML5 录音的踩坑之旅

    开篇闲扯 前一段时间的一个案子是开发一个有声课件,大致就是通过导入文档.图片等资源后,页面变为类似 PPT 的布局,然后选中一张图片,可以插入音频,有单页编辑和全局编辑两种模式.其中音频的导入方式有两 ...

随机推荐

  1. Leecode_98_Validate_Binary_Search_Tree

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  2. Spring Cloud第四篇 | 客户端负载均衡Ribbon

    ​ 本文是Spring Cloud专栏的第四篇文章,了解前三篇文章内容有助于更好的理解本文: ​Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cl ...

  3. 重磅!普惠AI--华为云语音语义万次调用1元购,有奖问答@评论区等你来!【华为云技术分享】

    活动快速入口:https://activity.huaweicloud.com/language_speech_promotion0.html 语音交互与自然语言处理 语音交互是一种人机交互方式,以开 ...

  4. 华为云Volcano:让企业AI算力像火山一样爆发

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  5. std::unique_ptr的用法

    std::ofstream("demo.txt") << 'x'; // 准备要读的文件 { std::unique_ptr<std::FILE, decltyp ...

  6. openlayers4 入门开发系列结合 echarts4 实现统计图(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. Exponial

    Description Everybody loves big numbers (if you do not, you might want to stop reading at this point ...

  8. Python爬虫爬取异步加载的数据

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:努力努力再努力 爬取qq音乐歌手数据接口数据 https://y.qq ...

  9. 浅谈C++虚函数机制

    0.前言 在后端面试中语言特性的掌握直接决定面试成败,C++语言一直在增加很多新特性来提高使用者的便利性,但是每种特性都有复杂的背后实现,充分理解实现原理和设计原因,才能更好地掌握这种新特性. 只要出 ...

  10. HTTP报文(首部字段)

    HTTP报文 请求报文/响应报文 结构: 报文首部 + (可选)报文主体(两者通过空行CR + LF来划分) 使用首部字段是为了给浏览器和服务器提供报文主体大小.所使用的语言.认证信息等内容 HTTP ...