react-media-recorder - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

lib/index.d.ts

 /// <reference types="dom-mediacapture-record" />
 import { ReactElement } from "react";
-declare type ReactMediaRecorderRenderProps = {
+export declare type ReactMediaRecorderRenderProps = {
     error: string;
@@ -17,4 +17,3 @@ muteAudio: () => void;
 };
-declare type ReactMediaRecorderProps = {
-    render: (props: ReactMediaRecorderRenderProps) => ReactElement;
+export declare type ReactMediaRecorderHookProps = {
     audio?: boolean | MediaTrackConstraints;
@@ -27,4 +26,17 @@ video?: boolean | MediaTrackConstraints;
 };
-declare type StatusMessages = "media_aborted" | "permission_denied" | "no_specified_media_found" | "media_in_use" | "invalid_media_constraints" | "no_constraints" | "recorder_error" | "idle" | "acquiring_media" | "delayed_start" | "recording" | "stopping" | "stopped";
-export declare const ReactMediaRecorder: ({ render, audio, video, onStop, blobPropertyBag, screen, mediaRecorderOptions, }: ReactMediaRecorderProps) => ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
-export {};
+export declare type ReactMediaRecorderProps = ReactMediaRecorderHookProps & {
+    render: (props: ReactMediaRecorderRenderProps) => ReactElement;
+};
+export declare type StatusMessages = "media_aborted" | "permission_denied" | "no_specified_media_found" | "media_in_use" | "invalid_media_constraints" | "no_constraints" | "recorder_error" | "idle" | "acquiring_media" | "delayed_start" | "recording" | "stopping" | "stopped";
+export declare enum RecorderErrors {
+    AbortError = "media_aborted",
+    NotAllowedError = "permission_denied",
+    NotFoundError = "no_specified_media_found",
+    NotReadableError = "media_in_use",
+    OverconstrainedError = "invalid_media_constraints",
+    TypeError = "no_constraints",
+    NONE = "",
+    NO_RECORDER = "recorder_error"
+}
+export declare function useReactMediaRecorder({ audio, video, onStop, blobPropertyBag, screen, mediaRecorderOptions, }: ReactMediaRecorderHookProps): ReactMediaRecorderRenderProps;
+export declare const ReactMediaRecorder: (props: ReactMediaRecorderProps) => ReactElement<any, string | ((props: any) => ReactElement<any, string | any | (new (props: any) => import("react").Component<any, any, any>)> | null) | (new (props: any) => import("react").Component<any, any, any>)>;

lib/index.js

@@ -12,3 +12,3 @@ "use strict";var __awaiter=(this&&this.__awaiter)||function(thisArg,_arguments,P,generator){function adopt(value){return value instanceof P?value:new P(function(resolve){resolve(value);});}
 op=body.call(thisArg,_);}catch(e){op=[6,e];y=0;}finally{f=t=0;}
-if(op[0]&5)throw op[1];return{value:op[0]?op[1]:void 0,done:true};}};Object.defineProperty(exports,"__esModule",{value:true});var react_1=require("react");var RecorderErrors;(function(RecorderErrors){RecorderErrors["AbortError"]="media_aborted";RecorderErrors["NotAllowedError"]="permission_denied";RecorderErrors["NotFoundError"]="no_specified_media_found";RecorderErrors["NotReadableError"]="media_in_use";RecorderErrors["OverconstrainedError"]="invalid_media_constraints";RecorderErrors["TypeError"]="no_constraints";RecorderErrors["NONE"]="";RecorderErrors["NO_RECORDER"]="recorder_error";})(RecorderErrors||(RecorderErrors={}));exports.ReactMediaRecorder=function(_a){var render=_a.render,_b=_a.audio,audio=_b===void 0?true:_b,_c=_a.video,video=_c===void 0?false:_c,_d=_a.onStop,onStop=_d===void 0?function(){return null;}:_d,blobPropertyBag=_a.blobPropertyBag,_e=_a.screen,screen=_e===void 0?false:_e,_f=_a.mediaRecorderOptions,mediaRecorderOptions=_f===void 0?null:_f;var mediaRecorder=react_1.useRef(null);var mediaChunks=react_1.useRef([]);var mediaStream=react_1.useRef(null);var _g=react_1.useState("idle"),status=_g[0],setStatus=_g[1];var _h=react_1.useState(false),isAudioMuted=_h[0],setIsAudioMuted=_h[1];var _j=react_1.useState(null),mediaBlobUrl=_j[0],setMediaBlobUrl=_j[1];var _k=react_1.useState("NONE"),error=_k[0],setError=_k[1];var getMediaStream=react_1.useCallback(function(){return __awaiter(void 0,void 0,void 0,function(){var requiredMedia,stream_1,audioStream,stream,error_1;return __generator(this,function(_a){switch(_a.label){case 0:setStatus("acquiring_media");requiredMedia={audio:typeof audio==="boolean"?!!audio:audio,video:typeof video==="boolean"?!!video:video,};_a.label=1;case 1:_a.trys.push([1,8,,9]);if(!screen)return[3,5];return[4,window.navigator.mediaDevices.getDisplayMedia({video:video||true,})];case 2:stream_1=(_a.sent());if(!audio)return[3,4];return[4,window.navigator.mediaDevices.getUserMedia({audio:audio,})];case 3:audioStream=_a.sent();audioStream.getAudioTracks().forEach(function(audioTrack){return stream_1.addTrack(audioTrack);});_a.label=4;case 4:mediaStream.current=stream_1;return[3,7];case 5:return[4,window.navigator.mediaDevices.getUserMedia(requiredMedia)];case 6:stream=_a.sent();mediaStream.current=stream;_a.label=7;case 7:setStatus("idle");return[3,9];case 8:error_1=_a.sent();setError(error_1.name);setStatus("idle");return[3,9];case 9:return[2];}});});},[audio,video,screen]);react_1.useEffect(function(){if(!window.MediaRecorder){throw new Error("Unsupported Browser");}
+if(op[0]&5)throw op[1];return{value:op[0]?op[1]:void 0,done:true};}};Object.defineProperty(exports,"__esModule",{value:true});var react_1=require("react");var RecorderErrors;(function(RecorderErrors){RecorderErrors["AbortError"]="media_aborted";RecorderErrors["NotAllowedError"]="permission_denied";RecorderErrors["NotFoundError"]="no_specified_media_found";RecorderErrors["NotReadableError"]="media_in_use";RecorderErrors["OverconstrainedError"]="invalid_media_constraints";RecorderErrors["TypeError"]="no_constraints";RecorderErrors["NONE"]="";RecorderErrors["NO_RECORDER"]="recorder_error";})(RecorderErrors=exports.RecorderErrors||(exports.RecorderErrors={}));function useReactMediaRecorder(_a){var _this=this;var _b=_a.audio,audio=_b===void 0?true:_b,_c=_a.video,video=_c===void 0?false:_c,_d=_a.onStop,onStop=_d===void 0?function(){return null;}:_d,blobPropertyBag=_a.blobPropertyBag,_e=_a.screen,screen=_e===void 0?false:_e,_f=_a.mediaRecorderOptions,mediaRecorderOptions=_f===void 0?null:_f;var mediaRecorder=react_1.useRef(null);var mediaChunks=react_1.useRef([]);var mediaStream=react_1.useRef(null);var _g=react_1.useState("idle"),status=_g[0],setStatus=_g[1];var _h=react_1.useState(false),isAudioMuted=_h[0],setIsAudioMuted=_h[1];var _j=react_1.useState(null),mediaBlobUrl=_j[0],setMediaBlobUrl=_j[1];var _k=react_1.useState("NONE"),error=_k[0],setError=_k[1];var getMediaStream=react_1.useCallback(function(){return __awaiter(_this,void 0,void 0,function(){var requiredMedia,stream_1,audioStream,stream,error_1;return __generator(this,function(_a){switch(_a.label){case 0:setStatus("acquiring_media");requiredMedia={audio:typeof audio==="boolean"?!!audio:audio,video:typeof video==="boolean"?!!video:video,};_a.label=1;case 1:_a.trys.push([1,8,,9]);if(!screen)return[3,5];return[4,window.navigator.mediaDevices.getDisplayMedia({video:video||true,})];case 2:stream_1=(_a.sent());if(!audio)return[3,4];return[4,window.navigator.mediaDevices.getUserMedia({audio:audio,})];case 3:audioStream=_a.sent();audioStream.getAudioTracks().forEach(function(audioTrack){return stream_1.addTrack(audioTrack);});_a.label=4;case 4:mediaStream.current=stream_1;return[3,7];case 5:return[4,window.navigator.mediaDevices.getUserMedia(requiredMedia)];case 6:stream=_a.sent();mediaStream.current=stream;_a.label=7;case 7:setStatus("idle");return[3,9];case 8:error_1=_a.sent();setError(error_1.name);setStatus("idle");return[3,9];case 9:return[2];}});});},[audio,video,screen]);react_1.useEffect(function(){if(!window.MediaRecorder){throw new Error("Unsupported Browser");}
 if(screen){if(!window.navigator.mediaDevices.getDisplayMedia){throw new Error("This browser doesn't support screen capturing");}}
@@ -18,2 +18,3 @@ var checkConstraints=function(mediaType){var supportedMediaConstraints=navigator.mediaDevices.getSupportedConstraints();var unSupportedConstraints=Object.keys(mediaType).filter(function(constraint){return!supportedMediaConstraints[constraint];});if(unSupportedConstraints.length>0){console.error("The constraints "+unSupportedConstraints.join(",")+" doesn't support on this browser. Please check your ReactMediaRecorder component.");}};if(typeof audio==="object"){checkConstraints(audio);}
 if(mediaRecorderOptions&&mediaRecorderOptions.mimeType){if(!MediaRecorder.isTypeSupported(mediaRecorderOptions.mimeType)){console.error("The specified MIME type you supplied for MediaRecorder doesn't support this browser");}}
-if(!mediaStream.current){getMediaStream();}},[audio,screen,video,getMediaStream,mediaRecorderOptions]);var startRecording=function(){return __awaiter(void 0,void 0,void 0,function(){var isStreamEnded;return __generator(this,function(_a){switch(_a.label){case 0:setError("NONE");if(!!mediaStream.current)return[3,2];return[4,getMediaStream()];case 1:_a.sent();_a.label=2;case 2:if(!mediaStream.current)return[3,5];isStreamEnded=mediaStream.current.getTracks().some(function(track){return track.readyState==="ended";});if(!isStreamEnded)return[3,4];return[4,getMediaStream()];case 3:_a.sent();_a.label=4;case 4:mediaRecorder.current=new MediaRecorder(mediaStream.current);mediaRecorder.current.ondataavailable=onRecordingActive;mediaRecorder.current.onstop=onRecordingStop;mediaRecorder.current.onerror=function(){setError("NO_RECORDER");setStatus("idle");};mediaRecorder.current.start();setStatus("recording");_a.label=5;case 5:return[2];}});});};var onRecordingActive=function(_a){var data=_a.data;mediaChunks.current.push(data);};var onRecordingStop=function(){var chunk=mediaChunks.current[0];var blobProperty=Object.assign({type:chunk.type},blobPropertyBag||(video?{type:"video/mp4"}:{type:"audio/wav"}));var blob=new Blob(mediaChunks.current,blobProperty);var url=URL.createObjectURL(blob);setStatus("stopped");setMediaBlobUrl(url);onStop(url,blob);};var muteAudio=function(mute){setIsAudioMuted(mute);if(mediaStream.current){mediaStream.current.getAudioTracks().forEach(function(audioTrack){return(audioTrack.enabled=!mute);});}};var pauseRecording=function(){if(mediaRecorder.current&&mediaRecorder.current.state==="recording"){mediaRecorder.current.pause();}};var resumeRecording=function(){if(mediaRecorder.current&&mediaRecorder.current.state==="paused"){mediaRecorder.current.resume();}};var stopRecording=function(){if(mediaRecorder.current){if(mediaRecorder.current.state!=="inactive"){setStatus("stopping");mediaRecorder.current.stop();mediaStream.current&&mediaStream.current.getTracks().forEach(function(track){return track.stop();});mediaChunks.current=[];}}};return render({error:RecorderErrors[error],muteAudio:function(){return muteAudio(true);},unMuteAudio:function(){return muteAudio(false);},startRecording:startRecording,pauseRecording:pauseRecording,resumeRecording:resumeRecording,stopRecording:stopRecording,mediaBlobUrl:mediaBlobUrl,status:status,isAudioMuted:isAudioMuted,previewStream:mediaStream.current?new MediaStream(mediaStream.current.getVideoTracks()):null,clearBlobUrl:function(){return setMediaBlobUrl(null);},});};
+if(!mediaStream.current){getMediaStream();}},[audio,screen,video,getMediaStream,mediaRecorderOptions]);var startRecording=function(){return __awaiter(_this,void 0,void 0,function(){var isStreamEnded;return __generator(this,function(_a){switch(_a.label){case 0:setError("NONE");if(!!mediaStream.current)return[3,2];return[4,getMediaStream()];case 1:_a.sent();_a.label=2;case 2:if(!mediaStream.current)return[3,5];isStreamEnded=mediaStream.current.getTracks().some(function(track){return track.readyState==="ended";});if(!isStreamEnded)return[3,4];return[4,getMediaStream()];case 3:_a.sent();_a.label=4;case 4:mediaRecorder.current=new MediaRecorder(mediaStream.current);mediaRecorder.current.ondataavailable=onRecordingActive;mediaRecorder.current.onstop=onRecordingStop;mediaRecorder.current.onerror=function(){setError("NO_RECORDER");setStatus("idle");};mediaRecorder.current.start();setStatus("recording");_a.label=5;case 5:return[2];}});});};var onRecordingActive=function(_a){var data=_a.data;mediaChunks.current.push(data);};var onRecordingStop=function(){var chunk=mediaChunks.current[0];var blobProperty=Object.assign({type:chunk.type},blobPropertyBag||(video?{type:"video/mp4"}:{type:"audio/wav"}));var blob=new Blob(mediaChunks.current,blobProperty);var url=URL.createObjectURL(blob);setStatus("stopped");setMediaBlobUrl(url);onStop(url,blob);};var muteAudio=function(mute){setIsAudioMuted(mute);if(mediaStream.current){mediaStream.current.getAudioTracks().forEach(function(audioTrack){return(audioTrack.enabled=!mute);});}};var pauseRecording=function(){if(mediaRecorder.current&&mediaRecorder.current.state==="recording"){mediaRecorder.current.pause();}};var resumeRecording=function(){if(mediaRecorder.current&&mediaRecorder.current.state==="paused"){mediaRecorder.current.resume();}};var stopRecording=function(){if(mediaRecorder.current){if(mediaRecorder.current.state!=="inactive"){setStatus("stopping");mediaRecorder.current.stop();mediaStream.current&&mediaStream.current.getTracks().forEach(function(track){return track.stop();});mediaChunks.current=[];}}};return{error:RecorderErrors[error],muteAudio:function(){return muteAudio(true);},unMuteAudio:function(){return muteAudio(false);},startRecording:startRecording,pauseRecording:pauseRecording,resumeRecording:resumeRecording,stopRecording:stopRecording,mediaBlobUrl:mediaBlobUrl,status:status,isAudioMuted:isAudioMuted,previewStream:mediaStream.current?new MediaStream(mediaStream.current.getVideoTracks()):null,clearBlobUrl:function(){return setMediaBlobUrl(null);},};}
+exports.useReactMediaRecorder=useReactMediaRecorder;exports.ReactMediaRecorder=function(props){return props.render(useReactMediaRecorder(props));};

package.json

 {
   "name": "react-media-recorder",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A React component based on MediaRecorder() API to record audio/video streams",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-media-recorder :o2: :video_camera: :microphone: :computer:
 
-`react-media-recorder` is a fully typed react component with render prop that can be used to:
+`react-media-recorder` is a fully typed react component with render prop, or a react hook, that can be used to:
 
@@ -46,2 +46,28 @@ - Record audio/video
 
+## Usage with react hooks
+
+```javascript
+import { useReactMediaRecorder } from "react-media-recorder";
+
+const RecordView = () => {
+  const {
+    status,
+    startRecording,
+    stopRecording,
+    mediaBlobUrl,
+  } = useReactMediaRecorder({ video: true });
+
+  return (
+    <div>
+      <p>{status}</p>
+      <button onClick={startRecording}>Start Recording</button>
+      <button onClick={stopRecording}>Stop Recording</button>
+      <video src={mediaBlobUrl} controls autoplay loop />
+    </div>
+  );
+};
+```
+
+The hook receives an object as argument with the same ReactMediaRecorder options / props (except the `render` function).
+
 ### Options / Props
@@ -171,5 +197,5 @@
 
-A `blob` url that can be wired to an `<audio />`, `<video />` or an `<a />` element.  
+A `blob` url that can be wired to an `<audio />`, `<video />` or an `<a />` element.
 
-#### clearBlobUrl  
+#### clearBlobUrl
 
@@ -176,0 +202,0 @@ A `function` which clears the existing generated blob url (if any)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18647

increased by7.79%

Lines of code

80

increased by37.93%

Number of lines in readme file

242

increased by12.04%

No dependency changes