通过 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. SpringBoot打成war包,部署Tomcat服务器

      1: 创建spring boot项目 使用 Spring initializr  可以直接选择创建包的方式 也可以选择在Pom中更改 <groupId>com.dgw</grou ...

  2. sbt assembly a fat jar for spark-submit cluster model

    在用spark-submit提交作业时,用sbt package打包好的jar程序,可以很好的运行在client模式,当在cluster模式, 一直报错:Exception in thread &qu ...

  3. CodeForces-Round235D

      链接:http://codeforces.com/contest/401/problem/D 题意:给出一个数字num和m,问通过重新排列num中的各位数字中有多少个数(mod m)=0,直接枚举 ...

  4. numpy的基本API(三)——索引

    numpy的基本索引API iwehdio的博客园:https://www.cnblogs.com/iwehdio/ 1.单个元素的索引 对于一维数组,索引方式与内置的List相同.正索引从0开始,负 ...

  5. ARTS-S golang常用代码段

    通过http下载文件 func DownloadFile(filepath string, url string) error { out, err := os.Create(filepath) if ...

  6. Asp.net Core 异常日志与API返回值处理

    需求: 1.对异常进行捕获记录日志 并且修改返回值给前端 解释: ILogger4是自定义的一个日志,更改它就好 解决方案1: 使用中间件进行异常捕获并且修改其返回值 public class Err ...

  7. Altium PCB二维码Logo设计(转 crazybingo)

    Altium PCB二维码Logo设计 每次设计PCB的时候,都会在空白部分放Logo上去,一来板卡显得更充实,二来更有成就感一些... 今天突然想着...这两年二维码越来越火,火到快爆发,不如在板卡 ...

  8. Python流程控制之分支结构

    目录 if/else结构 多重if结构 嵌套if结构 练习 if/else结构 if如果,else否则 # java if(){ }else{ } # python if 条件: 语句 else: 语 ...

  9. 一元建站-基于函数计算 + wordpress 构建 serverless 网站

    前言 本文旨在通过 快速部署一个 wordpress 网站到阿里云函数计算平台 这个示例来展示 serverless web 新的开发模式, 包括 FUN 工具一键初始化 NAS, 同步网站到 NAS ...

  10. iview可收缩侧边菜单实现(支持二级菜单)

    想用iview做一个可以伸缩的侧边菜单栏,效果如下: 1.侧边栏收缩前:可以通过点击菜单分类展开子菜单项: 2.可以让用户点击图标动态收缩菜单栏: 3.侧边栏收缩后:只显示菜单分类的图标,鼠标放置在菜 ...