iOS浏览器授权麦克风权限后视频音量骤降的原因与解决方法

背景 #

我正在开发一款Web应用，用户可通过麦克风语音交互，观看根据语音内容动态变化的视频。示例流程：

• 用户访问页面
• 弹出麦克风权限请求弹窗，用户授权
• 用户点击开始按钮，备用视频开始播放，麦克风开启
• 用户说话，语音转为文本并分析，据此切换视频src
• 新视频播放，麦克风重新开启，循环此流程

问题 #

在iOS设备上，授权麦克风权限后视频音量会大幅降低，即使调至最大音量也难以听清，iPhone的音量按键调节效果甚微，导致用户体验极差。未授权麦克风权限时，视频音量正常。

疑问 #

该问题产生的原因是什么？如何阻止音量自动降低？仅iOS设备出现此问题，MacOS、Windows及Android系统均无此现象，是否有开发者遇到过类似情况？

上下文 #

补充说明：

• 使用两个<video>标签（绝对定位，宽高100%），通过切换z-index实现层级显示，隐藏加载、缓冲及黑屏状态，提升用户体验。当下一个视频加载完成可播放时，切换两者层级。
• 两个<video>标签均设置playsinline属性，满足WebKit的内联播放要求。
• 初始状态下两个视频均为静音，播放开始后取消静音。
• video.play()在用户授权麦克风权限后触发。

技术栈 #

• 最新版本的NextJS + Typescript
• 在iOS 16最新版本的Chrome和Safari中测试

2024更新：最终解决方案 #

1. 调整麦克风权限请求逻辑，用户进入聊天页面立即请求权限，授权后默认开启一次麦克风。
2. 对于iOS 16.4以下版本，麦克风关闭后等待约2秒再播放音频。
3. 对于iOS 16.5以上版本，使用audioSession API在开启麦克风前切换为play-and-record模式，播放音频前切换为playback模式，示例：navigator.session.type = "play-and-record"。
4. 若使用AudioContext API，关闭麦克风时需调用context.close()关闭上下文。

遗憾的是，Safari对同时使用麦克风和播放视频（音频）的交互式Web应用支持不佳，开发体验糟糕。

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