@getapper/react-media-recorder
is a react component with render prop that can be used to record audio/video streams using MediaRecorder API.
npm i -S @getapper/react-media-recorder
or
yarn add @getapper/react-media-recorder
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.
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 adelay
has been set) [deprecating soon]
If the audio is muted, you'll see the status suffixed with _muted
.
A function
, which starts recording when invoked.
A function
, which pauses the recording when invoked.
A function
, which resumes the recording when invoked.
A function
, which stops recording when invoked.
A function
, which mutes the audio tracks when invoked.
A function
which unmutes the audio tracks when invoked.
A blob
object that can be converted in a buffer and uploaded to a server.
A blob
url that can be wired to an <audio />
, <video />
or an <a />
element.
Can be either a boolean value or a MediaTrackConstraints object.
type: boolean
or object
default: true
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"
}
If you want to start recording after a delay. In milliseconds.
type: number
default: 0
Whether you want to mute the audio (while recording video)
type: boolean
default: false
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
Can be either a boolean value or a MediaTrackConstraints object.
type: boolean
or object
default: false
Will be invoked when the recording stops. This callback will be invoked with the blobUrl as its params.
type: function
default: () => null
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!