react-pre-hooksuseMediaDevices
This hook uses the user media devices (camera and microphone) and returns their states and controls as well as their stream object.
Options
- It takes a getUserMedia constraints, as well as some other options:
| Name | Type | Description |
|---|---|---|
| ref | RefObject | a <video> element reference. |
| startOnMount | Boolean | start automatically when the component is mounted (default is false). |
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | a <video> element reference. |
| stream | RefObject | the MediaStream object reference that you can use with a video element as srcObject, or with an AudioContext. |
| devices | Array | an array of the user's media devices. |
| start | Function | a function to start streaming, and it can take the user media constraints as a parameter (default is the initial constraints). |
| stop | Function | a function to stop streaming. |
Example Usage
tsx
import { useMediaDevices } from 'react-pre-hooks';
export default function Example() {
const { ref, start, stop } = useMediaDevices({ video: true, audio: true });
return (
<main>
<video ref={ref} />
<button onClick={() => start()}>Start</button>
<button onClick={() => stop()}>Stop</button>
</main>
);
}import { useMediaDevices } from 'react-pre-hooks';
export default function Example() {
const { ref, start, stop } = useMediaDevices({ video: true, audio: true });
return (
<main>
<video ref={ref} />
<button onClick={() => start()}>Start</button>
<button onClick={() => stop()}>Stop</button>
</main>
);
}