🅾️ 📹 🎤
@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.
render
function
Props available in the 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 adelay
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!
Thanks!. Happy Recording!