VueUse 中文文档

Appearance

useUserMedia ​

Category
Export Size
569 B
Last Changed
15 minutes ago
Related

响应式 mediaDevices.getUserMedia 流。

Demo ​

source

用法 ​

js
import { useUserMedia } from '@vueuse/core'

const { stream, start } = useUserMedia()

start()
ts
const video = document.getElementById('video')

watchEffect(() => {
  // 在 video 元素上预览
  video.srcObject = stream.value
})

设备 ​

js
import { useDevicesList, useUserMedia } from '@vueuse/core'

const {
  videoInputs: cameras,
  audioInputs: microphones,
} = useDevicesList({
  requestPermissions: true,
})
const currentCamera = computed(() => cameras.value[0]?.deviceId)
const currentMicrophone = computed(() => microphones.value[0]?.deviceId)

const { stream } = useUserMedia({
  constraints: {
    video: { deviceId: currentCamera },
    audio: { deviceId: currentMicrophone, }
  }
})

类型声明 ​

显示类型声明
typescript
export interface UseUserMediaOptions extends ConfigurableNavigator {
  /**
   * 流是否已启用
   * @default false
   */
  enabled?: MaybeRef<boolean>
  /**
   * 当设备 ID 或约束条件发生变化时重新创建流
   *
   * @default true
   */
  autoSwitch?: MaybeRef<boolean>
  /**
   * 应用于请求的 MediaStream 的 MediaStreamConstraints
   * 如果提供了约束条件，则会覆盖 videoDeviceId 和 audioDeviceId
   *
   * @default {}
   */
  constraints?: MaybeRef<MediaStreamConstraints>
}
/**
 * 响应式 `mediaDevices.getUserMedia` 流处理
 *
 * @see https://vueuse.org/useUserMedia
 * @param options
 */
export declare function useUserMedia(options?: UseUserMediaOptions): {
  isSupported: ComputedRef<boolean>
  stream: Ref<MediaStream | undefined, MediaStream | undefined>
  start: () => Promise<MediaStream | undefined>
  stop: () => void
  restart: () => Promise<MediaStream | undefined>
  constraints: Ref<
    | MediaStreamConstraints
    | {
        audio?:
          | boolean
          | {
              advanced?:
                | {
                    aspectRatio?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    autoGainControl?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    channelCount?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    deviceId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    displaySurface?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    echoCancellation?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    facingMode?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    frameRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    groupId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    height?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    noiseSuppression?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    sampleRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    sampleSize?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    width?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                  }[]
                | undefined
              aspectRatio?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              autoGainControl?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              channelCount?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              deviceId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              displaySurface?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              echoCancellation?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              facingMode?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              frameRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              groupId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              height?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              noiseSuppression?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              sampleRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              sampleSize?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              width?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
            }
          | undefined
        peerIdentity?: string | undefined
        preferCurrentTab?: boolean | undefined
        video?:
          | boolean
          | {
              advanced?:
                | {
                    aspectRatio?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    autoGainControl?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    channelCount?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    deviceId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    displaySurface?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    echoCancellation?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    facingMode?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    frameRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    groupId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    height?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    noiseSuppression?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    sampleRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    sampleSize?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    width?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                  }[]
                | undefined
              aspectRatio?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              autoGainControl?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              channelCount?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              deviceId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              displaySurface?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              echoCancellation?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              facingMode?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              frameRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              groupId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              height?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              noiseSuppression?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              sampleRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              sampleSize?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              width?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
            }
          | undefined
      }
    | undefined,
    | MaybeRef<MediaStreamConstraints>
    | {
        audio?:
          | boolean
          | {
              advanced?:
                | {
                    aspectRatio?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    autoGainControl?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    channelCount?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    deviceId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    displaySurface?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    echoCancellation?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    facingMode?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    frameRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    groupId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    height?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    noiseSuppression?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    sampleRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    sampleSize?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    width?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                  }[]
                | undefined
              aspectRatio?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              autoGainControl?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              channelCount?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              deviceId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              displaySurface?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              echoCancellation?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              facingMode?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              frameRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              groupId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              height?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              noiseSuppression?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              sampleRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              sampleSize?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              width?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
            }
          | undefined
        peerIdentity?: string | undefined
        preferCurrentTab?: boolean | undefined
        video?:
          | boolean
          | {
              advanced?:
                | {
                    aspectRatio?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    autoGainControl?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    channelCount?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    deviceId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    displaySurface?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    echoCancellation?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    facingMode?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    frameRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    groupId?:
                      | string
                      | string[]
                      | {
                          exact?: (string | string[]) | undefined
                          ideal?: (string | string[]) | undefined
                        }
                      | undefined
                    height?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    noiseSuppression?:
                      | boolean
                      | {
                          exact?: boolean | undefined
                          ideal?: boolean | undefined
                        }
                      | undefined
                    sampleRate?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    sampleSize?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                    width?:
                      | number
                      | {
                          exact?: number | undefined
                          ideal?: number | undefined
                          max?: number | undefined
                          min?: number | undefined
                        }
                      | undefined
                  }[]
                | undefined
              aspectRatio?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              autoGainControl?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              channelCount?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              deviceId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              displaySurface?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              echoCancellation?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              facingMode?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              frameRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              groupId?:
                | string
                | string[]
                | {
                    exact?: (string | string[]) | undefined
                    ideal?: (string | string[]) | undefined
                  }
                | undefined
              height?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              noiseSuppression?:
                | boolean
                | {
                    exact?: boolean | undefined
                    ideal?: boolean | undefined
                  }
                | undefined
              sampleRate?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              sampleSize?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
              width?:
                | number
                | {
                    exact?: number | undefined
                    ideal?: number | undefined
                    max?: number | undefined
                    min?: number | undefined
                  }
                | undefined
            }
          | undefined
      }
    | undefined
  >
  enabled: Ref<boolean, MaybeRef<boolean>>
  autoSwitch: Ref<boolean, MaybeRef<boolean>>
}
export type UseUserMediaReturn = ReturnType<typeof useUserMedia>

Source ​

Source • Demo • Docs

贡献者 ​

Anthony Fu
丶远方
Anthony Fu
Waleed Khaled
Martin
Jelf
wheat
Shinigami
Alex Kozack

变更日志 ​

v10.8.0 on 2/20/2024
6d44d - fix: stop stream on scope dispose (#3757)
v10.0.0-beta.3 on 4/12/2023
85468 - fix!: remove deprecated apis
v10.0.0-beta.0 on 3/14/2023
8f2a3 - feat!: add constraints - remove deviceIds (#2032)

Released under the MIT License.

Copyright © 2020-PRESENT Anthony Fu and VueUse contributors