{"id":13515498,"url":"https://github.com/wmik/use-media-recorder","last_synced_at":"2025-03-31T04:37:07.990Z","repository":{"id":38237451,"uuid":"263965384","full_name":"wmik/use-media-recorder","owner":"wmik","description":"React based hooks to utilize the media recorder api for audio, video and screen recording","archived":false,"fork":false,"pushed_at":"2024-03-21T11:19:05.000Z","size":51,"stargazers_count":115,"open_issues_count":7,"forks_count":20,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-04T16:49:37.295Z","etag":null,"topics":["hooks","media","react","record","recorder","screen","sound","video"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wmik.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-14T16:18:17.000Z","updated_at":"2024-09-29T16:55:55.000Z","dependencies_parsed_at":"2024-06-18T18:37:56.895Z","dependency_job_id":null,"html_url":"https://github.com/wmik/use-media-recorder","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmik%2Fuse-media-recorder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmik%2Fuse-media-recorder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmik%2Fuse-media-recorder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmik%2Fuse-media-recorder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wmik","download_url":"https://codeload.github.com/wmik/use-media-recorder/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246418657,"owners_count":20773934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","media","react","record","recorder","screen","sound","video"],"created_at":"2024-08-01T05:01:12.026Z","updated_at":"2025-03-31T04:37:07.290Z","avatar_url":"https://github.com/wmik.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# use-media-recorder\n\n\u003e 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.\n\n## Features\n- 👀 Familiar API - Extends the MediaRecorder/MediaStream API with minimal abstraction making it easy to use.\n- 🔴 Media recording - Supports audio 🎤, video 🎥 \u0026 screen 🖥️ recording.\n- 🎛️ Configurable - Adjust settings to match your recording requirements.\n- 💅 Headless - Build your own custom user interface to fit your style.\n\n## Installation\n\u003e `npm install @wmik/use-media-recorder`\n\n## Example\n```jsx\nimport React from 'react';\nimport useMediaRecorder from '@wmik/use-media-recorder';\n\nfunction Player({ srcBlob, audio }) {\n  if (!srcBlob) {\n    return null;\n  }\n\n  if (audio) {\n    return \u003caudio src={URL.createObjectURL(srcBlob)} controls /\u003e;\n  }\n\n  return (\n    \u003cvideo\n      src={URL.createObjectURL(srcBlob)}\n      width={520}\n      height={480}\n      controls\n    /\u003e\n  );\n}\n\nfunction ScreenRecorderApp() {\n  let {\n    error,\n    status,\n    mediaBlob,\n    stopRecording,\n    getMediaStream,\n    startRecording\n  } = useMediaRecorder({\n    recordScreen: true,\n    blobOptions: { type: 'video/webm' },\n    mediaStreamConstraints: { audio: true, video: true }\n  });\n\n  return (\n    \u003carticle\u003e\n      \u003ch1\u003eScreen recorder\u003c/h1\u003e\n      {error ? `${status} ${error.message}` : status}\n      \u003csection\u003e\n        \u003cbutton\n          type=\"button\"\n          onClick={getMediaStream}\n          disabled={status === 'ready'}\n        \u003e\n          Share screen\n        \u003c/button\u003e\n        \u003cbutton\n          type=\"button\"\n          onClick={startRecording}\n          disabled={status === 'recording'}\n        \u003e\n          Start recording\n        \u003c/button\u003e\n        \u003cbutton\n          type=\"button\"\n          onClick={stopRecording}\n          disabled={status !== 'recording'}\n        \u003e\n          Stop recording\n        \u003c/button\u003e\n      \u003c/section\u003e\n      \u003cPlayer srcBlob={mediaBlob} /\u003e\n    \u003c/article\u003e\n  );\n}\n```\n\n## Demo\n[Live demo example](https://codesandbox.io/s/screen-recorder-nmmrf?file=/src/App.js)\n\n## API\n\n### _`useMediaRecorder` (Default export)_\nCreates a custom media recorder object using the [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder).\n\n#### `Parameters` (MediaRecorderProps)\n|Property|Type|Description\n|-|-|-|\n|blobOptions|`BlobPropertyBag`|Options used for creating a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob) object.\n|recordScreen|`boolean`|Enable/disable screen capture.\n|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)\n|onStart|`function`|Callback to run when recording starts.\n|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.\n|onError|`function`|Callback to run when an error occurs while recording. Accepts an error object as a parameter.\n|onDataAvailable|`function`|Callback to run when recording data exists.\n|mediaRecorderOptions|`object`|Options used for creating [`MediaRecorder`](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder) object.\n|mediaStreamConstraints\u003cb\u003e*\u003c/b\u003e|[`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).\n\n\u003e _**NOTE**: **\\*** means it is required_\n\n#### `Returns` (MediaRecorderHookOptions)\n|Property|Type|Description\n|-|-|-|\n|error|`Error`|Information about an operation failure. [Possible exceptions](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)\n|status|`string`|Current state of recorder. One of `idle`, `acquiring_media`, `ready`, `recording`, `paused`,`stopping`, `stopped`, `failed`.\n|mediaBlob|`Blob`|Raw media data.\n|isAudioMuted|`boolean`|Indicates whether audio is active/inactive.\n|stopRecording|`function`|End a recording.\n|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.\n|clearMediaStream|`function`|Resets the media stream object to `null`.\n|clearMediaBlob|`function`|Resets the media blob to `null`.\n|startRecording|`function(timeSlice?)`|Begin a recording. Optional argument `timeSlice` controls [chunk size](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start#parameters).\n|pauseRecording|`function`|Stop without ending a recording allowing the recording to continue later.\n|resumeRecording|`function`|Continue a recording from a previous pause.\n|muteAudio|`function`|Disable audio.\n|unMuteAudio|`function`|Enable audio.\n|liveStream|`MediaStream`|Real-time stream of current recording.\n\n### More examples\n\n```jsx\nfunction LiveStreamPreview({ stream }) {\n  let videoPreviewRef = React.useRef();\n\n  React.useEffect(() =\u003e {\n    if (videoPreviewRef.current \u0026\u0026 stream) {\n      videoPreviewRef.current.srcObject = stream;\n    }\n  }, [stream]);\n\n  if (!stream) {\n    return null;\n  }\n\n  return \u003cvideo ref={videoPreviewRef} width={520} height={480} autoPlay /\u003e;\n}\n\n\u003cLiveStreamPreview stream={liveStream} /\u003e\n```\n\n## Related\n- [`react-media-recorder`](https://github.com/0x006F/react-media-recorder)\n\n## License\nMIT \u0026copy;2020\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwmik%2Fuse-media-recorder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwmik%2Fuse-media-recorder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwmik%2Fuse-media-recorder/lists"}