React-video-recorder-ru NPM

react-video-recorder

Installation

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-components

Usage

Basic 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.

Modifying the UI

All the UI can be customized by passing the following props:

`renderDisconnectedView`

View that's rendered before the user enables the camera access.

Default value: () => <DisconnectedView />

See <DisconnectedView /> source here.

`renderVideoInputView`

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/>

`renderActions`

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.

`localization`

For localization, you need to pass a function with a new translation to the t parameter

const myLocal = (value) => { switch (value) { case 'ERROR_VIEW': return 'Oh snap! Your browser failed to record your video. Please restart it and try again'; case 'LOADING': return 'Loading...'; case 'PRESS': return 'PRESS'; case 'REC': return 'REC'; case 'WHEN_READY': return 'WHEN READY'; case 'RERECORD': return 'Use another video'; case 'UPLOAD': return 'Upload a video'; case 'RECORD_BTN': return 'Record a video'; case 'TURN_ON_BTN': return 'Turn my camera ON'; case 'UNSUPPORTED': return 'This browser is uncapable of recording video'; default: return ''; }}