首页 > 其他分享 >Vue中使用js-audio-recorder实现录音时提示:浏览器不支持getUserMedia!

Vue中使用js-audio-recorder实现录音时提示:浏览器不支持getUserMedia!

时间:2022-09-21 09:11:13浏览次数:103  
标签:Vue 浏览器 录音 js https getUserMedia recorder

场景

Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/126957202

上面在进行web端录音时在本地使用127.0.0.1或者localhost运行时可以正常录音,但是在通过ip访问进行录音时提示:

浏览器不支持getUserMedia!

 

 

http请求的 chrome,edge, fireFox 等主流浏览器由于安全限制将不会暴露getUserMedia 方法,所以就不能够访问用户的媒体设备。

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、Chrome浏览器

访问如下地址

chrome://flags/#unsafely-treat-insecure-origin-as-secure

 

 

将要录音的网站地址(ip+端口号)输入到Insecure origins treated as secure中,然后将Disabled下拉改为Enabled

 

 

此时下方会提示重启浏览器,点击Relaunch重启浏览器。

 

 

此时就可以在使用ip、非https等的地址进行录音了

 

2、完整配置流程

 

标签:Vue,浏览器,录音,js,https,getUserMedia,recorder
From: https://www.cnblogs.com/badaoliumangqizhi/p/16714386.html

相关文章

  • Node.js(六)MongoDB
    student.jsvarexpress=require('express');varrouter=express.Router();const_=require("lodash");const{MongoClient}=require("mongodb");//依赖Mong......
  • Vue 组合式函数简介
    Vue组合式函数:export导出一个函数。函数内可以定义生命周期勾子、数据及方法,它是可复用的模块。类似Mixin混入。但比Mixin更有优势。组合式函数示例:useDemo.js impo......
  • js generate ASCII table dict All In One
    jsgenerateASCIItabledictAllInOneASCIItabledictgeneratorcharCodeAt&String.fromCodePoint//jsgenerator&ASCIItabledictconstdict={};......
  • 昨天学习:宏任务与微任务,JS执行机制,执行栈,事件循环,同步异步执行顺序
    宏任务由宿主(浏览器,Node)发起;微任务由JS本身发起。宏任务的具体事件为scrpit(整体代码),setTimeout,setInterval,等。微任务的具体事件为Promise,等。JS执行机制:先处理主线程上......
  • 为什么使用 Pinia(Vuex)
    Pinia定义Pinia(Vuex?)是一个独立于组件的全局状态,每一个组件都可以读取和写入。Pinia有三个重要的概念:state、getters、actions。state等价于组件中的data、getters......
  • nodejs抓取接口数据(axios)
     demo:varaxios=require("axios");varfs=require("fs");varnodeschedule=require("node-schedule");varhotListUrl="https://weibo.com/ajax/side/hotS......
  • Node.js 面试题 All In One
    Node.js面试题AllInOneNode.js应用领域BFFCLI前端基建工具库爬虫BFFPattern:BackendsForFrontends用于前端的后端模式https://samnewman.io/patterns/......
  • 小数转百分数 js 实现
    搞了个小数转百分数的方法,写法笨了点,但精度高  小数点%/***@description小数转百分数*@param{Number}要转换的数字100.020.0213之类*@returns......
  • VueRouter 报错:inject() can only be used inside setup() or functional components
    单独创建的一个文件,封装了登录函数的业务逻辑,出现了一个警告,紧接着就是报错:说不能读取到路由的push函数。路由必须在组件里面使用,不能在ts或js文件中使用。还要注......
  • Vue3:Teleport
    TeleportVue鼓励我们通过将UI和相关行为封装到组件中来构建UI。我们可以将它们嵌套在另一个内部,以构建一个组成应用程序UI的树。然而,有时组件模板的一部分逻辑上属......