# react-video-recorder-ru

> ```sh yarn add react-video-recorder

Latest version **0.0.7-development** (published 2021-10-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-video-recorder-ru
pnpm add react-video-recorder-ru
yarn add react-video-recorder-ru
bun add react-video-recorder-ru
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7-development |
| Published | 2021-10-06 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 91.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tamozhnii |

## Links

- npm: https://www.npmjs.com/package/react-video-recorder-ru
- Repository: https://github.com/Tamozhnii/react-video-recorder
- Homepage: https://github.com/Tamozhnii/react-video-recorder#readme
- Issues: https://github.com/Tamozhnii/react-video-recorder/issues
- npm.io page: https://npm.io/package/react-video-recorder-ru

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.8.3
- [ts-ebml](https://npm.io/package/ts-ebml.md) ^2.0.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-svg-inline](https://npm.io/package/react-svg-inline.md) ^2.1.0
- [styled-components](https://npm.io/package/styled-components.md) ^4.1.1

## Recent versions

- 0.0.7-development (latest) — 2021-10-06
- 0.0.6-development — 2021-10-06
- 0.0.5-development — 2021-10-06
- 0.0.4-development — 2021-09-09
- 0.0.3-development — 2021-08-30
- 0.0.2-development — 2021-08-27
- 0.0.1-development — 2021-03-05

## README

# react-video-recorder

## Installation

```sh
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)](https://stackblitz.com/edit/react-video-recorder-demo):

```js
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](https://react-video-recorder.vercel.app/) 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.](src/defaults/disconnected-view.js)

#### `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.](src/defaults/render-actions.js)

#### `localization`

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

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

```js
<VideoRecorder t={myLocal} />
```

[See the default localization here.](src/defaults/local.js)

## Development

Requirements

`node version ">=8.3"`

Install packages

```sh
yarn install
```

Run the storybook demo

```sh
yarn start
```

---
_Source: https://npm.io/package/react-video-recorder-ru · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._