webSokect安卓和web适配的Bug 适用实时语音场景

❌BUG:

javascript 复制代码
Failed to construct 'WebSocket': The URL's scheme must be either 'ws' or 'wss'. 'https' is not allowed.

WebSocket 协议在创建连接时,规定其 URL 的协议头(scheme)必须是 ws(用于非加密的普通 WebSocket 连接,类似 HTTP 之于 HTTPS)或者 wss(用于加密的 WebSocket 连接,类似 HTTPS 之于 HTTP)

  • 在 Web 端,浏览器(如 Chrome、Firefox 等)有比较频繁的自动更新机制。这些更新通常会包含对各种网络协议包括 WebSocket 和常规 HTTP/HTTPS 链接兼容性的改进。当出现新的网络协议标准或者安全要求时,浏览器会快速更新以适应这些变化。所以,对于一些不符合严格规范但在实际使用中可能不会产生严重安全问题的情况(如某些对常规链接的模糊处理),浏览器可能会进行内部的兼容处理,而不要求开发者显式地去处理。

    只能接受 (wss://..., https://...)

  • 相比之下,手机端的应用更新(无论是系统应用还是第三方应用)相对没有那么及时。而且,手机操作系统为了确保安全性和稳定性,对应用的网络连接要求更加严格,不太可能自动对不符合规范的链接进行兼容处理。

    只能接受(wss://... )

    ❌BUG

javascript 复制代码
recorder.ts:42 Uncaught (in promise) InvalidStateError: Cannot close a closed AudioContext

不能关闭一段已经关闭的音频,关闭前作判断

javascript 复制代码
stop() {//停止音频录制过程并释放相关资源。
    if (this.mediaStream) {
      this.mediaStream.getTracks().forEach((track) => track.stop());
    }
    if (this.audioContext && !this.audioContextClosed) {
      this.audioContext.close();
      this.audioContextClosed = true
    }
  }

这种方式关闭音频录制,会导致:同一时间段如果有其它音频播放,声音会变小

缺点:

  • 资源释放的程度和方式

    • 你的方法会完全停止媒体流(mediaStream)中的所有音频轨道,通过调用每个轨道的stop方法来实现。这是一种比较彻底的停止方式,它会立即中断音频的录制过程,并且释放与媒体流相关的资源。
    • 同时,对于AudioContext,如果它存在且尚未关闭(通过audioContextClosed标志判断),会关闭AudioContext。关闭AudioContext会释放与之相关的所有音频节点、处理器以及连接等资源,包括可能正在处理或缓存的音频数据。这是一种比较 "重量级" 的资源释放操作,适用于完全结束音频相关的任务,并且在之后可能不会很快再次使用音频功能的场景。
  • 对其他音频的潜在影响

    • 由于这种方式会停止媒体流和关闭AudioContext,如果在同一环境下有其他音频正在播放或者依赖于这个AudioContext进行音频处理(例如混音、音频效果处理等 ),这些音频活动很可能会受到影响。例如,其他音频可能会突然停止播放 ,或者因为AudioContext被关闭而丢失一些音频处理状态,需要重新初始化才能继续正常工作

优化:

  • 暂时关闭麦克风音频输入

    可以通过获取媒体流中的音频轨道(MediaStreamTrack)并设置其enabled属性为false来暂时关闭麦克风。媒体流中的每个音频轨道对应麦克风的输入通道。例如:

js 复制代码
       function disableMicrophone() {
         if (mediaStream && mediaStream.getAudioTracks().length > 0) {
           const audioTrack = mediaStream.getAudioTracks()[0];
           audioTrack.enabled = false;
         }
       }
  • 原理及为何不影响其他音频播放
    • 这种方式只是暂停了麦克风音频流进入AudioContext的通道,不会干扰已经在AudioContext或者其他独立音频播放系统中的其他音频。AudioContext中的其他音频节点(如用于播放背景音乐等的BufferSourceNode)以及外部独立的音频播放(例如通过<audio>标签或者其他AudioContext实例播放的音频)会继续正常工作,因为关闭麦克风音频轨道只是切断了这一个特定的输入源,而没有改变整个音频环境的其他部分。
  • 重新开启麦克风音频输入
    • 当需要重新开启麦克风时,将音频轨道的enabled属性设置回true即可。例如:
js 复制代码
       function enableMicrophone() {
         if (mediaStream && mediaStream.getAudioTracks().length > 0) {
           const audioTrack = mediaStream.getAudioTracks()[0];
           audioTrack.enabled = true;
         }
       }

❌在http环境会出现一些录音权限不存在情况

javascript 复制代码
this.audioContext.audioWorklet.addModule(moduleUrl);  // 报错addmodule不存在

为了用户的隐私,一般许多API(包括录音权限访问),只能在https才能够访问。为什么http://localhost可以访问原因是因为chrome对于localhost管理较松

参考文章:https://modstart.com/p/r13f9t7tpnsuqbss

相关推荐
鱼樱前端1 小时前
抽风【HbuilerX-Bug】终端无法显示打印信息,也无法输入
前端·开源
多客软件佳佳1 小时前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做?系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
_Feliz2 小时前
vue2实现word在线预览
前端·javascript·vue.js·elementui·vue-office
huoyueyi2 小时前
超详细Chatbot UI的配置及使用
前端·ui·chatgpt
Qlittleboy2 小时前
vue的elementUI 给输入框绑定enter事件失效
前端·vue.js·elementui
Violet_Stray3 小时前
用bootstrap搭建侧边栏
前端·bootstrap·html
软件聚导航3 小时前
对uniApp 组件 picker-view 的二次封装,实现日期,时间、自定义数据滚动选择,容易扩展
前端·javascript·html
码农丁丁3 小时前
[前端]mac安装nvm(node.js)多版本管理
前端·macos·node.js·nvm
正小安3 小时前
Vite 系列课程|1课程道路,2什么是构建工具
前端·vite
校园卡已办4 小时前
PHP木马编写
android·开发语言·php