safari 14.1 以下版本不支持 mediarecorder api，导致音频/视频录制失败；本文详解检测方法、降级策略及服务端录制替代方案。
safari 14.1 以下版本不支持 mediarecorder api，导致音频/视频录制失败；本文详解检测方法、降级策略及服务端录制替代方案。
MediaRecorder 是现代 Web 音视频录制的核心 API，但在 Safari 浏览器中存在显著兼容性限制：仅 Safari 14.1 及以上版本（2021 年 4 月发布）才原生支持 MediaRecorder。这意味着在 macOS Catalina（Safari 13）、iOS 13 或更早系统上，调用 new MediaRecorder(stream) 将直接抛出 TypeError: MediaRecorder is not supported，即使 getUserMedia 成功获取了音频流。
✅ 首先进行可靠的功能检测
不要依赖 User Agent 判断，而应使用标准特性检测：
// 检测 MediaRecorder 是否可用（含构造函数和基础方法）
const isMediaRecorderSupported =
typeof MediaRecorder !== 'undefined' &&
MediaRecorder.isTypeSupported('audio/webm; codecs=opus');
console.log('MediaRecorder supported:', isMediaRecorderSupported);
// 注意：Safari 14.1+ 支持 audio/webm，但不支持 video/webm（vp8/vp9）——需用 'video/mp4' 或 'video/quicktime'（实际支持有限）⚠️ 特别注意：你原代码中检测 video/webm; codecs=vp8 在 Safari 中始终返回 false，即使 MediaRecorder 存在——因为 Safari 从不支持 VP8 编码的 WebM 容器。应改用 Safari 实际支持的格式，例如：
// Safari 14.1+ 仅支持：
MediaRecorder.isTypeSupported('audio/mp4'); // ✅（部分版本）
MediaRecorder.isTypeSupported('audio/webm'); // ✅（Opus 编码，推荐）
MediaRecorder.isTypeSupported('audio/wav'); // ❌ 不支持? 当检测失败时的两种应对策略
方案一：优雅降级 + 用户提示（轻量级）
适用于无需支持旧版 Safari 的场景（如企业内网、可控终端）：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
if (!isMediaRecorderSupported) {
alert('您的浏览器暂不支持录音功能。请升级至 Safari 14.1 或更高版本，或切换至 Chrome/Firefox 浏览器。');
// 或显示友好 UI 提示，禁用录制按钮
recordButton.disabled = true;
recordButton.textContent = '不支持录音';
}方案二：WebRTC + 服务端录制（全版本兼容）
若必须支持 Safari 11+（即 macOS High Sierra / iOS 11 起），唯一可靠方案是绕过客户端编码，将原始 MediaStream 通过 WebRTC 发送到媒体服务器（如 Janus、Mediasoup 或 GStreamer WebRTC），由服务端完成录制与封装。
典型流程如下：
- 前端建立 RTCPeerConnection，将 audioStream 作为 sendonly 轨道发送；
- 服务端接收轨道，使用 GStreamer 或 FFmpeg 录制为 MP3/WAV/MP4；
- 录制完成后返回文件 URL 或 Blob 下载链接。
该方案虽开发成本高（需部署与运维媒体服务器、处理信令、NAT 穿透、负载均衡），但可 100% 兼容 Safari 11+，且支持高并发与持久化存储。
? 总结建议
- ✅ 优先检测 MediaRecorder 构造函数 + isTypeSupported('audio/webm')，而非依赖浏览器版本号；
- ✅ Safari 录音推荐使用 'audio/webm; codecs=opus'，避免 video/webm 等不支持格式；
- ⚠️ 若目标用户包含大量旧版 Safari（尤其教育、政务等场景），务必采用服务端录制方案；
- ? 可结合 CanIUse 数据 动态统计用户分布，权衡开发投入与覆盖范围。
兼容性不是障碍，而是架构选择的起点——合理分层（前端轻量录制 + 后端兜底）才能真正实现“一次编写，全端可用”。
