react-video-recorder
About
Installation
|
1 2 3 4 5 |
yarn add react-video-recorder <span class="pl-c"># Note: this project has react, react-dom, prop-types & styled-components as peerDependencies,</span> <span class="pl-c"># so if you're starting from scratch run this instead:</span> yarn add react-video-recorder react react-dom prop-types styled-components |
Usage
Basic usage (edit in stakblitz):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span> <span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">render</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'react-dom'</span> <span class="pl-k">import</span> <span class="pl-v">VideoRecorder</span> <span class="pl-k">from</span> <span class="pl-s">'react-video-recorder'</span> <span class="pl-k">const</span> <span class="pl-v">App</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=></span> <span class="pl-kos">(</span> <span class="pl-c1"><</span><span class="pl-ent">VideoRecorder</span> <span class="pl-c1">onRecordingComplete</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">videoBlob</span> <span class="pl-c1">=></span> <span class="pl-kos">{</span> <span class="pl-c">// Do something with the video...</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'videoBlob'</span><span class="pl-kos">,</span> <span class="pl-s1">videoBlob</span><span class="pl-kos">)</span> <span class="pl-kos">}</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">></span> <span class="pl-kos">)</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1"><</span><span class="pl-v">App</span> <span class="pl-c1">/</span><span class="pl-c1">></span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'root'</span><span class="pl-kos">)</span><span class="pl-kos">)</span> |
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.
renderLoadingView
View that’s rendered while the camera is initializing.
() => <LoadingView />
See <LoadingView /> 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/>
renderUnsupportedView
View that’s rendered when the browser does not support recording video.
Default value: () => <UnsupportedView />
See <UnsupportedView /> source here.
renderErrorView
View that’s rendered an unexpected error occurs.
Default value: () => <ErrorView />
See <ErrorView /> source here.
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.
Development
Requirements
node version ">=8.3"
Install packages
|
1 |
yarn install |
Run the storybook demo
|
1 |
yarn start |
