通过 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. ios注册通知NSNotificationCenter(一)

    作用:NSNotificationCenter是专门供程序中不同类间的消息通信而设置的. 注册通知:即要在什么地方接受消息 [[NSNotificationCenter defaultCenter]  ...

  2. jquery列表操作

    <span> <button>全选</button> <button>不选</button> <button>反选</bu ...

  3. python-14-文件操作

    前言 python中对文件的读写也是非常方便的,本章节将讲解读.写.读写等常用操作.下面讲师必要的参数: 1.文件路径:必须得知道文件的路径,不然怎样进行读写? 2.编码方式:utf-8,gbk,gb ...

  4. 生活小插曲(长篇连载,持续更新ing)^_^

    这个帖子,长期记录一些小小的生活插曲 在北京朋友开店了-关于同学开快餐店的故事.今天下午听说这个朋友在附近开了一个店,下午5点多吧,出门去他那里去了.走路过去的.在那里聊了将近一个小时吧.对最近我们自 ...

  5. Qt之高DPI显示器(二) - 自适配解决方案分析

    目录 一.回顾 二.框架说明 1.ICallDPIChanged 2.IDPIHelper 3.悬浮窗体管理器 三.方案分析 1.窗口大小 2.字体大小 3.间距 4.图标 四.相关文章 原文链接:Q ...

  6. #化鲲为鹏,我有话说# 鲲鹏弹性云服务器配置 Tomcat

    在鲲鹏弹性云服务器上配置 Tomcat 1 下载 Tomcat 地址 :http://tomcat.apache.org/ 根据需要选择版本,这里使用 Tomcat 9,下载压缩包 2 将文件发送到服 ...

  7. 带着canvas去流浪系列之四 绘制散点图

    [摘要] 用原生canvasAPI实现百度Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI ...

  8. IoT开发精英实战营招募啦!速来报名!

    具有了向上的力量,才能一眼望到山外的大地,蜿蜒的长河,人类精神的进步. --罗曼·罗兰<爱与死的搏斗> 七月流火,八月未央,九月授衣.说是长长长长的夏天,眨眼间,也早过了立秋而迎来处暑.距 ...

  9. 新一代数据安全的制胜法宝-UBA

    [摘要]在入侵防御领域,运用数据分析的方法保护数据的技术其实没有什么新的东西,比如防火墙-分析数据包的内容以及其他的元数据,如IP地址,从增长的数据条目中检测和阻断攻击者:防病毒软件不断的扫描文件系统 ...

  10. PyTorch最佳实践,怎样才能写出一手风格优美的代码

    [摘要] PyTorch是最优秀的深度学习框架之一,它简单优雅,非常适合入门.本文将介绍PyTorch的最佳实践和代码风格都是怎样的. 虽然这是一个非官方的 PyTorch 指南,但本文总结了一年多使 ...