Fix device selection

app/components/EnsurePermissions.tsx

@@ -3,6 +3,8 @@ import { Button } from './Button'
 
 export interface EnsurePermissionsProps {
 	children?: ReactNode
+	onMicSelected: (deviceId: string) => void
+	onCameraSelected: (deviceId: string) => void
 }
 
 type PermissionState = 'denied' | 'granted' | 'prompt' | 'unable-to-determine'
@@ -66,6 +68,10 @@ export function EnsurePermissions(props: EnsurePermissionsProps) {
 								})
 								.then((ms) => {
 									if (mountedRef.current) setPermissionState('granted')
+									const micId = ms.getAudioTracks()[0].getSettings().deviceId
+									if (micId) props.onMicSelected(micId)
+									const cameraId = ms.getVideoTracks()[0].getSettings().deviceId
+									if (cameraId) props.onCameraSelected(cameraId)
 									ms.getTracks().forEach((t) => t.stop())
 								})
 								.catch(() => {

app/hooks/useUserMedia.ts

@@ -76,7 +76,29 @@ function useScreenshare() {
 	}
 }
 
-export default function useUserMedia() {
+export default function useUserMedia(options: {
+	micDeviceId?: string
+	cameraDeviceId?: string
+}) {
+	useEffect(() => {
+		if (!options.micDeviceId) return
+		navigator.mediaDevices
+			.enumerateDevices()
+			.then((ds) => ds.find((d) => d.deviceId === options.micDeviceId))
+			.then((d) => {
+				d && mic.setPreferredDevice(d)
+			})
+	}, [options.micDeviceId])
+	useEffect(() => {
+		if (!options.cameraDeviceId) return
+		navigator.mediaDevices
+			.enumerateDevices()
+			.then((ds) => ds.find((d) => d.deviceId === options.cameraDeviceId))
+			.then((d) => {
+				d && camera.setPreferredDevice(d)
+			})
+	}, [options.cameraDeviceId])
+
 	const [suppressNoise, setSuppressNoise] = useNoiseSuppression()
 	const [blurVideo, setBlurVideo] = useBlurVideo()
 

app/routes/_room.tsx

@@ -64,8 +64,13 @@ export const loader = async ({ context }: LoaderFunctionArgs) => {
 }
 
 export default function RoomWithPermissions() {
+	const [micDeviceId, setMicDeviceId] = useState<string>()
+	const [cameraDeviceId, setCameraDeviceId] = useState<string>()
 	return (
-		<EnsurePermissions>
+		<EnsurePermissions
+			onCameraSelected={setCameraDeviceId}
+			onMicSelected={setMicDeviceId}
+		>
 			<EnsureOnline
 				fallback={
 					<div className="grid h-full place-items-center">
@@ -78,16 +83,22 @@ export default function RoomWithPermissions() {
 					</div>
 				}
 			>
-				<RoomPreparation />
+				<RoomPreparation
+					micDeviceId={micDeviceId}
+					cameraDeviceId={cameraDeviceId}
+				/>
 			</EnsureOnline>
 		</EnsurePermissions>
 	)
 }
 
-function RoomPreparation() {
+function RoomPreparation(props: {
+	micDeviceId?: string
+	cameraDeviceId?: string
+}) {
 	const { roomName } = useParams()
 	invariant(roomName)
-	const userMedia = useUserMedia()
+	const userMedia = useUserMedia(props)
 	const room = useRoom({ roomName, userMedia })
 
 	return room.roomState.meetingId ? (

package.json

@@ -55,7 +55,7 @@
 		"nanoid": "^5.0.7",
 		"partyserver": "^0.0.57",
 		"partysocket": "^1.0.2",
-		"partytracks": "^0.0.46",
+		"partytracks": "^0.0.54",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-flip-toolkit": "^7.2.4",