`MediaDevices.getUserMedia` `undefined` 的问题


通过 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",多个以逗号分隔。
  • 重启后生效。

相关资源

原文地址:https://www.cnblogs.com/Wayou/p/getUserMedia_undefined_issue.html

时间: 2024-11-07 10:21:59

`MediaDevices.getUserMedia` `undefined` 的问题的相关文章

navigator.mediaDevices.getUserMedia

navigator.mediaDevices.getUserMedia: 作用:为用户提供直接连接摄像头.麦克风的硬件设备的接口 语法: navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) { ..... } catch(function(error) { .... } 参数表示的意义 constraint:指定请求媒体的类型{video:布尔值:audio:布尔值} mediaStream:st

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

<template> <div> <!--canvas截取流--> <canvas ref="canvas" width="320" height="260"></canvas> <!--图片展示--> <video ref="video" width="340" height="280" autoplay&g

浏览器中打开摄像头

本文是讲述如何在浏览器中打开摄像头,并且实时显示在页面上.想要实现这一功能,需要依赖WebRTC (Web Real-Time Communications) 这一实时通讯技术,它允许浏览器之间视频流和音频流或者其他任意数据的传输,当然其中包含了大量的API和协议,这些在这里都不做介绍,具体的标准还在完善之中,所以使用的方法有时候也需要考虑到兼容问题,那么回到主题,怎样使用webRTC获取视频流. 首先对于html,我们需要一个video标签来播放视频(JS中添加也可以),当然画布也是能够实现的

JavaScript 使用 mediaDevices API 选择摄像头

大多数智能手机都有前置和后置摄像头,当你在创建视频应用时你可能想要选择或者切换前置.后置摄像头. 如果你开发的是一款聊天应用,你很可能会想调用前置摄像头,但如果你开发的是一款拍照软件,那么你会更倾向于使用后置摄像头.在这篇文章中我们将探讨如何通过 mediaDevices API 和 media constraints (媒体约束) 选择或者切换摄像头. 准备工作 要跟着本文一起动手实践你需要: 一款拥有两个可供测试的摄像头的 iOS 或 Android 设备,如果你的电脑有两个摄像头那也可以

浏览器调起摄像头(jquery+layui)

/* 实例化camvas配置参数 config = { video:{width:Number(scale*4),height:Number(scale*3)},//视频比例4:3 canvasId:'canvas',//画布canvas节点ID videoId:'v',//video节点ID imgType:'png',//图片类型,/png|jpeg|bmp|gif/ quality:'1' //图片质量0-1之间 } */ window.URL = window.URL || window

web音频流转发之音视频直播

前言 经过前面两篇文章的讲解,大家已经了解了audio的基本使用方法,下面我们就根据我们了解的api做一个直播.web音频流转发之AudioNode web音频流转发之音频源 原理 视频直播:采集一帧一帧的视频,转换为base64转发,接收到base64后,设置为img的src,然后不停的修改img的src形成视频 音频直播:采集一帧一帧的音频二进制数据,转发2进制数据,在接收端对2进制原始音频数据进行播放 采集和推流 获取摄像头,和麦克风需要https navigator.getUserMed

HTML5中video标签与canvas绘图的使用

video标签的使用 video标签定义视频, 它是html5中的新标签, 它的属性如下(参考自文档): domo01 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo01</title> </head> <body> <video src="madashu

腾讯IVWEB团队:WebRTC 点对点直播

WebRTC 全称为:Web Real-Time Communication.它是为了解决 Web 端无法捕获音视频的能力,并且提供了 peer-to-peer(就是浏览器间)的视频交互.实际上,细分看来,它包含三个部分: MediaStream:捕获音视频流 RTCPeerConnection:传输音视频流(一般用在 peer-to-peer 的场景) RTCDataChannel: 用来上传音视频二进制数据(一般用到流的上传) 但通常,peer-to-peer 的场景实际上应用不大.对比与去

JS打开摄像头并截图上传

直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用drawImage方法将video的内容绘至canvas中 3. 将截取的内容上传至服务器,将canvas中的内容转为base64格式上传,后端(PHP)通过file_put_contents将其转为图片 要注意的是,在chrome以外的浏览器中,使用摄像头或多或少会出现一些问题,可能也是老问题了,所以以