这种问题在本地开发不会出现，只会在线上部署之后才会出现这种问题。
如果不是特殊情况，建议还是用更好的录音组件。
正文
因为最近有个录音需求，要求使用者能进行录音上传，然后读取后端传回来的链接，进行语音播放。
在比较了多个录音工具之后，我选用了js-audio-recorder，效果还不错。
在本地完成这个需求后，测了一下是没有问题的，但发布线上才发现不行。
问题情况
查了一下才知道，这是最新的api被浏览器锁了权限。
发布到线上之后，浏览器会报如下错误。
1 | Error :浏览器不支持 getUserMedia ! |
js-audio-recorder用的是getUserMedia这个api。
chrome，edge, fireFox 等主流浏览器由于安全限制将不会暴露getUserMedia 方法，所以就不能够访问用户的媒体设备。
getUserMedia在高版本的chrome下需要使用https，如果你的项目是部署在https页面，那么则不用此类方法也可以解决。
解决办法
复制下方链接，到浏览器上打开，进入配置页面
1 | chrome://flags/#unsafely-treat-insecure-origin-as-secure |
将要录音的网站地址(ip+端口号)输入到Insecure origins treated as secure中，然后将Disabled下拉改为Enabled
此时下方会提示重启浏览器，点击Relaunch重启浏览器。
注意事项
- 填入当前使用的网站，而不是要上传的服务器链接。
- 不用担心会关闭所有页面，所有页面在重启浏览器之后依然会重新打开。
结语
这种方式属于是临时解决方式，如果有更好的录音解决方式，建议还是换其他的组件。
而且，js-audio-recorder的最新版本已经是4年前了，活跃度没那么高了。
虽然稳定，但是没什么活跃度和更新的组件，将来就算真的出问题，恐怕也很难解决。
参考
Vue中使用js-audio-recorder实现录音时提示:浏览器不支持getUserMedia!_浏览器不支持 getusermedia-CSDN博客
Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口-CSDN博客