javascript - 使用 MediaDevices.enumerateDevices() 观察变化

Question

我目前有一个连续轮询 MediaDevices.enumerateDevices() 的方法，它会返回一组已连接的媒体设备。

let devices = [];

function getDevices() {
    return new Promise(async (resolve, reject) => {
        try {
            const devices = await navigator.mediaDevices.enumerateDevices();
            resolve(devices);
        } catch (err) {
            reject(err);
        }
    });
}

async function listenForDeviceChanges() {
    devices = await getDevices();
    setTimeout(listenForDeviceChanges, 500);
}


(async () => {
    await listenForDeviceChanges();
})();

这看起来效率不高，所以我想知道在 MediaDevices API 中是否有另一种方法可以做到这一点？特别是某种“观察者”方法。

Answer 1

是的，有devicechange事件:

This happens whenever the set of media devices available to the user agent and, by extension, to the web site or app has changed

— https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/ondevicechange

例如

navigator.mediaDevices.ondevicechange = async function(event) {
  devices = await getDevices();
};