@getapper/react-media-recorder

    0.7.4 • Public • Published

    @getapper/react-media-recorder 🅾️ 📹 🎤

    @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  
    

    or

    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.

    type: function
    default: () => null

    Contributing

    Feel free to submit a PR if you found a bug (I might've missed many! 😀) or if you want to enhance it further.

    Thanks!. Happy Recording!

    Install

    npm i @getapper/react-media-recorder

    DownloadsWeekly Downloads

    1

    Version

    0.7.4

    License

    MIT

    Unpacked Size

    13.9 kB

    Total Files

    5

    Last publish

    Collaborators

    • antoniogiordano