遇到的问题记录:
问题描述:
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采坑记