useUserMedia

Category

Sensors

Export Size

698 B

Last Changed

5 days ago

Related

useDevicesListuseDisplayMediausePermission

Streaming via mediaDevices.getUserMedia

Demo

Usage

import { useUserMedia } from '@reause/core'
import { useEffect, useRef } from 'react'

const { stream, start } = useUserMedia()

const videoRef = useRef<HTMLVideoElement>(null)
useEffect(() => {
  // acquire the stream once mounted
  start()
}, [])

useEffect(() => {
  // preview on a video element
  videoRef.current.srcObject = stream ?? null
}, [stream])

Devices

import { useDevicesList, useUserMedia } from '@reause/core'

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

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

Type Declarations

export interface ConfigurableNavigator {
    navigator?: Navigator;
}

export interface UseUserMediaOptions extends ConfigurableNavigator {
    enabled?: boolean;
    autoSwitch?: boolean;
    constraints?: MediaStreamConstraints;
}

export interface UseUserMediaReturn {
    isSupported: boolean;
    stream: MediaStream | undefined;
    start: () => Promise<MediaStream | undefined>;
    stop: () => void;
    restart: () => Promise<MediaStream | undefined>;
    constraints: MediaStreamConstraints | undefined;
    enabled: boolean;
    autoSwitch: boolean;
}

export function useUserMedia(options?: UseUserMediaOptions): UseUserMediaReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.0 on

c5e1e - fix(core): resolve useUserMedia audit findings (#676)