MediaDevices.ondevicechange 仅在系统新增/移除可枚举音视频设备（如USB摄像头、蓝牙麦克风）、权限变更后首次枚举，或部分浏览器识别耳麦时触发；纯耳机插拔几乎不触发，因Web API无法访问底层热插拔事件，Safari亦不支持该事件。
MediaDevices.ondevicechange 是 HTML5 提供的用于监听媒体设备（如麦克风、摄像头、耳机等）动态增删的事件处理器，但它不区分设备类型是否为“耳机”，且对“耳机插拔”的支持存在严重限制——浏览器通常不会将普通 3.5mm 或 USB 耳机的插拔视为 devicechange 事件触发条件。
哪些设备变化能真正触发 ondevicechange？
该事件主要响应以下情况：
- 系统级新增或移除**可被 enumerateDevices() 列出的音视频输入/输出设备**（如外接 USB 摄像头、蓝牙麦克风、HDMI 音频输出设备）
- 用户授权状态变更后首次调用
enumerateDevices()（例如从拒绝权限变为允许，再刷新设备列表） - 部分浏览器（如 Chrome）在插入/拔出**带麦克风的耳机（耳麦）** 时可能触发（因系统将其识别为新的
audioinput设备），但纯耳机（仅 output）几乎从不触发
正确注册 ondevicechange 的写法
需注意：该事件必须在 navigator.mediaDevices 初始化后绑定，且推荐配合 enumerateDevices() 使用以确认实际变化：
navigator.mediaDevices.ondevicechange = async (event) => {
console.log('设备列表可能已变更，重新枚举…');
try {
const devices = await navigator.mediaDevices.enumerateDevices();
const audioInputs = devices.filter(d => d.kind === 'audioinput');
const audioOutputs = devices.filter(d => d.kind === 'audiooutput');
const videoInputs = devices.filter(d => d.kind === 'videoinput');
<pre class="brush:php;toolbar:false;">console.log('当前音频输入:', audioInputs.map(d => d.label));
console.log('当前音频输出:', audioOutputs.map(d => d.label));
console.log('当前视频输入:', videoInputs.map(d => d.label));} catch (err) { console.error('枚举设备失败:', err); } };
为什么监听“耳机插拔”不可靠？替代方案有哪些？
根本原因在于：Web API 无法访问底层硬件热插拔事件，尤其是纯音频输出设备（如耳机）在多数操作系统中不暴露为独立可枚举设备。常见替代思路：
-
监听 audioContext.state 变化：当系统默认音频输出切换（如从扬声器切到耳机），部分浏览器会触发
audioContext.onstatechange，但非标准、兼容性差 -
轮询 defaultSinkId（实验性）：Chrome 支持
HTMLMediaElement.sinkId和mediaDevices.getSupportedConstraints().setSinkId，可通过定时检查<audio></audio>元素的sinkId是否变化间接感知，但需用户交互授权且不跨浏览器 -
引导用户主动选择 + UI 提示：提供“检测耳机”按钮，调用
enumerateDevices()并提示用户插拔后点击，是最稳定实用的方式
注意事项与兼容性
使用前务必确认：
- 页面必须是 HTTPS 或 localhost（
mediaDevices在非安全上下文中被禁用） - Chrome ≥ 51、Firefox ≥ 63、Edge ≥ 79 支持
ondevicechange；Safari 目前（截至 Safari 17）仍不支持该事件 - 即使事件触发，也需调用
enumerateDevices()才能获取最新设备列表（事件本身不携带设备信息） - 首次访问设备前，用户必须已授予至少一项媒体权限（如
getUserMedia({audio:true})），否则enumerateDevices()返回空 label
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
