Treat a webcam as a single source

Author: baku89

core/src/TethrManager.ts

@@ -9,7 +9,7 @@ type TethrManagerEvents = {
 }
 export class TethrManager extends EventEmitter<TethrManagerEvents> {
 	#ptpusbCameras: Map<USBDevice, TethrPTPUSB> = new Map()
-	#webcamCameras: Map<string, TethrWebcam> = new Map()
+	#webcam: TethrWebcam | null = null
 
 	constructor() {
 		super()
@@ -70,34 +70,21 @@ export class TethrManager extends EventEmitter<TethrManagerEvents> {
 	async #refreshPairedWebcam(): Promise<TethrWebcam | null> {
 		const devices = await this.enumerateWebcamDeviceInfo()
 
-		let camera: TethrWebcam | null = null
-
-		const prevCameras = this.#webcamCameras
-
-		this.#webcamCameras = new Map()
-
-		for (const device of devices) {
-			if (device.kind !== 'videoinput' || device.deviceId === '') {
-				continue
-			}
-
-			const prevCamera = prevCameras.get(device.deviceId)
+		const videoDevices = devices.filter(
+			device => device.kind === 'videoinput' && device.deviceId !== ''
+		)
 
-			if (prevCamera) {
-				this.#webcamCameras.set(device.deviceId, prevCamera)
-			} else {
-				camera = new TethrWebcam(device)
-				this.#webcamCameras.set(device.deviceId, camera)
-			}
+		if (!this.#webcam && videoDevices.length > 0) {
+			this.#webcam = new TethrWebcam()
 		}
 
-		return camera ?? [...this.#webcamCameras.values()][0] ?? null
+		return this.#webcam
 	}
 
 	#emitPairedCameras() {
 		const cameras = [
 			...this.#ptpusbCameras.values(),
-			...this.#webcamCameras.values(),
+			...(this.#webcam ? [this.#webcam] : []),
 		]
 
 		this.emit('pairedCameraChange', cameras)

core/src/TethrWebcam.ts

@@ -14,20 +14,18 @@ type CaptureHandler =
 	  }
 
 export class TethrWebcam extends Tethr {
-	#mediaDeviceInfo: MediaDeviceInfo
 	#media: MediaStream | null = null
 	#captureHandler: CaptureHandler | null = null
 	#facingModeDict = new BiMap<string, string>()
 
-	constructor(mediaDeviceInfo: MediaDeviceInfo) {
+	constructor() {
 		super()
-		this.#mediaDeviceInfo = mediaDeviceInfo
 	}
 
 	async open() {
 		try {
 			this.#media = await navigator.mediaDevices.getUserMedia({
-				video: {deviceId: this.#mediaDeviceInfo.deviceId},
+				video: true,
 			})
 		} catch {
 			throw new Error('No available webcam is connected')
@@ -88,7 +86,7 @@ export class TethrWebcam extends Tethr {
 	}
 
 	get name() {
-		return this.#mediaDeviceInfo.label
+		return 'Webcam'
 	}
 
 	// Configs

doc/src/App.vue

@@ -28,7 +28,7 @@
 			<ul class="webcam-list">
 				<li v-for="(cam, i) in pairedCameras" :key="i">
 					<button @click="onClickPairedCamera(cam)">
-						[{{ cam.type }}] {{ cam.name }}
+						{{ cam.name }}
 					</button>
 				</li>
 			</ul>