通过 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. 在开发Thinkphp5.0智慧软文个人微信个人支付宝企业支付宝接口时遇到的坑

    在开发Thinkphp5.0智慧软文个人微信个人支付宝企业支付宝接口时遇到回调后提示成功但是不能自动充值的情况,现在记录一下: 两种情况 1.个人支付宝  个人微信遇到的情况 因为个人支付宝 个人微信 ...

  2. adb adb monkey命令及介绍

    1.adb的组成部分 守护进程,客户端,服务器端`      2.Monkey程序是Google公司提供的一个压力和稳定性测试的工具 3.命令 命令 参数 功能 adb version   查看当前a ...

  3. 【Python成长之路】Python爬虫 --requests库爬取网站乱码(\xe4\xb8\xb0\xe5\xa)的解决方法【华为云分享】

    [写在前面] 在用requests库对自己的CSDN个人博客(https://blog.csdn.net/yuzipeng)进行爬取时,发现乱码报错(\xe4\xb8\xb0\xe5\xaf\x8c\ ...

  4. Spring通过IOC帮我们做火鸡

    一.IOC--setter注入 1.准备dmo 首先准备一只火鸡 public class Turkey { private int id; private String name; public i ...

  5. 带你从头到尾捋一遍MySQL索引结构(1)

    从一个简单的表开始 create table user( id int primary key, age int, height int, weight int, name varchar(32) ) ...

  6. luogu P3830 [SHOI2012]随机树

    输入格式 输入仅有一行,包含两个正整数 q, n,分别表示问题编号以及叶结点的个数. 输出格式 输出仅有一行,包含一个实数 d,四舍五入精确到小数点后 6 位.如果 q = 1,则 d 表示叶结点平均 ...

  7. A.Changing Volume

    题目:改变音量 题意:给定两个数a和b,有6个操作(-5, -2, -1, +1, +2, +5),求a变到b的最小操作次数 操作的过程中不能变到小于0,即音量不能调到小于0 分析: (贪心),我们可 ...

  8. node+express 配置安装以及数据解析,cookie,session

    一.express安装,创建服务 (1)安装:npm install express --save(2)创建服务 server.js: const express = require('express ...

  9. Spring Cloud Alibaba 新一代微服务解决方案

    本篇是「跟我学 Spring Cloud Alibaba」系列的第一篇, 每期文章会在公众号「架构进化论」进行首发更新,欢迎关注. 1.Spring Cloud Alibaba 是什么 Spring ...

  10. 在 ASP.NET Core 中使用 AutoMapper 使 Entity 和 Resource 之间进行映射

    目录 从 NuGet 安装 AutoMapper 添加 Entity类 和 Resource类 添加一个 Profile文件,配置映射关系 在Startup中对AutoMapper进行注册 在项目中使 ...