WebRTC web录音权限获取与使用(遇到的问题记录)

遇到的问题记录:

问题描述:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia

上述代码中 navigator.getUserMedia 获取到的都是 undefined,
并且更换为使用navigator.mediaDevices.getUserMedia() 报错"Cannot read properties of undefined(reading ‘getUserMedia’) "

原因: 在chrome 的某些版本中,navigator.getUserMedia 已经弃用,并且navigator.mediaDevices.getUserMedia() 需要在上下文安全的场景下(https协议下)使用。

解决方法

  • 方案一: 修改chrome 浏览器的设置

这种方式适合用在笔记本电脑或者带录音设备的台式电脑上测试。如果需要在手机端测试需要考虑方案二的解决方法。

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

在这里插入图片描述

参考自:Navigator.getUserMedia and Navigator.webkitGetUserMedia undefined after updating to Chrome 74

  • 方案二:给服务器安装https服务。
    比如局域网内测试的服务器,可以使用mkcert 生成证书文件。
    windows 用户可以从:https://github.com/FiloSottile/mkcert/releases 下载
    在这里插入图片描述

然后以下运行命令生成证书文件:

 .\mkcert-v1.4.3-windows-amd64.exe -install
 .\mkcert-v1.4.3-windows-amd64.exe yourServiceIP

会在当前目录下生成yourServiceIp.pem 和 -key.pem的两个证书文件。
在测试PC上的chrome 浏览器上(设置—>安全和隐私设置–>安全–>管理证书–>导入.pem文件)导入证书文件。
在测试的androd 手机上设置里找到(安全和锁屏–>加密与凭据—>安装证书—>CA证书) 导入key.pem文件,即可。

问题描述

 let recorder = context.createScriptProcessor(config.bufferSize, config.channelCount, config.channelCount)

提示信息:The ScriptProcessorNode is deprecated. Use AudioWorkletNode instead. (https://bit.ly/audio-worklet)

原因: createScriptProcessor 已被弃用。
解决方法: 参考HTML5 MP3录音由ScriptProcessorNode升级成AudioWorkletNode采坑记

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值