获取 navigator.mediaDevices.getUserMedia 失败

最新推荐文章于 2024-05-09 20:51:28 发布
最新推荐文章于 2024-05-09 20:51:28 发布
阅读量3.3k 收藏 1
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/timczm/article/details/131092979
版权

在开发的时候调用下面这段代码是正常工作的，但是用其他设备（如ios，safari，android等任何非本机设备）打开我本地开发环境运行的dev环境就无法调用。

navigator.mediaDevices.getUserMedia({ audio: true })

原因就是 getUserMedia 仅仅会在安全的情况下工作，也就是下面 3 种情况：

  • https://*
  • file:///
  • localhost / 127.0.0.1
CV大使
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何解决navigator.mediaDevices.getUserMedia兼容问题
刘杨造梦的博客
09-23 4877
/ 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口。// 调用用户媒体设备，访问摄像头、录音、console.log("访问用户媒体设备失败：", error.name, error.message);// 因为这样可能会覆盖已有的属性。// 否则，为老的navigator.getUserMedia方法包裹一个Promise。// 首先，如果有getUserMedia的话，就获得它。// 最新标准API、// 成功的回调函数。// 异常的回调函数。
jssacn.zip
04-05
然而，为了支持更多的设备和浏览器，开发者通常会使用`navigator.mediaDevices.getUserMedia` API，这个API允许获取用户的音频、视频流。调用后置摄像头的代码可能如下： ```javascript if (navigator.mediaDevices...
解决在http协议下，navigator.mediaDevices报错问题
myyCSDN1226的博客
12-12 1852
navigator.mediaDevices方法在开发中的使用问题
Web前端JS通过getUserMedia API 获取 麦克风(话筒)、摄像头(相机) 等音视频多媒体数据（语音、录音、录屏、相机、视频对话、屏幕共享、流媒体）
最新发布
沐枫
05-09 2865
Web前端JS通过getUserMedia API 获取 麦克风(话筒)、摄像头(相机) 等音视频多媒体数据（语音、录音、录屏、相机、视频对话、屏幕共享、流媒体）
MediaDevices.getUserMedia（）的运用
SuXiaoBai_的博客
05-04 3718
JS开启外部设备函数（转载于MDN）
实时录音监听 navigator.mediaDevices.getUserMedia（）
热门推荐
cdx1170776994的博客
08-02 1万+
录制 //js代码 //实时录音监听 var promise=navigator.mediaDevices.getUserMedia({audio:true}); promise.then(function(stream){ var audio=document.querySelector("audio") audio.src=URL.cre
navigator.mediaDevices.getUserMedia 抓取指定窗口
学吧
07-20 1562
window.dos.getSources({ types: ['window', 'screen'] }).then(async (sources: any) => { console.log(sources) for (let key in sources){ if(sources[key].name.indexOf("微信")){ let sourceId = ''; // 所选择的屏幕或窗口 s
关于navigator.mediaDevices为undefined，获取不到媒体权限的问题
gw6601的博客
05-24 6599
当时的场景是公司搭建的内部服务网站没有测试环境（有点鸡肋，说是因为需要线上成员信息认证登录），也因为跨域问题，所以需要制定线上环境的域名，本地localhost用不了，协议是http的，导致接入一个语音需求的时候本地调试出现了问题。1、采用https方案，由于线上环境都是https协议的，所以这个不用考虑，只是本地调试是一个大问题，所以忽略。console.log('navigator.getUserMedia - 不支持');2. 地址为https:// 时。3. 为文件访问file:///
navigator.mediaDevices.getUserMedia中getUserMedia显示未定义
xioxi
01-18 1061
通过 MediaDevices.getUserMedia() 获取用户多媒体权限时，需要注意其只工作于以下三种环境： ocalhost 域 开启了 HTTPS 的域 使用 file:/// 协议打开的本地文件 其他情况下，比如在一个 HTTP 站点上，navigator.mediaDevices 的值为 undefined。 参考：https://blog.csdn.net/weixin_49293345/article/details/112600213 ...
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
01-19
navigator.mediaDevices.getUserMedia 应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下： ...
React 中的Tensorflow.js网络摄像头对象检测.zip
07-14
2. **获取网络摄像头流**: 使用HTML5的`navigator.mediaDevices.getUserMedia` API获取用户摄像头的视频流。这通常在React的`componentDidMount`生命周期方法中完成，确保在组件渲染后获取流。 3. **设置视频元素**...
getusermedia-profilepicture
05-15
这通常是通过调用`navigator.mediaDevices.getUserMedia(constraints)`完成的，其中`constraints`是一个对象，定义了你需要的媒体类型。例如，如果只需要视频，可以这样设置：`{video: true}`。 2. **处理成功**：...
html5通过getUserMedia API实现网页录音
09-28
navigator.mediaDevices.getUserMedia({ audio: true }) .then(function(stream) { // 成功获取到媒体流，可以开始录音操作 }) .catch(function(error) { // 处理获取媒体流失败的情况 }); ``` 成功获取到...
navigator.mediaDevices.getUserMedia(constraints)可设置参数
Heartnottowake的博客
09-06 2697
【代码】navigator.mediaDevices.getUserMedia(constraints)可设置参数。
web js 调用 navigator.mediaDevices.getUserMedia
weixin_40029679的博客
07-13 2007
navigator.mediaDevices.getUserMedia 目前支持的url： localhost、file和https http的url下navigator.mediaDevices.getUserMedia 为undefined 其中 navigator的应该用是关于系统的一些信息采取 如获取 当前浏览器类型 function getBrowserId () { var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera
navigator.mediaDevices.getUserMedia获取本地音频/麦克权限并提示用户
.伊泽瑞尔
02-07 1772
navigator.mediaDevices.getUserMedia获取本地音频/麦克权限并提示用户
使用navigator录制屏幕，当访问地址不是localhost时报错解决
vue6214的博客
07-10 305
http://example.com为需要录屏屏幕的ip，我的为http://192.168.80.91:5003/#/login。，可通过开启 Chrome 的相应参数。注意：--最前面有一个空格。其他情况下，比如在一个。环境下也能使用和调试。
web资源部署后navigator获取不到mediaDevices实例的解决方案（navigator.mediaDevices为undefined）
乐辞的博客
07-01 6428
最近在开发中，有一个功能需要实现录制屏幕的功能，我这边使用了recordrtc库，在过程中本地开发都没有问题，部署到线上环境时出现 navigator.mediaDevices为undefined，查找了不少文章和官方文章才得以解决由于浏览器的安全策略导致了这个问题，目前经尝试，在以下几种情况中 navigator.mediaDevices 可以正常使用 另附上 recordrtc 使用源码以供参考 (参考源码使用了element UI)...
navigator.mediaDevices.getUserMedia远程传输
03-23
navigator.mediaDevices.getUserMedia是一个Web API，用于在浏览器中访问用户的媒体设备，例如摄像头和麦克风。它可以用于获取用户的音频和视频流，以便进行远程传输或进行实时通信。 使用navigator.mediaDevices.getUserMedia，您可以请求用户授权访问其媒体设备，并获取相应的媒体流。以下是使用该API的一般步骤： 1. 使用getUserMedia方法请求访问用户的媒体设备： ```javascript navigator.mediaDevices.getUserMedia(constraints) .then(function(stream) { // 成功获取到媒体流 }) .catch(function(error) { // 处理错误 }); ``` 2. 在constraints参数中指定您希望获取的媒体类型和其他限制条件。例如，如果您只需要音频流，可以将constraints设置为： ```javascript var constraints = { audio: true, video: false }; ``` 3. 当用户授权访问媒体设备并成功获取到媒体流时，将调用then回调函数。您可以在回调函数中处理媒体流，例如将其传输到远程服务器或在本地进行实时通信。 4. 如果用户拒绝了访问权限或发生了其他错误，将调用catch回调函数。您可以在回调函数中处理错误情况。 需要注意的是，getUserMedia方法返回的是一个Promise对象，因此您可以使用then和catch方法来处理成功和失败的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值