传统多页Web应用集成Twilio Voice的音频权限问题求助

我们基于Asp.Net WebForms开发的传统多页Web应用集成Twilio Voice，采用Twilio JS SDK与TaskRouter.js实现。为解决页面频繁重载、导航中断通话的问题，用常驻专用电话页承载Twilio设备、Worker等核心组件，通过broadcast-channel与其他页面通信实现跨页电话控制。但遇到浏览器（至少Firefox）的安全限制：页面必须获得焦点才能访问音频设备，导致拨出通话无法发起、接听时弹窗无响应，必须聚焦电话页才能正常通话。

现有方案均存在缺陷：

• 方案1：来电保活电话页，拨出时关闭重开 → 仅支持拨出，无法跨页接听，新窗口未必能获焦点
• 方案2：当前窗口发起/接听，导航时暂挂通话、销毁重建设备恢复 → 用户体验极差
• 方案3：开发桌面应用替代电话页 → 维护成本高、易用性下降，希望避免
• 方案4：SharedWorker运行Twilio核心逻辑，切换音频上下文 → 可行性不确定

寻求可行解决方案建议。

1. 主动预授权音频权限+强制焦点唤起 #

• 系统初始化时，引导用户点击全局"激活电话功能"按钮，在点击事件中：
  1. 打开电话页并立即调用window.focus()强制聚焦
  2. 在电话页的focus事件中，提前执行navigator.mediaDevices.getUserMedia({audio: true})请求音频权限，同时初始化Twilio Device
• 来电触发时，通过broadcast-channel通知电话页调用window.focus()抢焦点，触发音频权限校验后再处理接听逻辑
• 拨出操作时，当前页先发送指令让电话页聚焦，收到"已聚焦"确认信号后，再触发拨出指令

2. 结合Notification API优化焦点唤起 #

• 来电时，先发送浏览器通知（new Notification('来电提醒', {body: '点击接听'})），用户点击通知时触发电话页window.focus()，此时用户的点击操作属于主动交互，可顺利激活音频设备
• 拨出时，在当前页的点击事件中，先指令电话页聚焦，再执行拨出逻辑
• 实时检测电话页焦点状态（document.hasFocus()），未聚焦时主动通过通知唤起

3. 验证SharedWorker方案的落地路径 #

• 将Twilio Device的初始化、WebSocket连接维护、通话状态监听等核心逻辑移至SharedWorker，后台持续运行不受页面导航影响
• 各页面通过MessagePort与SharedWorker通信，传递拨出/接听指令、同步通话状态
• 音频上下文仍绑定到当前活跃页面，但SharedWorker负责维护Twilio会话；页面切换时，通过broadcast-channel通知SharedWorker切换音频上下文到新页面，同时在新页面的用户交互事件中重新获取音频权限
• 注意：需测试Twilio JS SDK在SharedWorker环境的兼容性，部分依赖DOM API的功能需封装适配层，同时处理多页面连接时的状态同步问题

4. 当前页临时承载+电话页兜底的混合方案 #

• 用户发起拨出/接听时，优先在当前页初始化临时Twilio Device（利用当前页的用户交互触发音频权限）
• 页面导航前，通过broadcast-channel将通话会话信息、状态同步到常驻电话页
• 电话页接管通话（重新初始化Device并恢复会话），同时自动聚焦
• 新页面加载完成后，用户点击页面任意区域时，通过broadcast-channel将音频上下文切换回当前页，继续操作通话

内容的提问来源于stack exchange，提问作者AvahW