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

相关推荐
wangruofeng4 小时前
AI Models 1.1.0 发布,查大模型价格、对比模型和找 API 地址
前端·aigc·ai编程
wangruofeng4 小时前
给前端开发者的 100 个设计参考网站
前端·设计
LinXunFeng7 小时前
拿竞品 App 一扫,技术栈全暴露了
android·flutter·开源
星栈7 小时前
视频即代码,Remotion 能做什么、不能做什么
前端·音视频开发
广州华水科技7 小时前
单北斗GNSS位移监测系统的应用与技术解析
前端
用户47949283569158 小时前
从一句话或代码仓到可交互 HTML:开源 Agent 画图技能 Archify v3.2 实测与选型边界
前端·后端·面试
风骏时光牛马10 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
Gracker10 小时前
AIW:从系统机制到性能排查,一本可以对照源码的 Android 电子书
android
三少爷的鞋10 小时前
代码越来越便宜,判断力越来越贵:AI 时代的 Android 架构与协程避坑指南
android
wangruofeng10 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构