react-with-mediarecorder

React with media recorder

React Higher-Order Component for the MediaStream Recording API.

Capture audio or video from React Component.

Note: As of today (Abril 2019) the only browsers with MediaRecorder support are:

• Chrome 49+
• Firefox 30+
• Opera 36+

Go to caniuse to get updated info about support.

Install

npm install react-with-mediarecorder

Usage

WithMediaRecorder(Component)

import React from 'react'
import WithMediaRecorder from 'react-with-mediarecorder'

const Example = ({ mediaRecorder }) => (
  <div>
    <h1>Media recorder</h1>
    <p>{(mediaRecorder.isRecording) && '- Recording...'}</p>
    <div>
      <div>{mediaRecorder.previewElement}</div>
      <div>{mediaRecorder.recordedElement}</div>
    </div>
    <button onClick={mediaRecorder.askPermissions}>[?] ask/start</button>
    {(mediaRecorder.isRecording)
      ? <button onClick={mediaRecorder.stopRecord}>[x] stop</button>
      : <button onClick={mediaRecorder.record}>[o] record</button>
    }
  </div>
)

export default WithMediaRecorder(Example)

<ExampleWithRecorder
  constraints={{ video: true, audio: true }}
  recordDelayMs={2000}
  recordTimerMs={20000}
/>

Options props

• constraints: Object : required

  A MediaStreamConstraints object

  Most simple audio/video example:

  {
    video: true,
    audio: true
  }
  

• recordDelayMs: Int

  Time (ms) to wait for autorecord.

• recordTimerMs: Int

  Time (ms) to max record time

Injected props

• recordedElement: HTML Element
• previewElement: HTML Element
• isRecording: Bool
• askPermissions: Method
• closeMedia: Method
• pauseMedia: Method
• record: Method
• stopRecord: Method
• onRecordStart: Fn callback (stopRecordMethod)
• onRecordStop: Fn callback (mediaBlob)
• onUserAccepts: Fn Callback (MediaStream)