From 98b856a6bbb985faebf699c229c22aac09ca0bef Mon Sep 17 00:00:00 2001
From: Kevin Kipp <kkipp@cloudflare.com>
Date: Tue, 27 May 2025 15:13:23 -0500
Subject: [PATCH 1/3] Revert "Revert "Merge pull request #205 from
 cloudflare/use-partytracks-utils""

This reverts commit eafb00168a39216444c3df47dbffa8e6d8bec7a1.
---
 app/components/ScreenshareButton.tsx      |   8 +-
 app/components/VideoInputSelector.tsx     |  26 +-
 app/hooks/useMediaDevices.ts              |   1 -
 app/hooks/useStageManager.ts              |   2 +-
 app/hooks/useUserMedia.ts                 | 274 +++++++++-------------
 app/routes/_room.$roomName.room.tsx       |   4 +-
 app/routes/_room.tsx                      |  13 +-
 app/utils/blurVideoTrack.ts               | 133 ++++++-----
 app/utils/getUserMedia.ts                 |  66 ------
 app/utils/noiseSuppression.ts             |  29 ++-
 app/utils/rxjs/devicePrioritization.ts    | 144 ------------
 app/utils/rxjs/getDeviceListObservable.ts |  24 --
 app/utils/rxjs/getUserMediaTrack$.ts      |  16 --
 package-lock.json                         |  49 +++-
 package.json                              |   2 +-
 15 files changed, 255 insertions(+), 536 deletions(-)
 delete mode 100644 app/utils/getUserMedia.ts
 delete mode 100644 app/utils/rxjs/devicePrioritization.ts
 delete mode 100644 app/utils/rxjs/getDeviceListObservable.ts
 delete mode 100644 app/utils/rxjs/getUserMediaTrack$.ts

diff --git a/app/components/ScreenshareButton.tsx b/app/components/ScreenshareButton.tsx
index 72703a05..de7cf93c 100644
--- a/app/components/ScreenshareButton.tsx
+++ b/app/components/ScreenshareButton.tsx
@@ -9,11 +9,9 @@ interface ScreenshareButtonProps {}
 
 export const ScreenshareButton: FC<ScreenshareButtonProps> = () => {
 	const {
-		userMedia: { screenShareVideoTrack, startScreenShare, endScreenShare },
+		userMedia: { startScreenShare, endScreenShare, screenShareEnabled },
 	} = useRoomContext()
 
-	const sharing = screenShareVideoTrack !== undefined
-
 	const [canShareScreen, setCanShareScreen] = useState(true)
 
 	// setting this in a useEffect because we need to do this feature
@@ -31,8 +29,8 @@ export const ScreenshareButton: FC<ScreenshareButtonProps> = () => {
 
 	return (
 		<Button
-			displayType={sharing ? 'danger' : 'secondary'}
-			onClick={sharing ? endScreenShare : startScreenShare}
+			displayType={screenShareEnabled ? 'danger' : 'secondary'}
+			onClick={screenShareEnabled ? endScreenShare : startScreenShare}
 		>
 			<VisuallyHidden>Share screen</VisuallyHidden>
 			<Icon type="screenshare" />
diff --git a/app/components/VideoInputSelector.tsx b/app/components/VideoInputSelector.tsx
index 3ba1ad07..4847b302 100644
--- a/app/components/VideoInputSelector.tsx
+++ b/app/components/VideoInputSelector.tsx
@@ -1,26 +1,14 @@
-import { useObservableAsValue } from 'partytracks/react'
-import { useMemo, type FC } from 'react'
+import { type FC } from 'react'
 import useMediaDevices from '~/hooks/useMediaDevices'
 import { useRoomContext } from '~/hooks/useRoomContext'
 import { errorMessageMap } from '~/hooks/useUserMedia'
-import { getSortedDeviceListObservable } from '~/utils/rxjs/getDeviceListObservable'
 import { Option, Select } from './Select'
 
 export const VideoInputSelector: FC<{ id?: string }> = ({ id }) => {
 	const videoInputDevices = useMediaDevices((d) => d.kind === 'videoinput')
-	const sortedDeviceListObservable$ = useMemo(
-		() => getSortedDeviceListObservable(),
-		[]
-	)
-	const sortedDeviceList = useObservableAsValue(sortedDeviceListObservable$, [])
 
 	const {
-		userMedia: {
-			videoUnavailableReason,
-			videoDeviceId,
-			setVideoDeviceId,
-			videoEnabled,
-		},
+		userMedia: { videoUnavailableReason, videoDeviceId, setVideoDeviceId },
 	} = useRoomContext()
 
 	if (videoUnavailableReason) {
@@ -37,17 +25,9 @@ export const VideoInputSelector: FC<{ id?: string }> = ({ id }) => {
 		)
 	}
 
-	// we can only rely on videoDeviceId when the webcam is enabled because
-	// when it's not, the device id is being pulled from our black canvas track
-	// so we will instead fall back to show the user's preferred webcam that
-	// we would _try_ to acquire the next time they enable their webcam.
-	const shownDeviceId = videoEnabled
-		? videoDeviceId
-		: sortedDeviceList.find((d) => d.kind === 'videoinput')?.deviceId
-
 	return (
 		<div className="max-w-[40ch]">
-			<Select value={shownDeviceId} onValueChange={setVideoDeviceId} id={id}>
+			<Select value={videoDeviceId} onValueChange={setVideoDeviceId} id={id}>
 				{videoInputDevices.map((d) => (
 					<Option key={d.deviceId} value={d.deviceId}>
 						{d.label}
diff --git a/app/hooks/useMediaDevices.ts b/app/hooks/useMediaDevices.ts
index db6c4e21..d00c2ace 100644
--- a/app/hooks/useMediaDevices.ts
+++ b/app/hooks/useMediaDevices.ts
@@ -13,7 +13,6 @@ export default function useMediaDevices(
 		let mounted = true
 		const requestDevices = () => {
 			navigator.mediaDevices.enumerateDevices().then((d) => {
-				console.log(`enumerateDevices with filter fn: ${filterSource} `, d)
 				if (mounted) setDevices(d)
 			})
 		}
diff --git a/app/hooks/useStageManager.ts b/app/hooks/useStageManager.ts
index 19d23cd6..66e2a4de 100644
--- a/app/hooks/useStageManager.ts
+++ b/app/hooks/useStageManager.ts
@@ -47,7 +47,7 @@ export default function useStageManager(
 	const usersAndScreenshares = useMemo(
 		() =>
 			users.concat(self ? [self] : []).flatMap((u) =>
-				u.tracks.screenshare
+				u.tracks.screenShareEnabled
 					? [
 							u,
 							{
diff --git a/app/hooks/useUserMedia.ts b/app/hooks/useUserMedia.ts
index 1ce35ceb..05eb22eb 100644
--- a/app/hooks/useUserMedia.ts
+++ b/app/hooks/useUserMedia.ts
@@ -1,15 +1,10 @@
-import { useObservableAsValue, useValueAsObservable } from 'partytracks/react'
-import { useCallback, useMemo, useState } from 'react'
+import { getCamera, getMic, getScreenshare } from 'partytracks/client'
+import { useObservable, useObservableAsValue } from 'partytracks/react'
+import { useCallback, useEffect, useState } from 'react'
 import { useLocalStorage } from 'react-use'
-import { combineLatest, map, of, shareReplay, switchMap, tap } from 'rxjs'
-import invariant from 'tiny-invariant'
-import { blackCanvasStreamTrack } from '~/utils/blackCanvasStreamTrack'
 import blurVideoTrack from '~/utils/blurVideoTrack'
+import { mode } from '~/utils/mode'
 import noiseSuppression from '~/utils/noiseSuppression'
-import { prependDeviceToPrioritizeList } from '~/utils/rxjs/devicePrioritization'
-import { getScreenshare$ } from '~/utils/rxjs/getScreenshare$'
-import { getUserMediaTrack$ } from '~/utils/rxjs/getUserMediaTrack$'
-import { inaudibleAudioTrack$ } from '~/utils/rxjs/inaudibleAudioTrack$'
 
 export const errorMessageMap = {
 	NotAllowedError:
@@ -23,178 +18,133 @@ export const errorMessageMap = {
 
 type UserMediaError = keyof typeof errorMessageMap
 
-export default function useUserMedia() {
-	const [blurVideo, setBlurVideo] = useLocalStorage('blur-video', false)
+const broadcastByDefault = mode === 'production'
+export const mic = getMic({ broadcasting: broadcastByDefault })
+export const camera = getCamera({ broadcasting: true })
+export const screenshare = getScreenshare({ audio: false })
+
+function useNoiseSuppression() {
 	const [suppressNoise, setSuppressNoise] = useLocalStorage(
 		'suppress-noise',
 		false
 	)
-	// NOTE: in the past we've set this to be false by default in dev
-	// but as long as we're using the web audio API to generate an inaudible
-	// audio track we shouldn't do this because the audio track will not have
-	// any packets flowing out over the peer connection if the audio context
-	// fails to initialize due to no prior user interaction. If we need
-	// to require user interaction, we might as well have that interaction
-	// be for the user to manually mute themselves and not have to work around
-	// this. Once Calls is handling audio tracks with no data flowing better
-	// we should be able to go back to muting by default in dev.
-	const [audioEnabled, setAudioEnabled] = useState(true)
-	const [videoEnabled, setVideoEnabled] = useState(true)
-	const [screenShareEnabled, setScreenShareEnabled] = useState(false)
+	useEffect(() => {
+		if (suppressNoise) mic.addTransform(noiseSuppression)
+		return () => {
+			mic.removeTransform(noiseSuppression)
+		}
+	}, [suppressNoise])
+
+	return [suppressNoise, setSuppressNoise] as const
+}
+
+function useBlurVideo() {
+	const [blurVideo, setBlurVideo] = useLocalStorage('blur-video', false)
+	useEffect(() => {
+		if (blurVideo) camera.addTransform(blurVideoTrack)
+		return () => {
+			camera.removeTransform(blurVideoTrack)
+		}
+	}, [blurVideo])
+
+	return [blurVideo, setBlurVideo] as const
+}
+
+function useScreenshare() {
+	const screenShareIsBroadcasting = useObservableAsValue(
+		screenshare.video.isBroadcasting$,
+		false
+	)
+	const startScreenShare = useCallback(() => {
+		screenshare.audio.startBroadcasting()
+		screenshare.video.startBroadcasting()
+	}, [])
+	const endScreenShare = useCallback(() => {
+		screenshare.audio.stopBroadcasting()
+		screenshare.video.stopBroadcasting()
+	}, [])
+
+	return {
+		screenShareEnabled: screenShareIsBroadcasting,
+		startScreenShare,
+		endScreenShare,
+		screenShareVideoTrack$: screenshare.video.broadcastTrack$,
+		screenShareVideoTrack: useObservableAsValue(
+			screenshare.video.broadcastTrack$
+		),
+	}
+}
+
+export default function useUserMedia() {
+	const [suppressNoise, setSuppressNoise] = useNoiseSuppression()
+	const [blurVideo, setBlurVideo] = useBlurVideo()
+
 	const [videoUnavailableReason, setVideoUnavailableReason] =
 		useState<UserMediaError>()
 	const [audioUnavailableReason, setAudioUnavailableReason] =
 		useState<UserMediaError>()
 
-	const turnMicOff = useCallback(() => setAudioEnabled(false), [])
-	const turnMicOn = useCallback(() => setAudioEnabled(true), [])
-	const turnCameraOn = useCallback(() => setVideoEnabled(true), [])
-	const turnCameraOff = useCallback(() => setVideoEnabled(false), [])
-	const startScreenShare = useCallback(() => setScreenShareEnabled(true), [])
-	const endScreenShare = useCallback(() => setScreenShareEnabled(false), [])
-
-	const blurVideo$ = useValueAsObservable(blurVideo)
-	const videoEnabled$ = useValueAsObservable(videoEnabled)
-	const videoTrack$ = useMemo(() => {
-		const track$ = videoEnabled$.pipe(
-			switchMap((enabled) =>
-				enabled
-					? getUserMediaTrack$('videoinput').pipe(
-							tap({
-								error: (e) => {
-									invariant(e instanceof Error)
-									const reason =
-										e.name in errorMessageMap
-											? (e.name as UserMediaError)
-											: 'UnknownError'
-									if (reason === 'UnknownError') {
-										console.error('Unknown error getting video track: ', e)
-									}
-									setVideoUnavailableReason(reason)
-									setVideoEnabled(false)
-								},
-							})
-						)
-					: of(undefined)
-			)
-		)
-		return combineLatest([blurVideo$, track$]).pipe(
-			switchMap(([blur, track]) =>
-				blur && track
-					? blurVideoTrack(track)
-					: of(track ?? blackCanvasStreamTrack())
-			),
-			shareReplay({
-				refCount: true,
-				bufferSize: 1,
-			})
-		)
-	}, [videoEnabled$, blurVideo$])
-	const videoTrack = useObservableAsValue(videoTrack$)
-	const videoDeviceId = videoTrack?.getSettings().deviceId
-
-	const suppressNoiseEnabled$ = useValueAsObservable(suppressNoise)
-	const audioTrack$ = useMemo(() => {
-		return combineLatest([
-			getUserMediaTrack$('audioinput').pipe(
-				tap({
-					error: (e) => {
-						invariant(e instanceof Error)
-						const reason =
-							e.name in errorMessageMap
-								? (e.name as UserMediaError)
-								: 'UnknownError'
-						if (reason === 'UnknownError') {
-							console.error('Unknown error getting audio track: ', e)
-						}
-						setAudioUnavailableReason(reason)
-						setAudioEnabled(false)
-					},
-				})
-			),
-			suppressNoiseEnabled$,
-		]).pipe(
-			switchMap(([track, suppressNoise]) =>
-				of(suppressNoise && track ? noiseSuppression(track) : track)
-			),
-			shareReplay({
-				refCount: true,
-				bufferSize: 1,
-			})
-		)
-	}, [suppressNoiseEnabled$])
-
-	const alwaysOnAudioStreamTrack = useObservableAsValue(audioTrack$)
-	const audioDeviceId = alwaysOnAudioStreamTrack?.getSettings().deviceId
-	const audioEnabled$ = useValueAsObservable(audioEnabled)
-	const publicAudioTrack$ = useMemo(
-		() =>
-			audioEnabled$.pipe(
-				switchMap((enabled) => (enabled ? audioTrack$ : inaudibleAudioTrack$)),
-				shareReplay({
-					refCount: true,
-					bufferSize: 1,
-				})
-			),
-		[audioEnabled$, audioTrack$]
-	)
-	const audioStreamTrack = useObservableAsValue(publicAudioTrack$)
-
-	const screenShareVideoTrack$ = useMemo(
-		() =>
-			screenShareEnabled
-				? getScreenshare$({ contentHint: 'text' }).pipe(
-						tap({
-							next: (ms) => {
-								if (ms === undefined) {
-									setScreenShareEnabled(false)
-								}
-							},
-							finalize: () => setScreenShareEnabled(false),
-						}),
-						map((ms) => ms?.getVideoTracks()[0])
-					)
-				: of(undefined),
-		[screenShareEnabled]
-	)
-	const screenShareVideoTrack = useObservableAsValue(screenShareVideoTrack$)
+	const {
+		endScreenShare,
+		startScreenShare,
+		screenShareEnabled,
+		screenShareVideoTrack,
+		screenShareVideoTrack$,
+	} = useScreenshare()
+
+	const micDevices = useObservableAsValue(mic.devices$, [])
+	const cameraDevices = useObservableAsValue(camera.devices$, [])
 
-	const setVideoDeviceId = (deviceId: string) =>
-		navigator.mediaDevices.enumerateDevices().then((devices) => {
-			const device = devices.find((d) => d.deviceId === deviceId)
-			if (device) prependDeviceToPrioritizeList(device)
-		})
+	useObservable(mic.error$, (e) => {
+		const reason =
+			e.name in errorMessageMap ? (e.name as UserMediaError) : 'UnknownError'
+		if (reason === 'UnknownError') {
+			console.error('Unknown error getting audio track: ', e)
+		}
+		setAudioUnavailableReason(reason)
+		mic.stopBroadcasting()
+	})
 
-	const setAudioDeviceId = (deviceId: string) =>
-		navigator.mediaDevices.enumerateDevices().then((devices) => {
-			const device = devices.find((d) => d.deviceId === deviceId)
-			if (device) prependDeviceToPrioritizeList(device)
-		})
+	useObservable(camera.error$, (e) => {
+		const reason =
+			e.name in errorMessageMap ? (e.name as UserMediaError) : 'UnknownError'
+		if (reason === 'UnknownError') {
+			console.error('Unknown error getting video track: ', e)
+		}
+		setVideoUnavailableReason(reason)
+		camera.stopBroadcasting()
+	})
 
 	return {
-		turnMicOn,
-		turnMicOff,
-		audioStreamTrack,
-		audioMonitorStreamTrack: alwaysOnAudioStreamTrack,
-		audioEnabled,
+		turnMicOn: mic.startBroadcasting,
+		turnMicOff: mic.stopBroadcasting,
+		audioStreamTrack: useObservableAsValue(mic.broadcastTrack$),
+		audioMonitorStreamTrack: useObservableAsValue(mic.localMonitorTrack$),
+		audioEnabled: useObservableAsValue(mic.isBroadcasting$, broadcastByDefault),
 		audioUnavailableReason,
-		publicAudioTrack$,
-		privateAudioTrack$: audioTrack$,
-		audioDeviceId,
-		setAudioDeviceId,
-
-		setVideoDeviceId,
-		videoDeviceId,
-		turnCameraOn,
-		turnCameraOff,
-		videoEnabled,
+		publicAudioTrack$: mic.broadcastTrack$,
+		privateAudioTrack$: mic.localMonitorTrack$,
+		audioDeviceId: useObservableAsValue(mic.activeDevice$)?.deviceId,
+		setAudioDeviceId: (deviceId: string) => {
+			const found = micDevices.find((d) => d.deviceId === deviceId)
+			if (found) mic.setPreferredDevice(found)
+		},
+
+		setVideoDeviceId: (deviceId: string) => {
+			const found = cameraDevices.find((d) => d.deviceId === deviceId)
+			if (found) camera.setPreferredDevice(found)
+		},
+		videoDeviceId: useObservableAsValue(camera.activeDevice$)?.deviceId,
+		turnCameraOn: camera.startBroadcasting,
+		turnCameraOff: camera.stopBroadcasting,
+		videoEnabled: useObservableAsValue(camera.isBroadcasting$, true),
 		videoUnavailableReason,
 		blurVideo,
 		setBlurVideo,
 		suppressNoise,
 		setSuppressNoise,
-		videoTrack$,
-		videoStreamTrack: videoTrack,
+		videoTrack$: camera.broadcastTrack$,
+		videoStreamTrack: useObservableAsValue(camera.broadcastTrack$),
 
 		startScreenShare,
 		endScreenShare,
diff --git a/app/routes/_room.$roomName.room.tsx b/app/routes/_room.$roomName.room.tsx
index 6f0dcba8..83778918 100644
--- a/app/routes/_room.$roomName.room.tsx
+++ b/app/routes/_room.$roomName.room.tsx
@@ -131,8 +131,8 @@ function JoinedRoom({ bugReportsEnabled }: { bugReportsEnabled: boolean }) {
 	const { width } = useWindowSize()
 
 	const someScreenshare =
-		otherUsers.some((u) => u.tracks.screenshare) ||
-		Boolean(identity?.tracks.screenshare)
+		otherUsers.some((u) => u.tracks.screenShareEnabled) ||
+		Boolean(identity?.tracks.screenShareEnabled)
 	const stageLimit = width < 600 ? 2 : someScreenshare ? 5 : 9
 
 	const { recordActivity, actorsOnStage } = useStageManager(
diff --git a/app/routes/_room.tsx b/app/routes/_room.tsx
index 09a238b7..da2c1f3b 100644
--- a/app/routes/_room.tsx
+++ b/app/routes/_room.tsx
@@ -3,7 +3,7 @@ import { json } from '@remix-run/cloudflare'
 import { Outlet, useLoaderData, useParams } from '@remix-run/react'
 import { useObservableAsValue, useValueAsObservable } from 'partytracks/react'
 import { useMemo, useState } from 'react'
-import { from, of, switchMap } from 'rxjs'
+import { of } from 'rxjs'
 import invariant from 'tiny-invariant'
 import { EnsureOnline } from '~/components/EnsureOnline'
 import { EnsurePermissions } from '~/components/EnsurePermissions'
@@ -201,13 +201,10 @@ function Room({ room, userMedia }: RoomProps) {
 	)
 	const pushedAudioTrack = useObservableAsValue(pushedAudioTrack$)
 
-	const pushedScreenSharingTrack$ = useMemo(() => {
-		return userMedia.screenShareVideoTrack$.pipe(
-			switchMap((track) =>
-				track ? from(partyTracks.push(of(track))) : of(undefined)
-			)
-		)
-	}, [partyTracks, userMedia.screenShareVideoTrack$])
+	const pushedScreenSharingTrack$ = useMemo(
+		() => partyTracks.push(userMedia.screenShareVideoTrack$),
+		[partyTracks, userMedia.screenShareVideoTrack$]
+	)
 	const pushedScreenSharingTrack = useObservableAsValue(
 		pushedScreenSharingTrack$
 	)
diff --git a/app/utils/blurVideoTrack.ts b/app/utils/blurVideoTrack.ts
index 6d0e03b8..9cddee07 100644
--- a/app/utils/blurVideoTrack.ts
+++ b/app/utils/blurVideoTrack.ts
@@ -1,11 +1,12 @@
 import '@mediapipe/selfie_segmentation'
 import * as bodySegmentation from '@tensorflow-models/body-segmentation'
 import '@tensorflow/tfjs-backend-webgl'
+import { Observable } from 'rxjs'
 
-export default async function blurVideoTrack(
-	originalVideoStreamTrack: MediaStreamTrack
-) {
-	const segmenter = await bodySegmentation.createSegmenter(
+let loadedSegmenter: null | bodySegmentation.BodySegmenter = null
+const loadSegmenter = async () => {
+	if (loadedSegmenter !== null) return loadedSegmenter
+	loadedSegmenter = await bodySegmentation.createSegmenter(
 		bodySegmentation.SupportedModels.MediaPipeSelfieSegmentation,
 		{
 			runtime: 'mediapipe',
@@ -15,72 +16,82 @@ export default async function blurVideoTrack(
 		}
 	)
 
-	const { height: h = 0, width: w = 0 } = originalVideoStreamTrack.getSettings()
+	return loadedSegmenter
+}
 
-	const video = document.createElement('video')
-	video.height = h
-	video.width = w
-	// needed for iOS Safari to allow playing
-	video.muted = true
-	// needed for iOS Safari to allow playing
-	video.setAttribute('playsinline', '')
-	const loaded = new Promise((res) =>
-		video.addEventListener('loadedmetadata', res, { once: true })
-	)
-	const mediaStream = new MediaStream()
-	mediaStream.addTrack(originalVideoStreamTrack)
-	video.srcObject = mediaStream
-	video.play()
-	await loaded
+export default function blurVideoTrack(
+	originalVideoStreamTrack: MediaStreamTrack
+): Observable<MediaStreamTrack> {
+	return new Observable((subscriber) => {
+		;(async () => {
+			const segmenter = await loadSegmenter()
 
-	const canvas = document.createElement('canvas')
-	// we need to create a context in order for this to work with firefox
-	const _contex = canvas.getContext('2d')
-	canvas.height = h
-	canvas.width = w
+			const { height: h = 0, width: w = 0 } =
+				originalVideoStreamTrack.getSettings()
 
-	async function drawBlur() {
-		const segmentation = await segmenter.segmentPeople(video)
-		const foregroundThreshold = 0.6
-		const backgroundBlurAmount = 12
-		const edgeBlurAmount = 3
-		const flipHorizontal = false
+			const video = document.createElement('video')
+			video.height = h
+			video.width = w
+			// needed for iOS Safari to allow playing
+			video.muted = true
+			// needed for iOS Safari to allow playing
+			video.setAttribute('playsinline', '')
+			const loaded = new Promise((res) =>
+				video.addEventListener('loadedmetadata', res, { once: true })
+			)
+			const mediaStream = new MediaStream()
+			mediaStream.addTrack(originalVideoStreamTrack)
+			video.srcObject = mediaStream
+			video.play()
+			await loaded
 
-		await bodySegmentation.drawBokehEffect(
-			canvas,
-			video,
-			segmentation,
-			foregroundThreshold,
-			backgroundBlurAmount,
-			edgeBlurAmount,
-			flipHorizontal
-		)
-	}
+			const canvas = document.createElement('canvas')
+			// we need to create a context in order for this to work with firefox
+			const _contex = canvas.getContext('2d')
 
-	const blurredTrack = canvas.captureStream().getVideoTracks()[0]
+			canvas.height = h
+			canvas.width = w
 
-	let t = -1
-	async function tick() {
-		await drawBlur()
-		t = window.setTimeout(tick, 1000 / 30) // 30fps
-	}
+			async function drawBlur() {
+				const segmentation = await segmenter.segmentPeople(video)
+				const foregroundThreshold = 0.6
+				const backgroundBlurAmount = 12
+				const edgeBlurAmount = 3
+				const flipHorizontal = false
 
-	await drawBlur()
-	tick()
+				await bodySegmentation.drawBokehEffect(
+					canvas,
+					video,
+					segmentation,
+					foregroundThreshold,
+					backgroundBlurAmount,
+					edgeBlurAmount,
+					flipHorizontal
+				)
+			}
 
-	blurredTrack.stop = () => {
-		clearTimeout(t)
-		MediaStreamTrack.prototype.stop.call(originalVideoStreamTrack)
-	}
+			const blurredTrack = canvas.captureStream().getVideoTracks()[0]
 
-	// if the device generating this stream is disconnected, we should stop
-	originalVideoStreamTrack.addEventListener('ended', (e) => {
-		blurredTrack.stop()
-		// proxy ended event to blurredTrack
-		blurredTrack.dispatchEvent(e)
-	})
+			let t = -1
+			async function tick() {
+				await drawBlur()
+				t = window.setTimeout(tick, 1000 / 30) // 30fps
+			}
+
+			await drawBlur()
+			tick()
 
-	blurredTrack.getSettings = () => originalVideoStreamTrack.getSettings()
+			// if the device generating this stream is disconnected, we should stop
+			originalVideoStreamTrack.addEventListener('ended', (e) => {
+				blurredTrack.stop()
+				// proxy ended event to blurredTrack
+				blurredTrack.dispatchEvent(e)
+			})
 
-	return blurredTrack
+			subscriber.add(() => {
+				clearTimeout(t)
+			})
+			subscriber.next(blurredTrack)
+		})()
+	})
 }
diff --git a/app/utils/getUserMedia.ts b/app/utils/getUserMedia.ts
deleted file mode 100644
index 7b5f13e3..00000000
--- a/app/utils/getUserMedia.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-interface MediaTrackConstraintsWithLabels extends MediaTrackConstraintSet {
-	advanced?: MediaTrackConstraintSet[]
-	label?: string
-}
-
-interface MediaStreamConstraintsWithLabels {
-	audio?: boolean | MediaTrackConstraintsWithLabels
-	peerIdentity?: string
-	preferCurrentTab?: boolean
-	video?: boolean | MediaTrackConstraintsWithLabels
-}
-
-/**
- * utility that basically has the same API as getUserMedia
- * but can accept a 'label' property on the audio and video
- * media track constraints that it will fallback to if it cannot
- * find the device id.
- */
-export async function getUserMediaExtended(
-	constraints?: MediaStreamConstraintsWithLabels
-) {
-	const devices = await navigator.mediaDevices.enumerateDevices()
-
-	if (devices.filter((d) => d.label !== '').length === 0) {
-		// request both audio and video together so we can only show
-		// the user one prompt.
-		await navigator.mediaDevices
-			.getUserMedia({
-				video: true,
-				audio: true,
-			})
-			.then((ms) => {
-				ms.getTracks().forEach((t) => t.stop())
-			})
-	}
-
-	if (!constraints) return navigator.mediaDevices.getUserMedia()
-	const { audio, video, peerIdentity, preferCurrentTab } = constraints
-
-	const newContsraints: MediaStreamConstraints = {
-		peerIdentity,
-		preferCurrentTab,
-	}
-
-	if (typeof audio === 'object') {
-		const { label, deviceId, ...rest } = audio
-		const foundDevice =
-			devices.find((d) => d.deviceId === deviceId) ??
-			devices.find((d) => d.label === label && d.kind === 'audioinput')
-		newContsraints.audio = { ...rest, deviceId: foundDevice?.deviceId }
-	} else {
-		newContsraints.audio = audio
-	}
-
-	if (typeof video === 'object') {
-		const { label, deviceId, ...rest } = video
-		const foundDevice =
-			devices.find((d) => d.deviceId === deviceId) ??
-			devices.find((d) => d.label === label && d.kind === 'videoinput')
-		newContsraints.video = { ...rest, deviceId: foundDevice?.deviceId }
-	} else {
-		newContsraints.video = video
-	}
-
-	return navigator.mediaDevices.getUserMedia(newContsraints)
-}
diff --git a/app/utils/noiseSuppression.ts b/app/utils/noiseSuppression.ts
index e9948404..8eb54b8d 100644
--- a/app/utils/noiseSuppression.ts
+++ b/app/utils/noiseSuppression.ts
@@ -1,24 +1,22 @@
 // adopted from https://github.com/jitsi/jitsi-meet/tree/master/react/features/stream-effects/noise-suppression
 
+import { Observable } from 'rxjs'
 import invariant from 'tiny-invariant'
 
 export default function noiseSuppression(
 	originalAudioStreamTrack: MediaStreamTrack
-): MediaStreamTrack {
-	const mediaStream = new MediaStream()
-	mediaStream.addTrack(originalAudioStreamTrack)
-
-	const suppressor = new NoiseSuppressionEffect()
-	const output = suppressor.startEffect(mediaStream)
-
-	const noiseSuppressedTrack = output.getAudioTracks()[0]
-	noiseSuppressedTrack.stop = () => {
-		suppressor.stopEffect()
-		MediaStreamTrack.prototype.stop.call(originalAudioStreamTrack)
-	}
-	noiseSuppressedTrack.getSettings = () =>
-		originalAudioStreamTrack.getSettings()
-	return noiseSuppressedTrack
+): Observable<MediaStreamTrack> {
+	return new Observable<MediaStreamTrack>((subscriber) => {
+		const mediaStream = new MediaStream()
+		mediaStream.addTrack(originalAudioStreamTrack)
+		const suppressor = new NoiseSuppressionEffect()
+		const output = suppressor.startEffect(mediaStream)
+		const noiseSuppressedTrack = output.getAudioTracks()[0]
+		subscriber.add(() => {
+			suppressor.stopEffect()
+		})
+		subscriber.next(noiseSuppressedTrack)
+	})
 }
 
 /**
@@ -76,6 +74,7 @@ class NoiseSuppressionEffect {
 			.addModule(workletUrl)
 			.then(() => {
 				invariant(this._audioContext)
+				if (this._audioContext.state === 'closed') return
 				// After the resolution of module loading, an AudioWorkletNode can be constructed.
 				this._noiseSuppressorNode = new AudioWorkletNode(
 					this._audioContext,
diff --git a/app/utils/rxjs/devicePrioritization.ts b/app/utils/rxjs/devicePrioritization.ts
deleted file mode 100644
index b72cbb4c..00000000
--- a/app/utils/rxjs/devicePrioritization.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import type { Observable } from 'rxjs'
-import { BehaviorSubject, merge, of } from 'rxjs'
-
-export interface GetDeviceListOptions {
-	prioritizeList?: Array<Partial<MediaDeviceInfo>>
-	deprioritizeList?: Array<Partial<MediaDeviceInfo>>
-}
-
-export const sortMediaDeviceInfo =
-	(options: GetDeviceListOptions) =>
-	(a: MediaDeviceInfo, b: MediaDeviceInfo) => {
-		const { prioritizeList = [], deprioritizeList = [] } = options
-		const priorityA = prioritizeList.findIndex(
-			(item) => item.label === a.label && item.kind === a.kind
-		)
-		const priorityB = prioritizeList.findIndex(
-			(item) => item.label === b.label && item.kind === b.kind
-		)
-
-		// both are in the prioritizeList,
-		// compare indicies to sort
-		if (priorityA !== -1 && priorityB !== -1) {
-			return priorityA - priorityB
-		} else if (priorityA !== -1) {
-			return -1
-		} else if (priorityB !== -1) {
-			return 1
-		}
-
-		if (b.label.toLowerCase().includes('virtual')) {
-			return -1
-		}
-
-		if (b.label.toLowerCase().includes('iphone microphone')) {
-			return -1
-		}
-
-		const deprioritizeA = deprioritizeList.some(
-			(item) => item.label === a.label && item.kind === a.kind
-		)
-		const deprioritizeB = deprioritizeList.some(
-			(item) => item.label === b.label && item.kind === b.kind
-		)
-
-		if (deprioritizeA && !deprioritizeB) {
-			// move A down the list
-			return 1
-		} else if (!deprioritizeA && deprioritizeB) {
-			// move B down the list
-			return -1
-		}
-
-		// leave as is
-		return 0
-	}
-
-const PRIORITIZED_DEVICE_LIST = 'PRIORITIZED_DEVICE_LIST'
-const DEPRIORITIZED_DEVICE_LIST = 'DEPRIORITIZED_DEVICE_LIST'
-
-export function getPrioritizationList(): Array<Partial<MediaDeviceInfo>> {
-	const values = localStorage.getItem(PRIORITIZED_DEVICE_LIST)
-	if (values === null) return []
-	return JSON.parse(values)
-}
-
-export function prependDeviceToPrioritizeList(
-	device: Partial<MediaDeviceInfo>
-) {
-	removeDeviceFromPrioritizeList(device)
-	removeDeviceFromDeprioritizeList(device)
-	localStorage.setItem(
-		PRIORITIZED_DEVICE_LIST,
-		JSON.stringify([device, ...getPrioritizationList()])
-	)
-	devicePrioritizationListBehaviorSubject.next(getPrioritizationList())
-}
-
-export function removeDeviceFromPrioritizeList(
-	device: Partial<MediaDeviceInfo>
-) {
-	localStorage.setItem(
-		PRIORITIZED_DEVICE_LIST,
-		JSON.stringify(
-			getPrioritizationList().filter(
-				(v) => !(v.label === device.label && v.kind === device.kind)
-			)
-		)
-	)
-	devicePrioritizationListBehaviorSubject.next(getPrioritizationList())
-}
-
-export function getDeprioritizationList(): Array<Partial<MediaDeviceInfo>> {
-	const values = localStorage.getItem(DEPRIORITIZED_DEVICE_LIST)
-	if (values === null) return []
-	return JSON.parse(values)
-}
-
-export function appendDeviceToDeprioritizeList(
-	device: Partial<MediaDeviceInfo>
-) {
-	localStorage.setItem(
-		DEPRIORITIZED_DEVICE_LIST,
-		JSON.stringify([...getDeprioritizationList(), device])
-	)
-	deviceDeprioritizationListBehaviorSubject.next(getDeprioritizationList())
-}
-
-export function removeDeviceFromDeprioritizeList(
-	device: Partial<MediaDeviceInfo>
-) {
-	localStorage.setItem(
-		DEPRIORITIZED_DEVICE_LIST,
-		JSON.stringify(
-			getDeprioritizationList().filter(
-				(v) => !(v.label === device.label && v.kind === device.kind)
-			)
-		)
-	)
-	deviceDeprioritizationListBehaviorSubject.next(getDeprioritizationList())
-}
-
-const devicePrioritizationListBehaviorSubject = new BehaviorSubject<
-	Partial<MediaDeviceInfo>[]
->([])
-
-const deviceDeprioritizationListBehaviorSubject = new BehaviorSubject<
-	Partial<MediaDeviceInfo>[]
->([])
-
-export function getPrioritizedDeviceListObservable(): Observable<
-	Partial<MediaDeviceInfo>[]
-> {
-	return merge(
-		devicePrioritizationListBehaviorSubject,
-		of(getPrioritizationList())
-	)
-}
-
-export function getDeprioritizedDeviceListObservable() {
-	return merge(
-		deviceDeprioritizationListBehaviorSubject,
-		of(getDeprioritizationList())
-	)
-}
diff --git a/app/utils/rxjs/getDeviceListObservable.ts b/app/utils/rxjs/getDeviceListObservable.ts
deleted file mode 100644
index 92029c0d..00000000
--- a/app/utils/rxjs/getDeviceListObservable.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { devices$ } from 'partytracks/client'
-import { combineLatest, map, withLatestFrom } from 'rxjs'
-import {
-	getDeprioritizedDeviceListObservable,
-	getPrioritizedDeviceListObservable,
-	sortMediaDeviceInfo,
-} from './devicePrioritization'
-
-export function getSortedDeviceListObservable() {
-	return combineLatest([devices$, getPrioritizedDeviceListObservable()]).pipe(
-		// we don't want updating this list to re-trigger acquisition flow
-		// so we will just grab the latest here instead of including in the
-		// combineLatest above
-		withLatestFrom(getDeprioritizedDeviceListObservable()),
-		map(([[devices, prioritizeList], deprioritizeList]) =>
-			devices.sort(
-				sortMediaDeviceInfo({
-					prioritizeList,
-					deprioritizeList,
-				})
-			)
-		)
-	)
-}
diff --git a/app/utils/rxjs/getUserMediaTrack$.ts b/app/utils/rxjs/getUserMediaTrack$.ts
deleted file mode 100644
index c0a94ebf..00000000
--- a/app/utils/rxjs/getUserMediaTrack$.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { resilientTrack$ } from 'partytracks/client'
-import type { Observable } from 'rxjs'
-import { getSortedDeviceListObservable } from './getDeviceListObservable'
-
-export function getUserMediaTrack$(
-	kind: 'audioinput' | 'videoinput'
-): Observable<MediaStreamTrack> {
-	return resilientTrack$({
-		kind,
-		devicePriority$: getSortedDeviceListObservable(),
-		constraints:
-			kind === 'videoinput'
-				? { width: { ideal: 1280 }, height: { ideal: 720 } }
-				: {},
-	})
-}
diff --git a/package-lock.json b/package-lock.json
index 176c6e1c..1aa8c33b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
 				"nanoid": "^5.0.7",
 				"partyserver": "^0.0.57",
 				"partysocket": "^1.0.2",
-				"partytracks": "^0.0.36",
+				"partytracks": "^0.0.39",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1",
 				"react-flip-toolkit": "^7.2.4",
@@ -9391,6 +9391,15 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/jose": {
+			"version": "6.0.11",
+			"resolved": "https://registry.npmjs.org/jose/-/jose-6.0.11.tgz",
+			"integrity": "sha512-QxG7EaliDARm1O1S8BGakqncGT9s25bKL1WSf6/oa17Tkqwi8D2ZNglqCF+DsYF88/rV66Q/Q2mFAy697E1DUg==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/panva"
+			}
+		},
 		"node_modules/js-cookie": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
@@ -11947,14 +11956,26 @@
 			}
 		},
 		"node_modules/partytracks": {
-			"version": "0.0.36",
-			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.36.tgz",
-			"integrity": "sha512-ZIWBdf3WXNaQL30cymFAQ7CCvegD8tiPtGFTQP5tvpZTeWhQCxn9tOCC2yHJPJoLbcwxIg/9wr6CHQb3XKXoCA==",
+			"version": "0.0.39",
+			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.39.tgz",
+			"integrity": "sha512-ycmkoea1IXHm1nC1ggZxK5cjqZ6+O06LylHk8e1VlZMHl19u//cMjw3hMMyPiN6MXPAmuUqQ6paOxs0y6f1cYQ==",
+			"license": "ISC",
 			"dependencies": {
+				"cookie": "^1.0.2",
+				"jose": "^6.0.10",
 				"rxjs": "^7.8.2",
 				"tiny-invariant": "^1.3.3"
 			}
 		},
+		"node_modules/partytracks/node_modules/cookie": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+			"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/path-exists": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -22780,6 +22801,11 @@
 			"integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
 			"dev": true
 		},
+		"jose": {
+			"version": "6.0.11",
+			"resolved": "https://registry.npmjs.org/jose/-/jose-6.0.11.tgz",
+			"integrity": "sha512-QxG7EaliDARm1O1S8BGakqncGT9s25bKL1WSf6/oa17Tkqwi8D2ZNglqCF+DsYF88/rV66Q/Q2mFAy697E1DUg=="
+		},
 		"js-cookie": {
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
@@ -24606,12 +24632,21 @@
 			}
 		},
 		"partytracks": {
-			"version": "0.0.36",
-			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.36.tgz",
-			"integrity": "sha512-ZIWBdf3WXNaQL30cymFAQ7CCvegD8tiPtGFTQP5tvpZTeWhQCxn9tOCC2yHJPJoLbcwxIg/9wr6CHQb3XKXoCA==",
+			"version": "0.0.39",
+			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.39.tgz",
+			"integrity": "sha512-ycmkoea1IXHm1nC1ggZxK5cjqZ6+O06LylHk8e1VlZMHl19u//cMjw3hMMyPiN6MXPAmuUqQ6paOxs0y6f1cYQ==",
 			"requires": {
+				"cookie": "^1.0.2",
+				"jose": "^6.0.10",
 				"rxjs": "^7.8.2",
 				"tiny-invariant": "^1.3.3"
+			},
+			"dependencies": {
+				"cookie": {
+					"version": "1.0.2",
+					"resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+					"integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="
+				}
 			}
 		},
 		"path-exists": {
diff --git a/package.json b/package.json
index cacfdc23..d024c57d 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
 		"nanoid": "^5.0.7",
 		"partyserver": "^0.0.57",
 		"partysocket": "^1.0.2",
-		"partytracks": "^0.0.36",
+		"partytracks": "^0.0.39",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-flip-toolkit": "^7.2.4",

From 2cc64b51485eeb8c486db11511feb737a40e1b18 Mon Sep 17 00:00:00 2001
From: Kevin Kipp <kkipp@cloudflare.com>
Date: Wed, 28 May 2025 15:38:24 -0500
Subject: [PATCH 2/3] Update partytracks and use new top level screenshare APIs

---
 app/hooks/useUserMedia.ts |  6 ++----
 package-lock.json         | 14 +++++++-------
 package.json              |  2 +-
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/app/hooks/useUserMedia.ts b/app/hooks/useUserMedia.ts
index 05eb22eb..95f396a6 100644
--- a/app/hooks/useUserMedia.ts
+++ b/app/hooks/useUserMedia.ts
@@ -56,12 +56,10 @@ function useScreenshare() {
 		false
 	)
 	const startScreenShare = useCallback(() => {
-		screenshare.audio.startBroadcasting()
-		screenshare.video.startBroadcasting()
+		screenshare.startBroadcasting()
 	}, [])
 	const endScreenShare = useCallback(() => {
-		screenshare.audio.stopBroadcasting()
-		screenshare.video.stopBroadcasting()
+		screenshare.stopBroadcasting()
 	}, [])
 
 	return {
diff --git a/package-lock.json b/package-lock.json
index 1aa8c33b..4fff4c3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
 				"nanoid": "^5.0.7",
 				"partyserver": "^0.0.57",
 				"partysocket": "^1.0.2",
-				"partytracks": "^0.0.39",
+				"partytracks": "^0.0.45",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1",
 				"react-flip-toolkit": "^7.2.4",
@@ -11956,9 +11956,9 @@
 			}
 		},
 		"node_modules/partytracks": {
-			"version": "0.0.39",
-			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.39.tgz",
-			"integrity": "sha512-ycmkoea1IXHm1nC1ggZxK5cjqZ6+O06LylHk8e1VlZMHl19u//cMjw3hMMyPiN6MXPAmuUqQ6paOxs0y6f1cYQ==",
+			"version": "0.0.45",
+			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.45.tgz",
+			"integrity": "sha512-zlupNwnKoydKHEUQ1tI1vZDVOXO0j/1hfgh3qUFb093tAZuKpAjyJmkwApe8SRoxxqg+S1XlEljPHvyfnFkGDQ==",
 			"license": "ISC",
 			"dependencies": {
 				"cookie": "^1.0.2",
@@ -24632,9 +24632,9 @@
 			}
 		},
 		"partytracks": {
-			"version": "0.0.39",
-			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.39.tgz",
-			"integrity": "sha512-ycmkoea1IXHm1nC1ggZxK5cjqZ6+O06LylHk8e1VlZMHl19u//cMjw3hMMyPiN6MXPAmuUqQ6paOxs0y6f1cYQ==",
+			"version": "0.0.45",
+			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.45.tgz",
+			"integrity": "sha512-zlupNwnKoydKHEUQ1tI1vZDVOXO0j/1hfgh3qUFb093tAZuKpAjyJmkwApe8SRoxxqg+S1XlEljPHvyfnFkGDQ==",
 			"requires": {
 				"cookie": "^1.0.2",
 				"jose": "^6.0.10",
diff --git a/package.json b/package.json
index d024c57d..6032cb1c 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
 		"nanoid": "^5.0.7",
 		"partyserver": "^0.0.57",
 		"partysocket": "^1.0.2",
-		"partytracks": "^0.0.39",
+		"partytracks": "^0.0.45",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-flip-toolkit": "^7.2.4",

From e07df11b570354e2ee25eef350b203fdbb241ca8 Mon Sep 17 00:00:00 2001
From: Kevin Kipp <kkipp@cloudflare.com>
Date: Fri, 30 May 2025 08:44:06 -0500
Subject: [PATCH 3/3] Fix webcam constraints

---
 app/hooks/useUserMedia.ts |  5 ++++-
 package-lock.json         | 14 +++++++-------
 package.json              |  2 +-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/app/hooks/useUserMedia.ts b/app/hooks/useUserMedia.ts
index 95f396a6..cc120109 100644
--- a/app/hooks/useUserMedia.ts
+++ b/app/hooks/useUserMedia.ts
@@ -20,7 +20,10 @@ type UserMediaError = keyof typeof errorMessageMap
 
 const broadcastByDefault = mode === 'production'
 export const mic = getMic({ broadcasting: broadcastByDefault })
-export const camera = getCamera({ broadcasting: true })
+export const camera = getCamera({
+	broadcasting: true,
+	constraints: { width: { ideal: 1280 }, height: { ideal: 720 } },
+})
 export const screenshare = getScreenshare({ audio: false })
 
 function useNoiseSuppression() {
diff --git a/package-lock.json b/package-lock.json
index 4fff4c3c..6235b33c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,7 +32,7 @@
 				"nanoid": "^5.0.7",
 				"partyserver": "^0.0.57",
 				"partysocket": "^1.0.2",
-				"partytracks": "^0.0.45",
+				"partytracks": "^0.0.46",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1",
 				"react-flip-toolkit": "^7.2.4",
@@ -11956,9 +11956,9 @@
 			}
 		},
 		"node_modules/partytracks": {
-			"version": "0.0.45",
-			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.45.tgz",
-			"integrity": "sha512-zlupNwnKoydKHEUQ1tI1vZDVOXO0j/1hfgh3qUFb093tAZuKpAjyJmkwApe8SRoxxqg+S1XlEljPHvyfnFkGDQ==",
+			"version": "0.0.46",
+			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.46.tgz",
+			"integrity": "sha512-lYhyJOzqDXTrVrMKdOSaKRP1KvtkxXB174WXAud0GMMJmHAYdNWQJTDxlaHK2K/AeDmDlIveYY0aP5pbbCUJ7Q==",
 			"license": "ISC",
 			"dependencies": {
 				"cookie": "^1.0.2",
@@ -24632,9 +24632,9 @@
 			}
 		},
 		"partytracks": {
-			"version": "0.0.45",
-			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.45.tgz",
-			"integrity": "sha512-zlupNwnKoydKHEUQ1tI1vZDVOXO0j/1hfgh3qUFb093tAZuKpAjyJmkwApe8SRoxxqg+S1XlEljPHvyfnFkGDQ==",
+			"version": "0.0.46",
+			"resolved": "https://registry.npmjs.org/partytracks/-/partytracks-0.0.46.tgz",
+			"integrity": "sha512-lYhyJOzqDXTrVrMKdOSaKRP1KvtkxXB174WXAud0GMMJmHAYdNWQJTDxlaHK2K/AeDmDlIveYY0aP5pbbCUJ7Q==",
 			"requires": {
 				"cookie": "^1.0.2",
 				"jose": "^6.0.10",
diff --git a/package.json b/package.json
index 6032cb1c..ba06ddb9 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
 		"nanoid": "^5.0.7",
 		"partyserver": "^0.0.57",
 		"partysocket": "^1.0.2",
-		"partytracks": "^0.0.45",
+		"partytracks": "^0.0.46",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-flip-toolkit": "^7.2.4",