fix(useUserMedia): add deep watch to constraints (#5046)

babu-ch · ilyaliao · web-flow · commit 4b3e976d5211 · 2025-09-19T13:39:26.000Z
Co-authored-by: IlyaL &lt;ilyaliao324@gmail.com&gt;
diff --git a/packages/core/useUserMedia/demo.vue b/packages/core/useUserMedia/demo.vue
@@ -13,7 +13,7 @@ const { videoInputs: cameras } = useDevicesList({
 
 const video = useTemplateRef<HTMLVideoElement>('video')
 const { stream, enabled } = useUserMedia({
-  constraints: reactive({ video: { deviceId: currentCamera } }),
+  constraints: reactive({ video: { deviceId: { exact: currentCamera } } }),
 })
 
 watchEffect(() => {
diff --git a/packages/core/useUserMedia/index.ts b/packages/core/useUserMedia/index.ts
@@ -106,7 +106,7 @@ export function useUserMedia(options: UseUserMediaOptions = {}) {
       if (autoSwitch.value && stream.value)
         restart()
     },
-    { immediate: true },
+    { immediate: true, deep: true },
   )
 
   tryOnScopeDispose(() => {

Original file line number	Diff line number	Diff line change
`@@ -106,7 +106,7 @@ export function useUserMedia(options: UseUserMediaOptions = {}) {`
`106`	`106`	`if (autoSwitch.value && stream.value)`
`107`	`107`	`restart()`
`108`	`108`	`},`
`109`		`- { immediate: true },`
	`109`	`+ { immediate: true, deep: true },`
`110`	`110`	`)`
`111`	`111`
`112`	`112`	`tryOnScopeDispose(() => {`