Save the preferred device when the user is prompted?

js/hang/src/publish/source/device.ts

@@ -123,10 +123,19 @@ export class Device<Kind extends "audio" | "video"> {
 
 	// Manually request permission for the device, ignoring the result.
 	requestPermission() {
+		if (this.permission.peek()) return;
+
 		navigator.mediaDevices
 			.getUserMedia({ [this.kind]: true })
 			.then((stream) => {
 				this.permission.set(true);
+
+				// If the user selected a device during the dialog prompt, save it as the preferred device.
+				const deviceId = stream.getTracks().at(0)?.getSettings().deviceId;
+				if (deviceId) {
+					this.preferred.set(deviceId);
+				}
+
 				stream.getTracks().forEach((track) => {
 					track.stop();
 				});

js/hang/src/publish/source/microphone.ts

@@ -36,7 +36,7 @@ export class Microphone {
 		const constraints = effect.get(this.constraints) ?? {};
 		const finalConstraints: MediaTrackConstraints = {
 			...constraints,
-			deviceId: device ? { exact: device } : undefined,
+			deviceId: device !== undefined ? { exact: device } : undefined,
 		};
 
 		effect.spawn(async (cancel) => {
@@ -62,6 +62,11 @@ export class Microphone {
 
 			const settings = track.getSettings();
 
+			if (device === undefined) {
+				// Save the device that the user selected during the dialog prompt.
+				this.device.preferred.set(settings.deviceId);
+			}
+
 			effect.set(this.device.active, settings.deviceId);
 			effect.set(this.stream, track);
 		});