yarn add react-video-recorder
# Note: this project has react, react-dom, prop-types & styled-components as peerDependencies,
# so if you're starting from scratch run this instead:
yarn add react-video-recorder react react-dom prop-types styled-componentsIf using Typescript, typing is available via:
yarn add -D @types/react-video-recorderBasic usage (edit in stakblitz):
import React from 'react'
import { render } from 'react-dom'
import VideoRecorder from 'react-video-recorder'
const App = () => (
<VideoRecorder
onRecordingComplete={(videoBlob) => {
// Do something with the video...
console.log('videoBlob', videoBlob)
}}
/>
)
render(<App />, document.getElementById('root'))Also check the Storybook for more demos and usage examples.
Note: if you click the "Show info" button in the top-right corner, you should be able to see a table with the supported prop-types.
All the UI can be customized by passing the following props:
View that's rendered before the user enables the camera access.
Default value: () => <DisconnectedView />
See <DisconnectedView /> source here.
View that's rendered while the camera is initializing.
() => <LoadingView />
See <LoadingView /> source here.
View that's rendered when the browser does not support inline recording but allows opening the native camera (mainly iOS).
Default value: ({ videoInput }) => <Fragment>{videoInput}</Fragment/>
View that's rendered when the browser does not support recording video.
Default value: () => <UnsupportedView />
See <UnsupportedView /> source here.
View that's rendered an unexpected error occurs.
Default value: () => <ErrorView />
See <ErrorView /> source here.
Overlay that's rendered on top of the views and that contains the elements like the buttons, the timer or the countdown.
See the default implementation here.
Requirements
node version ">=8.3"
Install packages
yarn installRun the storybook demo
yarn startTo commit run yarn start then commit. We use Husky to verify before committing.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent