diff --git a/demo/src/App.vue b/demo/src/App.vue
index 87f5f7a..fce7532 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -14,22 +14,24 @@
 		</main>
 
 		<aside>
-			<ul>
-				<li v-for="(cam, i) in pairedCameras" :key="i">
-					<button>{{ i }}</button>
-				</li>
-			</ul>
 			<dl>
-				<dt>Request</dt>
-				<dt style="display: flex; gap: 1em">
+				<dt>Connect to</dt>
+				<dd class="connect-to">
 					<button class="connect-button" @click="requestCameras('usbptp')">
 						USB
 					</button>
 					<button class="connect-button" @click="requestCameras('webcam')">
 						Webcam
 					</button>
-				</dt>
+				</dd>
 			</dl>
+			<ul class="webcam-list">
+				<li v-for="(cam, i) in pairedCameras" :key="i">
+					<button @click="onClickCamera(cam)">
+						[{{ cam.type }}] {{ cam.name }}
+					</button>
+				</li>
+			</ul>
 
 			<template v-if="camera">
 				<h2>Actions</h2>
@@ -46,7 +48,7 @@
 					</template>
 					<template v-if="configs.canRunAutoFocus.value">
 						<dt>autoFocus</dt>
-						<dd><button @click="runAutoFocus">Run</button></dd>
+						<dd><button @click="camera.runAutoFocus">Run</button></dd>
 					</template>
 					<template v-if="configs.canRunManualFocus.value">
 						<dt>manualFocus</dt>
@@ -112,7 +114,7 @@
 							v-if="config.value !== null"
 							:key="name"
 							:label="name"
-							:config="config as any"
+							:config="config"
 						/>
 					</template>
 				</dl>
@@ -123,7 +125,7 @@
 
 <script lang="ts" setup>
 import {saveAs} from 'file-saver'
-import {TethrObject} from 'tethr'
+import {Tethr, TethrObject} from 'tethr'
 import {ref} from 'vue'
 
 import TethrConfig from './TethrConfig.vue'
@@ -167,14 +169,35 @@ async function onSave(object: TethrObject) {
 const {
 	pairedCameras,
 	camera,
+	openCamera,
+	closeCamera,
 	requestCameras,
 	configs,
 	liveviewMediaStream,
 	photoURL,
-	runAutoFocus,
 	toggleLiveview,
-	takePhoto,
-} = useTethr(onSave)
+} = useTethr()
+
+async function takePhoto() {
+	if (!camera.value) return
+	const result = await camera.value.takePhoto()
+	if (result.status === 'ok') {
+		for (const object of result.value) {
+			if (object.format !== 'raw') {
+				photoURL.value = URL.createObjectURL(object.blob)
+			}
+			onSave(object)
+		}
+	}
+}
+
+async function onClickCamera(cam: Tethr) {
+	if (cam.opened) {
+		closeCamera(cam)
+	} else {
+		openCamera(cam)
+	}
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -220,6 +243,7 @@ dl
 	&:deep(dt)
 		height 2em
 		line-height 2em
+		white-space nowrap
 
 	&:deep(dd)
 		display flex
@@ -231,4 +255,15 @@ dl
 		display block
 		width 100%
 		text-align center
+
+.connect-to
+	display: flex
+	gap: 1em
+	margin-bottom 1em
+
+.webcam-list
+	grid-column: 1 / span 2
+
+	button
+		width 100%
 </style>
diff --git a/demo/src/useTethr.ts b/demo/src/useTethr.ts
index 44df224..41d8a91 100644
--- a/demo/src/useTethr.ts
+++ b/demo/src/useTethr.ts
@@ -5,7 +5,6 @@ import {
 	ConfigType,
 	Tethr,
 	TethrManager,
-	TethrObject,
 } from 'tethr'
 import {onUnmounted, reactive, readonly, Ref, ref, shallowRef, watch} from 'vue'
 
@@ -60,12 +59,12 @@ export function useTethrConfig<N extends ConfigName>(
 	return readonly(config)
 }
 
-export function useTethr(onSave: (object: TethrObject) => void) {
+export function useTethr() {
 	const manager = new TethrManager()
 
 	const pairedCameras = shallowRef<Tethr[]>([])
 
-	manager.getPairedCameras().then(cameras => {
+	manager.addListener('pairedCameraChange', cameras => {
 		pairedCameras.value = cameras
 	})
 
@@ -84,26 +83,33 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 	}
 
 	async function openCamera(cam: Tethr) {
+		if (camera.value) {
+			await closeCamera(camera.value)
+		}
+
 		await cam.open()
 		camera.value = cam
 		cam.on('disconnect', onDisconnect)
 		cam.on('liveviewStreamUpdate', onLivewviewStreamUpdate)
 	}
 
-	async function closeCurrentSelectedCamera() {
+	async function closeCamera(cam: Tethr) {
 		if (!camera.value) return
 
 		camera.value.off('disconnect', onDisconnect)
 		camera.value.off('liveviewStreamUpdate', onLivewviewStreamUpdate)
 		await camera.value.close()
-		camera.value = null
+
+		if (camera.value === cam) {
+			camera.value = null
+		}
 	}
 
 	async function requestCameras(type: 'usbptp' | 'webcam') {
-		let cams: Tethr[]
+		let cam: Tethr | null
 		try {
-			cams = await manager.requestCameras(type)
-			if (cams.length === 0) {
+			cam = await manager.requestCamera(type)
+			if (!cam) {
 				return
 			}
 		} catch (err) {
@@ -113,26 +119,7 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 			return
 		}
 
-		await closeCurrentSelectedCamera()
-
-		await openCamera(cams[0])
-	}
-
-	async function takePhoto() {
-		if (!camera.value) return
-		const result = await camera.value.takePhoto()
-		if (result.status === 'ok') {
-			for (const object of result.value) {
-				if (object.format !== 'raw') {
-					photoURL.value = URL.createObjectURL(object.blob)
-				}
-				onSave(object)
-			}
-		}
-	}
-
-	async function runAutoFocus() {
-		await camera.value?.runAutoFocus()
+		await openCamera(cam)
 	}
 
 	async function toggleLiveview() {
@@ -158,6 +145,8 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 
 	return {
 		pairedCameras,
+		openCamera,
+		closeCamera,
 		camera,
 		requestCameras,
 		// DPC
@@ -199,8 +188,6 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 		},
 		liveviewMediaStream,
 		photoURL,
-		runAutoFocus,
 		toggleLiveview,
-		takePhoto,
 	}
 }
diff --git a/src/Tethr.ts b/src/Tethr.ts
index f998c80..3d21674 100644
--- a/src/Tethr.ts
+++ b/src/Tethr.ts
@@ -116,6 +116,8 @@ export abstract class Tethr
 	abstract close(): Promise<void>
 
 	abstract get opened(): boolean
+	abstract get type(): 'usbptp' | 'webcam'
+	abstract get name(): string
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	setLog(log: boolean) {
diff --git a/src/TethrManager.ts b/src/TethrManager.ts
index 19b004b..fb4e504 100644
--- a/src/TethrManager.ts
+++ b/src/TethrManager.ts
@@ -1,31 +1,107 @@
 import EventEmitter from 'eventemitter3'
 
 import {Tethr} from './Tethr'
-import {initTethrUSBPTP} from './TethrPTPUSB'
+import {initTethrUSBPTP, TethrPTPUSB} from './TethrPTPUSB'
 import {TethrWebcam} from './TethrWebcam'
-import {isntNil} from './util'
 
-export class TethrManager extends EventEmitter {
-	#cameras: Tethr[] | null = null
+type TethrManagerEvents = {
+	pairedCameraChange: (cameras: Tethr[]) => void
+}
+
+export class TethrManager extends EventEmitter<TethrManagerEvents> {
+	#ptpusbCameras: Map<USBDevice, TethrPTPUSB> = new Map()
+	#webcamCameras: Map<string, TethrWebcam> = new Map()
 
 	constructor() {
 		super()
+
+		this.#init()
+	}
+
+	async #init() {
+		console.log(this.#ptpusbCameras, this.#webcamCameras)
+		await Promise.allSettled([
+			this.#initPairedUSBPTPCameras(),
+			this.#refreshPairedWebcam(),
+		])
+
+		this.#emitPairedCameras()
+
+		// Detect USB PTP camera changes
+		navigator.usb.addEventListener('connect', async event => {
+			const camera = await initTethrUSBPTP(event.device)
+			if (camera) {
+				this.#ptpusbCameras.set(event.device, camera)
+				this.#emitPairedCameras()
+			}
+		})
+
+		navigator.usb.addEventListener('disconnect', event => {
+			const camera = this.#ptpusbCameras.get(event.device)
+			if (camera) {
+				this.#ptpusbCameras.delete(event.device)
+				this.#emitPairedCameras()
+			}
+		})
+
+		// Detect webcam changes
+		navigator.mediaDevices.addEventListener('devicechange', async e => {
+			await this.#refreshPairedWebcam()
+			this.#emitPairedCameras()
+		})
 	}
 
 	/**
-	 * Get all cameras that are connected and already paired with the browser. This can be called at any time.
-	 * @returns A list of cameras that are already connected
-n	 */
-	private async getPairedCameras() {
-		// Enumerate all USB devices
+	 * Initialize paired USB PTP cameras and add them to the manager. This should be called once during initialization.
+	 */
+	async #initPairedUSBPTPCameras() {
 		const usbDevices = await navigator.usb.getDevices()
-		const usbPromises = await Promise.all(usbDevices.map(initTethrUSBPTP))
-		const usbCameras = usbPromises.filter(isntNil)
+		const usbPromises = await Promise.allSettled(
+			usbDevices.map(initTethrUSBPTP)
+		)
+		const cameras = usbPromises
+			.filter(promise => promise.status === 'fulfilled')
+			.map(promise => (promise as PromiseFulfilledResult<TethrPTPUSB>).value)
+
+		for (const camera of cameras) {
+			this.#ptpusbCameras.set(camera.device.usb, camera)
+		}
+	}
+
+	async #refreshPairedWebcam(): Promise<TethrWebcam | null> {
+		const devices = await this.enumerateWebcamDeviceInfo()
+
+		let camera: TethrWebcam | null = null
 
-		// Enumerate all media devices (webcams)
-		const webcamDevices = await this.enumerateWebcamo()
+		const prevCameras = this.#webcamCameras
 
-		return [...usbCameras]
+		this.#webcamCameras = new Map()
+
+		for (const device of devices) {
+			if (device.kind !== 'videoinput' || device.deviceId === '') {
+				continue
+			}
+
+			const prevCamera = prevCameras.get(device.deviceId)
+
+			if (prevCamera) {
+				this.#webcamCameras.set(device.deviceId, prevCamera)
+			} else {
+				camera = new TethrWebcam(device)
+				this.#webcamCameras.set(device.deviceId, camera)
+			}
+		}
+
+		return camera ?? [...this.#webcamCameras.values()][0] ?? null
+	}
+
+	#emitPairedCameras() {
+		const cameras = [
+			...this.#ptpusbCameras.values(),
+			...this.#webcamCameras.values(),
+		]
+
+		this.emit('pairedCameraChange', cameras)
 	}
 
 	/**
@@ -33,36 +109,46 @@ n	 */
 	 * @param type The type of camera to request
 	 * @returns A list of cameras that were successfully connected to
 	 */
-	async requestCameras(type: 'usbptp' | 'webcam') {
+	async requestCamera(type: 'usbptp' | 'webcam'): Promise<Tethr | null> {
+		let camera: Tethr | null = null
+
 		switch (type) {
-			case 'usbptp':
-				return this.requestUSBPTPCameras()
-			case 'webcam':
-				return this.requestWebcams()
+			case 'usbptp': {
+				const ptpusbCamera = await this.requestUSBPTPCamera()
+				if (ptpusbCamera) {
+					this.#ptpusbCameras.set(ptpusbCamera.device.usb, ptpusbCamera)
+				}
+				camera = ptpusbCamera
+				break
+			}
+			case 'webcam': {
+				camera = await this.requestWebcam()
+			}
+		}
+
+		if (camera) {
+			this.#emitPairedCameras()
 		}
+
+		return camera
 	}
 
-	private async requestUSBPTPCameras() {
+	private async requestUSBPTPCamera(): Promise<TethrPTPUSB | null> {
 		let usbDevice: USBDevice
 		try {
 			usbDevice = await navigator.usb.requestDevice({filters: []})
 		} catch {
-			return []
+			return null
 		}
 
-		const camera = await initTethrUSBPTP(usbDevice)
-
-		if (!camera) return []
-
-		return [camera]
+		return await initTethrUSBPTP(usbDevice)
 	}
 
-	private async requestWebcams() {
+	private async requestWebcam() {
 		const media = await navigator.mediaDevices.getUserMedia({video: true})
 		media.getTracks().forEach(track => track.stop())
 
-		const camera = new TethrWebcam()
-		return [camera]
+		return this.#refreshPairedWebcam()
 	}
 
 	private async enumerateWebcamDeviceInfo() {
diff --git a/src/TethrPTPUSB/TethrPTPUSB.ts b/src/TethrPTPUSB/TethrPTPUSB.ts
index 7e7ab2d..9337ecf 100644
--- a/src/TethrPTPUSB/TethrPTPUSB.ts
+++ b/src/TethrPTPUSB/TethrPTPUSB.ts
@@ -49,19 +49,19 @@ type DataViewTypeForDatatypeCode<D extends DatatypeCode> =
 	D extends DatatypeCode.String
 		? string
 		: D extends DatatypeCode.Uint64
-		? bigint
-		: D extends DatatypeCode.Int64
-		? bigint
-		: D extends DatatypeCode.Uint128
-		? bigint
-		: D extends DatatypeCode.Int128
-		? bigint
-		: number
+			? bigint
+			: D extends DatatypeCode.Int64
+				? bigint
+				: D extends DatatypeCode.Uint128
+					? bigint
+					: D extends DatatypeCode.Int128
+						? bigint
+						: number
 
 export class TethrPTPUSB extends Tethr {
 	protected _opened = false
 
-	constructor(protected device: PTPDevice) {
+	constructor(readonly device: PTPDevice) {
 		super()
 	}
 
@@ -107,6 +107,14 @@ export class TethrPTPUSB extends Tethr {
 		return this._opened
 	}
 
+	get type(): 'usbptp' {
+		return 'usbptp'
+	}
+
+	get name(): string {
+		return this.device.usb.productName ?? 'Generic PTP Camera'
+	}
+
 	setLog(log: boolean) {
 		this.device.setLog(log)
 	}
diff --git a/src/TethrWebcam.ts b/src/TethrWebcam.ts
index 2a7f863..eaba626 100644
--- a/src/TethrWebcam.ts
+++ b/src/TethrWebcam.ts
@@ -21,17 +21,21 @@ type CaptureHandler =
 
 export class TethrWebcam extends Tethr {
 	#liveviewEnabled = false
+	#mediaDeviceInfo: MediaDeviceInfo
 	#media: MediaStream | null = null
 	#captureHandler: CaptureHandler | null = null
 	#facingModeDict = new BiMap<string, string>()
 
-	constructor() {
+	constructor(mediaDeviceInfo: MediaDeviceInfo) {
 		super()
+		this.#mediaDeviceInfo = mediaDeviceInfo
 	}
 
 	async open() {
 		try {
-			this.#media = await navigator.mediaDevices.getUserMedia({video: true})
+			this.#media = await navigator.mediaDevices.getUserMedia({
+				video: {deviceId: this.#mediaDeviceInfo.deviceId},
+			})
 		} catch {
 			throw new Error('No available webcam is connected')
 		}
@@ -85,6 +89,14 @@ export class TethrWebcam extends Tethr {
 		return !!this.#media
 	}
 
+	get type(): 'webcam' {
+		return 'webcam'
+	}
+
+	get name() {
+		return this.#mediaDeviceInfo.label
+	}
+
 	// Configs
 	async getCanStartLiveviewDesc() {
 		return createReadonlyConfigDesc(true)