use-camera
v0.2.4
Published
A React hook to use the camera and audio of the device
Downloads
33
Readme
use-camera
A React hook to use the camera and audio of the device:
import React from "react";
import useCamera from "use-camera";
export default () => {
const ref = useCamera();
return <video ref={ref} autoPlay />;
};
It will ask the user to accept the camera and audio with the native browser prompt. If you only want only video
or audio
, set the other one to false:
import React from "react";
import useCamera from "use-camera";
// Video streaming
export const VideoStream () => {
const ref = useCamera({ audio: false });
return <video ref={ref} autoPlay />;
};
// Audio streaming
export const VideoStream () => {
const ref = useCamera({ video: false });
return <video ref={ref} autoPlay />;
};
Facing away
For mobile, if you want the camera to face the environment or want to pass some other video settings please use the video
key:
useCamera({ vide: { facingMode: 'environment', ... }})
Fullscreen example
To display the video in fullscreen, get the window size either manually:
import React from "react";
import useCamera from "use-camera";
const size = { width: window.innerWidth, height: window.innerHeight };
export default () => {
const ref = useCamera();
return <video ref={ref} autoPlay width={size.width} height={size.height} />;
};
Or with a useWindowSize
hook to listen for window resizing:
import React from "react";
import useCamera from "use-camera";
import useWindowSize from './use-window-size';
export default () => {
const ref = useCamera();
const size = useWindowSize();
return <video ref={ref} autoPlay width={size.width} height={size.height} />;
};