diff --git a/PWA_NPS.md b/PWA_NPS.md index 71580af..421fa1a 100644 --- a/PWA_NPS.md +++ b/PWA_NPS.md @@ -174,7 +174,44 @@ server { --- -## 九、HTTP 内网直连(不装 App) +## 十、手机麦克风无法使用? + +电脑能看到麦克风按钮,手机提示「检测不到麦克风」,通常是以下原因: + +### 1. 未使用 HTTPS(最常见) + +手机浏览器规定:`getUserMedia`(麦克风)**仅在 HTTPS / localhost 下可用**。 + +| 访问方式 | 电脑 | 手机 | +|----------|------|------| +| `http://192.168.x.x:5683` | 可能显示按钮但录音失败 | ❌ 检测不到麦克风 | +| `https://你的域名`(NPS+反代) | ✅ | ✅ | + +**解决:** 按本文档配置 NPS + 云服务器 HTTPS,用手机访问域名。 + +### 2. 云反代未放行麦克风权限 + +在云服务器的 Nginx / 面板反代中,确认响应头包含(教程示例,在你自己的反代里配置): + +```nginx +add_header Permissions-Policy "microphone=(self), camera=(self)" always; +``` + +Trading Studio 应用层也会发送该头;若反代覆盖了响应头,需在反代侧补上。 + +### 3. iOS / 微信浏览器限制 + +- **iOS**:请用 **Safari** 打开 HTTPS 域名,首次点击麦克风时点「允许」 +- **微信内置浏览器**:通常**不支持**网页录音 → 右上角「在浏览器中打开」 +- **已安装 PWA**:从桌面图标启动后,在系统设置中检查 Safari/Chrome 麦克风权限 + +### 4. 临时替代:上传录音文件 + +在 HTTP 内网或无法授权麦克风时,点击音频区域的 **「上传」** 标签,选择手机「语音备忘录」导出的 `.m4a` / `.wav` 文件,功能与现场录音相同。 + +--- + +## 十一、HTTP 内网直连(不装 App) 局域网内 `http://192.168.x.x:5683` 可正常使用全部功能,仅 **PWA 安装** 受限。 点击页面「安装 App」会提示需 HTTPS;功能不受影响。 @@ -184,4 +221,5 @@ server { ## 相关文档 - 内网部署:`DEPLOY.md` -- 服务器更新:`bash server-update.sh` +- 服务器更新:`bash server-update.sh` +- 麦克风问题:见上文 **第十节** diff --git a/app.py b/app.py index 1333b5c..9da9931 100644 --- a/app.py +++ b/app.py @@ -289,11 +289,28 @@ PWA_HEAD = """ return; } btn.style.display = "inline-flex"; + + // 非 HTTPS 时标记页面,用于显示麦克风提示 + if (!isSecure()) { + document.documentElement.classList.add("insecure-context"); + } }); })(); """ +MIC_HINT_HTML = """ +
+ 📱 手机 / 平板录音说明 + +
+""" + INSTALL_APP_BUTTON_HTML = """