使用js-audio-recorder报浏览器不支持getUserMedia解决办法

最新推荐文章于 2023-03-23 16:22:57 发布
最新推荐文章于 2023-03-23 16:22:57 发布
阅读量6.9k 收藏 8
点赞数 2
分类专栏： 前端 文章标签： javascript https http
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43520670/article/details/122132961
版权

原因

其实这是因为浏览器不支持http：IP开头的路径，认为这个路径不安全

浏览器只支持file:,https:,http://localhost，

解决办法

地址栏输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure

  1. 输入应用的ip和端口
  2. enable激活
  3. 重新启动浏览器
    在这里插入图片描述

参考：https://blog.csdn.net/YRY_LIKE_YOU/article/details/113745273

Chasing stars
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-audio-recorder-Vue.js的音频记录器。 它允许在服务器上创建，播放，下载和存储记录-Vue.js开发
05-27
vue-audio-recorder Vue.js的音频记录器。 它允许在服务器上创建，播放，下载和存储记录。 实时演示功能漂亮的UI干净的Vue-audio-recorder Vue.js的音频记录器。 它允许在服务器上创建，播放，下载和存储记录。 实时演示功能精美干净的UI下载/上传/播放记录时间限制记录限制大量回调个人音频播放器MP3 / WAV支持在（台式机）Chrome OS Firefox中测试在Safari浏览器中的安装vue-audio-recorder-保存AudioRecorder道具Prop类型描述尝试次数记录尝试次数的头标对象HTTP标头
ph-audio-image-video-recorder:音频、图像和视频分量记录器
06-27
录制音频（GetUserMedia/Stream API + Web Audio API + Recorder.js）， 捕获图像（GetUserMedia/Stream API + HTMLCanvasElement） 从浏览器通过MediaStreamTrack API提供的可用设备。 为了在没有任何附加插件...
前端实现录音功能 语音录入 弹框录入
啧⃝啧⃝啧⃝的博客
09-14 2574
实现录音功能/语音录入案例 本案例是弹框录音功能 可以直接作为录音组件使用 使用插件js-audio-recorder可以得到三种录音数据，pcm,wav,mp3 三种数据流 官网api入口. tip:使用js-audio-recorder报浏览器不支持getUserMedia 因为浏览器安全限制只支持file:,https:,http://localhost， 不能使用http：ip 安装js-audio-recorder cnpm i js-audio-recorder --s 引入到所需页面 im
Vue中使用js-audio-recorder实现录音时提示:浏览器不支持getUserMedia!
BADAO_LIUMANG_QIZHI的博客
09-21 4799
上面在进行web端录音时在本地使用127.0.0.1或者localhost运行时可以正常录音，但是在通过ip访问进行录音时提示：浏览器不支持getUserMedia!http请求的 chrome，edge, fireFox 等主流浏览器由于安全限制将不会暴露getUserMedia 方法，所以就不能够访问用户的媒体设备。注：博客：关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。
http：IP开头的路径使用js-audio-recorder报浏览器不支持getUserMedia
Lucky_girl_wan的博客
11-10 2925
因为浏览器不支持http:IP开头的路径，认为安全性不高 只支持浏览器：file:，https:，http://localhost 解决办法： 在谷歌浏览器的地址栏中输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure就好了，或者用http: 域名也可以解决 ...
getUserMedia报错：新版本Chrome中getUserMedia接口在http下不再支持
程序员老狼专注开发aigc或客服系统应用
10-17 1438
新版本Chrome中getUserMedia接口在http下不再支持，请使用https来访问 比较兼容的就是需要判断一下 var media=(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia); if(!medi...
JS调用媒体设备失败 --- getUserMedia undefine 问题（各浏览器配置方法）（转）
xionghao009的专栏
11-17 2484
JS调用媒体设备失败 --- getUserMedia undefine 问题（各浏览器配置方法）
audio-recorder-polyfill:MediaRecorder polyfill可在Edge和Safari中录制音频
04-28
将来所有浏览器都支持MediaRecorder时，您将删除polyfill。 小的。 1.11 KB（缩小并压缩）。 没有依赖关系。 它使用来控制大小。 一个文件。 与其他记录器相比，此polyfill使用“内联工作器”，不需要Web Worker...
vue使用recorder.js实现录音功能
10-15
Web Audio API和MediaStream Recording API在现代浏览器中支持良好，但老版本的浏览器可能不支持。在使用这些API时，记得进行兼容性检查。 通过以上步骤，你可以在Vue项目中实现录音功能，并利用recorder.js对音频...
Recorder:html5 js 录音 mp3 wav ogg webm amr 格式，支持pc和Android、ios部分浏览器、和Hybrid App（提供Android IOS App源码），微信也是支持的，提供H5版语音通话聊天示例 和DTMF编解码
05-10
不支持：UC系内核（典型的支付宝），大部分国产手机厂商自研套壳娱乐浏览器，低版本IOS(11.0-14.2)上除Safari外的其他任何形式的浏览器（含PWA、WebClip、任何App内网页）。 Recorder H5 ： [ ] [ ] [ ] 工具集 ： ...
Recorder用于html5录音
08-11
例如，检查浏览器是否支持getUserMedia和MediaRecorder，以及在不支持的环境中提供备选方案。此外，为了提高用户体验，我们可能需要添加实时预览、音量控制、录音时长限制等功能。 Recorder-master压缩包中的源代码...
使用js-audio-recorder报浏览器不支持getUserMedia
YRY_LIKE_YOU的博客
02-07 6568
其实这是因为浏览器不支持http：IP开头的路径，认为这个路径不安全 浏览器只支持file:,https:,http://localhost， 解决办法： chrome 地址栏输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure 然后就ok了 ...
调用webRtc getUserMedia 报错问题解决办法
.伊泽瑞尔
03-23 2812
一、这种情况首选的是生产环境升级http协议为https协议，这个时候浏览器就会放权。【当然本地使用localhost访问，浏览器默认是支持权限开放的】
Safari支不支持HTML5录音？ 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。...
11-28 879
先放结论：Safari支不支持HTML5录音？ ——据我调查，不支持。 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。 可是当使用Can I use查看兼容性的时候，我发现 不过这个是有历史原因的，我记得RTC是在去年，2013，才刚刚由思科提出并且确定下来的（没记错的话）。但Audio标签在制定初就是HTML5规范的一部分...
讯飞语音听写（Cannot read property ‘getUserMedia‘ of undefined“）浏览器报错解决
会点php的前端小渣渣
08-18 1120
TypeError: Cannot read property 'getUserMedia' of undefined 解决方法： 步骤： 1、在浏览器的地址栏里输入chrome://flags/#unsafely-treat-insecure-origin-as-secure　　并回车 然后作如下修改 输入框中填写需要开启的域名，也就是你报错的地址，譬如http://example.com"，多个以逗号分隔。 2、修改完后，在右下角会出现这样 点击 Relaunc...
关于使用通过ip访问网站无法使用多媒体，MediaDevices.getUserMedia()为undefined的解决方案--（亲测可用）。
weixin_45408862的博客
08-07 5898
当web前端通过vidoe+canvas+MediaDevices.getUserMedia()的方式调用本地多媒体设备（不局限于摄像头）时。存在一个安全问题，为了用户的隐私安全，http协议无法使用多媒体设备。 因为像摄像头和麦克风属于可能涉及重大隐私问题的API，getUserMedia()的规范提出了浏览器必须满足一系列隐私和安全要求。这个方法功能很强大，只能在安全的上下文中使用，在不安全的环境中为undefined。安全上下文就是使用HTTPS、file:///url方案加载的页面，或者是开发者本地
WebRTC getUserMedia()获取流失败的原因查询及解决
firstcode666的博客
03-04 2900
getUserMedia API 参数 successCallback errorCallback 错误查询方法 原因及解决方法 最近调试WebRTC，客户端的Chrome浏览器都无法获取视频流，原以为是Chrome版本太低，升级了版本，也不行，于是查阅了相关API… getUserMedia API: navigator.getUserMedia ( constraints, successCallback, errorCallback ); 参数 参数 是否必须 描述 constra...
uniapp中使用网页录音并上传声音文件(发语音)——js-audio-recorder的使用【伸手党福利】
wwppp987的博客
08-08 9275
uniapp中上传音频只能在app或小程序当中实现，如何使用网页完成语音的录制和上传则成为了困扰前端童鞋的重点。本文着重解决：js-audio-recorder报 error:浏览器不支持getUserMedia!的问题。js-audio-recorder报 NotFoundError : Requested device not found 的问题js-audio-recorder的使用、demo以及文件上传的问题。......
React中使用js-audio-recorder录音
最新发布
05-22
js-audio-recorder是一个JavaScript库，它可以在浏览器中录制音频并将其转换为Blob对象或base64编码的字符串，它可以轻松地与React集成。 使用js-audio-recorder需要先安装它，可以通过npm来安装： ``` npm install js-audio-recorder ``` 安装完成后，可以在React组件中导入并使用它。以下是一个简单的示例： ``` import React, { useState } from 'react'; import Recorder from 'js-audio-recorder'; function App() { const [audioBlob, setAudioBlob] = useState(null); const handleRecord = async () => { const recorder = new Recorder(); await recorder.start(); setTimeout(async () => { const blob = await recorder.stop(); setAudioBlob(blob); }, 5000); // 录制5秒后停止 }; return ( <div> <button onClick={handleRecord}>开始录音</button> {audioBlob && ( <audio controls> <source src={URL.createObjectURL(audioBlob)} type="audio/wav" /> </audio> )} </div> ); } export default App; ``` 在这个示例中，我们首先使用useState钩子来定义一个状态audioBlob，用于存储录音后生成的Blob对象。然后，我们定义了一个名为handleRecord的函数，在该函数中创建一个Recorder实例并开始录音。录音5秒后，我们使用Recorder的stop方法停止录音，并将生成的Blob对象设置为状态audioBlob。最后，我们渲染一个按钮和一个音频元素，当用户单击按钮开始录音时，音频元素会显示出来。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值