< html lang="zh"> < head > < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < title >麦克风监听示例 < style > body { font-family: Arial, sans-serif; margin: 20px; } #deviceList { margin-top: 20px; } < body > < h1 >麦克风设备监听 < button id="checkDevices">检查麦克风设备 < div id="deviceList"> < script > // 检查浏览器是否支持媒体设备 if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) { const deviceListDiv = document.getElementById('deviceList'); // 定义一个函数来获取并显示设备 function getAudioInputDevices() { navigator.mediaDevices.enumerateDevices().then(devices => { const audioInputs = devices.filter(device => device.kind === 'audioinput'); deviceListDiv.innerHTML = '< h2 >当前可用的麦克风设备:'; for(let device of audioInputs) { const deviceItem = document.createElement('div'); deviceItem.textContent = `${device.label} (ID: ${device.deviceId})`; deviceListDiv.appendChild(deviceItem); } if(audioInputs.length==0){ alert('没有可用的设备') }else{ alert('检测麦克风接入') } }); } // 初始获取设备 getAudioInputDevices(); // 监听设备变化 navigator.mediaDevices.ondevicechange = () => { console.log('设备发生变化'); getAudioInputDevices(); }; // 添加按钮点击事件 document.getElementById('checkDevices').addEventListener('click', getAudioInputDevices); } else { console.log('该浏览器不支持媒体设备API'); document.getElementById('deviceList').textContent = '该浏览器不支持媒体设备API'; }
标签:mediaDevices,麦克风,检测,javascript,device,navigator,getAudioInputDevices,设备 From: https://www.cnblogs.com/mypsq/p/18389303