add device change notification and send to backend

[kylemcdonald]

something like this will help tell us when there is a device change on the iPhones:

if (navigator.mediaDevices && navigator.mediaDevices.ondevicechange !== undefined) {
    navigator.mediaDevices.ondevicechange = function() {
        console.log("devices changed");
        // Optionally enumerate devices to check the current list
        navigator.mediaDevices.enumerateDevices()
            .then((devices) => {
                devices.forEach((device) => {
                    console.log(`${device.kind}: ${device.label}, id = ${device.deviceId}`);
                });
            })
            .catch((err) => {
                console.error("Error enumerating devices: ", err);
            });
    };
} else {
    console.log("mediaDevices or ondevicechange is not supported by this browser.");
}

we should send that to the backend and then log it.

test if this is what happens when inputs_updated is called, and when the airpod goes out of range, and when it is put back in the case.

[kylemcdonald]

i'm logging these partially, but need more work to log it fully since according to this thread safari demands camera access in order to get full device IDs:

https://stackoverflow.com/questions/61629512/safari-13-1-navigator-mediadevices-enumeratedevices-return-only-audio-devices