A React component based on MediaRecorder() API to record audio/video streams
npm install react-media-recorderreact-media-recorder is a fully typed react component with render prop, or a react hook, that can be used to:
- Record audio/video
- Record screen
using MediaRecorder API.
``
npm i react-media-recorder
or
`
yarn add react-media-recorder
`javascript
import { ReactMediaRecorder } from "react-media-recorder";
const RecordView = () => (
{status}
Since
uses render prop, you can define what to render in the view. Just don't forget to wire the startRecording, stopRecording and mediaBlobUrl to your component.Usage with react hooks
`javascript
import { useReactMediaRecorder } from "react-media-recorder";const RecordView = () => {
const { status, startRecording, stopRecording, mediaBlobUrl } =
useReactMediaRecorder({ video: true });
return (
{status}
);
};
`The hook receives an object as argument with the same ReactMediaRecorder options / props (except the
function).$3
#### audio
Can be either a boolean value or a MediaTrackConstraints object.
type:
boolean or object
default: #### blobPropertyBag
From MDN:
An optional
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 changetype:
object
default:
if is enabled,`
{
type: "video/mp4"
}
if there's only
is enabled,`
{
type: "audio/wav"
}
#### customMediaStream
A media stream object itself (optional)
#### mediaRecorderOptions
An optional options object that will be passed to
. Please note that if you specify the MIME type via either audio or video prop _and_ through this mediaRecorderOptions, the mediaRecorderOptions have higher precedence.type:
object
default: #### onStart
A
that would get invoked when the MediaRecorder starts.type:
function()
default: #### onStop
A
that would get invoked when the MediaRecorder stops. It'll provide the blob and the blob url as its params.type:
function(blobUrl: string, blob: Blob)
default: #### stopStreamsOnStop
Whether to stop all streams on stop. By default, its
#### render
A
which accepts an object containing fields: status, startRecording, stopRecording andmediaBlob. This function would return a react element/component.type:
function
default: #### screen
A
value. Lets you to record your current screen. Not all browsers would support this. Please check here for the availability. Please note that at the moment, the MediaRecorder won't record two alike streams at a time, if you provide both screen and video prop, the screen capturing will take precedence than the video capturing. But, you can provide the video prop (_as the MediaTrackConstraints_) which will then utilized by screen capture (for example, height, width etc..)#### video
Can be either a boolean value or a MediaTrackConstraints object.
type:
boolean or object
default: #### askPermissionOnMount
A boolean value. If set to
, will ask media permission on mounting.type:
boolean
default: #### preferCurrentTab
A boolean value. If set to
, the browser will offer the current tab as the most prominent capture source, i.e. as a separate "This Tab" option in the "Choose what to share" options presented to the user.type:
boolean
default: #### selfBrowserSurface
An enumerated value specifying whether the browser should allow the user to select the current tab for capture. Possible values are
, which hints that the browser should include the current tab in the choices offered for capture, and exclude, which hints that it should be excluded.type:
undefined | 'include' | 'exclude';
default: undefined$3
#### error
A string enum. Possible values:
-
-
-
-
-
-
- #### status
A string
. Possible values:-
media_aborted
-
-
-
-
-
-
-
-
-
-
- #### startRecording
A
, 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.#### mediaBlobUrl
A
blob url that can be wired to an , or an element.#### clearBlobUrl
A
function which clears the existing generated blob url (if any) and resets the workflow to its initial idle state.#### isMuted
A boolean prop that tells whether the audio is muted or not.
#### previewStream
If you want to create a live-preview of the video to the user, you can use this _stream_ and attach it to a
element. Please note that this is a muted stream. This is by design to get rid of internal microphone feedbacks on machines like laptop.For example:
`tsx
const VideoPreview = ({ stream }: { stream: MediaStream | null }) => {
const videoRef = useRef(null); useEffect(() => {
if (videoRef.current && stream) {
videoRef.current.srcObject = stream;
}
}, [stream]);
if (!stream) {
return null;
}
return ;
};
const App = () => (
render={({ previewStream }) => {
return
}}
/>
);
``#### previewAudioStream
If you want access to the live audio stream for use in sound visualisations, you can use this _stream_ as your audio source and extract data from it using the AudioContext and AnalyzerNode features of the Web Audio API. Some javascript examples of how to do this can be found here.
Feel free to submit a PR if you found a bug (I might've missed many! :grinning:) or if you want to enhance it further.
Thanks!. Happy Recording!