@getapper/react-media-recorder NPM

@getapper/react-media-recorder :o2: :video_camera: :microphone:

@getapper/react-media-recorder is a react component with render prop that can be used to record audio/video streams using MediaRecorder API.

Installation

npm i -S @getapper/react-media-recorder

yarn add @getapper/react-media-recorder

Usage

import ReactMediaRecorder from "@getapper/react-media-recorder";

const RecordView = () => (
  <div>
    <ReactMediaRecorder
      video
      render={({ status, startRecording, stopRecording, mediaBlob, mediaUrl }) => (
        <div>
          <p>{status}</p>
          <button onClick={startRecording}>Start Recording</button>
          <button onClick={stopRecording}>Stop Recording</button>
          <video src={mediaUrl} controls />
        </div>
      )}
    />
  </div>
);

Since react-media-recording uses render prop, you can define what to render in the view. Just don't forget to wire the startRecording, stopRecording and mediaUrl to your component.

Props available in the `render` function

status

A string enum. Possible values:

idle
recording
paused
stopped
no_constraints
invalid_media_constraints
no_specified_media_found
media_in_use
media_aborted
permission_denied
delayed_start (only if a delay has been set) deprecating soon

If the audio is muted, you'll see the status suffixed with _muted.

startRecording

A function, which starts recording when invoked.

pauseRecording

A function, which pauses the recording when invoked.

resumeRecording

A function, which resumes the recording when invoked.

stopRecording

A function, which stops recording when invoked.

muteAudio

A function, which mutes the audio tracks when invoked.

unmuteAudio

A function which unmutes the audio tracks when invoked.

mediaBlob

A blob object that can be converted in a buffer and uploaded to a server.

mediaUrl

A blob url that can be wired to an <audio />, <video /> or an <a /> element.

Options / Props

audio

Can be either a boolean value or a MediaTrackConstraints object.

type: boolean or object
default: true

blobPropertyBag

From MDN:
An optional BlobPropertyBag dictionary which may specify the following two attributes (for the mediaBlob):

type, that represents the MIME type of the content of the array that will be put in the blob.
endings, with a default value of "transparent", that specifies how strings containing the line ending character \n are to be written out. It is one of the two values: "native", meaning that line ending characters are changed to match host OS filesystem convention, or "transparent", meaning that endings are stored in the blob without change

type: object
default:
if video is enabled,

{
   type: "video/mp4"
}

if there's only audio is enabled,

{
  type: "audio/wav"
}

delay deprecating soon

If you want to start recording after a delay. In milliseconds.

type: number
default: 0

muted deprcating soon

Whether you want to mute the audio (while recording video)

type: boolean
default: false

render

A function which accepts an object containing fields: status, startRecording, stopRecording, mediaUrl and mediaBlob. This function would return a react element/component.

type: function
default: () => null

video

Can be either a boolean value or a MediaTrackConstraints object.

type: boolean or object
default: false

whenStopped(blobUrl)

Will be invoked when the recording stops. This callback will be invoked with the blobUrl as its params.