react-video-preview

react video preview

Installation

NPM

npm install react-video-preview

Usage

Without jsx

ReactDOM.render(
  React.createElement(VideoPreview.VideoPreview, { videoId: 'webcam-preview', audio: true, width: 500, height: 500}, null),
  document.getElementById('root'));

With jsx

ReactDOM.render(
  <VideoPreview videoId="webcam-preview" audio={true} width={500} height={500} />,
  document.getElementById('root')
);

HOC

You can use HOC Preview to compose with another component and customize entire video/audio preview.

This is our default video component:

export const Video = props => (
  <video
    id="webcam-preview"
    className={props.className || "video"}
    height={props.height}
    width={props.width}
    autoPlay>
  </video>
);
 
// here our hoc Preview receiving default Video
// you can use your custom video component instead
export const VideoPreview = Preview(Video);