Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wmik/use-media-recorder
React based hooks to utilize the media recorder api for audio, video and screen recording
https://github.com/wmik/use-media-recorder
hooks media react record recorder screen sound video
Last synced: 2 months ago
JSON representation
React based hooks to utilize the media recorder api for audio, video and screen recording
- Host: GitHub
- URL: https://github.com/wmik/use-media-recorder
- Owner: wmik
- License: mit
- Created: 2020-05-14T16:18:17.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-21T11:19:05.000Z (7 months ago)
- Last Synced: 2024-07-21T02:23:07.986Z (2 months ago)
- Topics: hooks, media, react, record, recorder, screen, sound, video
- Language: JavaScript
- Size: 49.8 KB
- Stars: 116
- Watchers: 3
- Forks: 19
- Open Issues: 7
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# use-media-recorder
> React based hooks to utilize the [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder) for audio, video and screen recording.
## Features
- 👀 Familiar API - Extends the MediaRecorder/MediaStream API with minimal abstraction making it easy to use.
- 🔴 Media recording - Supports audio 🎤, video 🎥 & screen 🖥️ recording.
- 🎛️ Configurable - Adjust settings to match your recording requirements.
- 💅 Headless - Build your own custom user interface to fit your style.
## Installation
> `npm install @wmik/use-media-recorder`
## Example
```jsx
import React from 'react';
import useMediaRecorder from '@wmik/use-media-recorder';
function Player({ srcBlob, audio }) {
if (!srcBlob) {
return null;
}
if (audio) {
return ;
}
return (
);
}
function ScreenRecorderApp() {
let {
error,
status,
mediaBlob,
stopRecording,
getMediaStream,
startRecording
} = useMediaRecorder({
recordScreen: true,
blobOptions: { type: 'video/webm' },
mediaStreamConstraints: { audio: true, video: true }
});
return (
Screen recorder
{error ? `${status} ${error.message}` : status}
Share screen
Start recording
Stop recording
);
}
```
## Demo
[Live demo example](https://codesandbox.io/s/screen-recorder-nmmrf?file=/src/App.js)
## API
### _`useMediaRecorder` (Default export)_
Creates a custom media recorder object using the [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder).
#### `Parameters` (MediaRecorderProps)
|Property|Type|Description
|-|-|-|
|blobOptions|`BlobPropertyBag`|Options used for creating a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob) object.
|recordScreen|`boolean`|Enable/disable screen capture.
|customMediaStream|[`MediaStream`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream)|Custom stream e.g [`canvas.captureStream`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream)
|onStart|`function`|Callback to run when recording starts.
|onStop|`function`|Callback to run when recording stops. Accepts a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob) object as a parameter.
|onError|`function`|Callback to run when an error occurs while recording. Accepts an error object as a parameter.
|onDataAvailable|`function`|Callback to run when recording data exists.
|mediaRecorderOptions|`object`|Options used for creating [`MediaRecorder`](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder) object.
|mediaStreamConstraints*|[`MediaStreamConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamConstraints)|Options used for creating a MediaStream object from [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) and [`getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia).
> _**NOTE**: **\*** means it is required_
#### `Returns` (MediaRecorderHookOptions)
|Property|Type|Description
|-|-|-|
|error|`Error`|Information about an operation failure. [Possible exceptions](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
|status|`string`|Current state of recorder. One of `idle`, `acquiring_media`, `ready`, `recording`, `paused`,`stopping`, `stopped`, `failed`.
|mediaBlob|`Blob`|Raw media data.
|isAudioMuted|`boolean`|Indicates whether audio is active/inactive.
|stopRecording|`function`|End a recording.
|getMediaStream|`function`|Request for a media source. Camera, mic and/or screen access. Returns instance of requested media source or `customMediaStream` if was provided in initializing.
|clearMediaStream|`function`|Resets the media stream object to `null`.
|clearMediaBlob|`function`|Resets the media blob to `null`.
|startRecording|`function(timeSlice?)`|Begin a recording. Optional argument `timeSlice` controls [chunk size](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#parameters).
|pauseRecording|`function`|Stop without ending a recording allowing the recording to continue later.
|resumeRecording|`function`|Continue a recording from a previous pause.
|muteAudio|`function`|Disable audio.
|unMuteAudio|`function`|Enable audio.
|liveStream|`MediaStream`|Real-time stream of current recording.
### More examples
```jsx
function LiveStreamPreview({ stream }) {
let videoPreviewRef = React.useRef();
React.useEffect(() => {
if (videoPreviewRef.current && stream) {
videoPreviewRef.current.srcObject = stream;
}
}, [stream]);
if (!stream) {
return null;
}
return ;
}
```
## Related
- [`react-media-recorder`](https://github.com/0x006F/react-media-recorder)
## License
MIT ©2020