Nuclear Pumpkin Mocha

    @deconet/react-video-recorder

    0.0.8 • Public • Published

    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.

    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

    yarn install

    Run the storybook demo

    yarn start

    Keywords

    none

    Install

    npm i @deconet/react-video-recorder

    DownloadsWeekly Downloads

    4

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    78.6 kB

    Total Files

    23

    Last publish

    Collaborators

    • glitch003