通过 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. jQuery中带有异步Ajax代码的执行顺序

    1.问题 ​ 在使用jQuery的时候想通过Ajax请求来放所需要的html代码中放值,但是请求回来却是空的,源代码如下: $("a").click(function() { // ...

  2. 2019-2020-1 20199304《Linux内核原理与分析》第九周作业

    第八章 进程的切换和系统的一般执行过程 知识点 1.进程调度的时机 1.1硬中断和软中断 中断是指在计算机执行期间,系统内发生任何非寻常的或非预期的急需处理事件,使得CPU暂时中断当前正在执行的程序而 ...

  3. Java修炼——冒泡排序

    核心思想: 1)如有一个数列有 N(5)个元素,则至多需要 N-1(4)趟循环 才能保证数列有序 2) 每一趟循环都从数列的第一个元素开始比较,依次比较 相邻的两个元素,比较到数列的最后 3) 如果前 ...

  4. 18.DjangoRestFramework学习一之restful规范、APIview、解析器组件、Postman等

    一 预备知识 预备知识:django的CBV和FBV CBV(class based view):多用,简单回顾一下 FBV(function based view): CBV模式的简单操作:来个登陆 ...

  5. BZOJ [ZJOI2007]矩阵游戏(二分图匹配)

    1059: [ZJOI2007]矩阵游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 6390  Solved: 3133[Submit][Stat ...

  6. 转化欧拉回路(难题)-UESTC-1957励志的猴子

    励志的猴子 Time Limit: 1000 MS     Memory Limit: 256 MB Submit Status 上图是2013南京亚青会吉祥物圆圆.自从它诞生以来,它就被吐槽为最丑吉 ...

  7. 2018HDU多校训练一 K - Time Zone

    Chiaki often participates in international competitive programming contests. The time zone becomes a ...

  8. 【关注图像采集视频传输】之 Cy3014 usb3.0 FIFO接口

    CYUSB3014延续了CY7C68013A最吸引人的地方,那就是实现高速数据传输的Slave FIFO接口,应用这种模式,据说数据传输率可以达到320MB/s. 同USB2.0的芯片CY7C6801 ...

  9. 【Webpack】373- 一看就懂之 webpack 高级配置与优化

    本文原载于 SegmentFault 社区专栏 前海拾贝 作者:JS_Even_JS 一.打包多页面应用 所谓打包多页面,就是同时打包出多个 html 页面,打包多页面也是使用 html-webpac ...

  10. 手把手教你打造一款轻量级canvas渲染引擎

    背景 当我们开发一个canvas应用的时候,出于效率的考量,免不了要选择一个渲染引擎(比如PixiJS)或者更强大一点的游戏引擎(比如Cocos Creator.Layabox). 渲染引擎通常会有S ...