React hook for accessing user media.
npm install react-use-user-media
React hook for accessing user media.
Using npm:
``sh`
$ npm install --save react-use-user-media
Using yarn:
`sh`
$ yarn add react-use-user-media
Since this module uses React Hooks, to try this out you'll need to install at least
the 16.8.0 version of react and react-dom:
`sh`
$ yarn add react@^16.8.0 react-dom@^16.8.0
`js
import React, { useEffect, useRef } from 'react';
import useUserMedia from 'react-use-user-media';
const constraints = { video: true };
function Example() {
const { state, stream } = useUserMedia(constraints);
const ref = useRef();
useEffect(() => {
if (state !== 'resolved' || !stream) {
return;
}
ref.current.srcObject = stream;
ref.current.play();
}, [state, stream]);
if (state === 'pending') {
return
Waiting...
; if (state === 'rejected') {
return
Error: {error.message}
; return ;
}
`
`js`
useUserMedia(Object): {
error: Error,
state: 'pending' | 'resolved' | 'rejected',
stream: MediaStream
}
Receives a constraints object
to call getUserMedia
with and returns an object with the stream,
the error and the state.
Note: When the constraints change a new media stream will be requested,constraints` object on every render.
so make sure you don't create a new
Please feel free to submit any issues or pull requests.
MIT