front.js navigator.mediaDevices.ondevicechange not working

[Azureit]

I was creating a plugin to set the preferred audio out device, but will like to detect connect and disconnect of devices, but using navigator.mediaDevices.ondevicechange is not working. My code ./plugins/pref-audio-out-device/front.js

module.exports = () => {
	document.addEventListener('apiLoaded', apiEvent => {
		changeToPrefAudioOutDevice();
		navigator.mediaDevices.ondevicechange = (e) => {
			changeToPrefAudioOutDevice();
		};
	}, { once: true, passive: true })
};

function changeToPrefAudioOutDevice() {
	const prefAudioOutDeviceId = '74b147ea818349756def2d6dae3a5422f8be7f0ef7b91749f61cfbe7a83730fe'; //TODO load from plugin options

	navigator.mediaDevices.enumerateDevices().then((devices) => {
		devices.forEach((device) => {
			console.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
			if (device.kind === 'audiooutput' && // device type is audio output
				device.deviceId === prefAudioOutDeviceId && // preferred audio out device is connected
				document.querySelector('.video-stream,.html5-main-video').SinkId !== prefAudioOutDeviceId) { // preferred audio out device is not already set
					document.querySelector('.video-stream,.html5-main-video').setSinkId(device.deviceId); // set preferred audio out device
			}
		});
	}).catch((err) => {
		console.error(`${err.name}: ${err.message}`);
	});
}

(newbie here, limited knowledge of javascript)