react-media-recorder - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

lib/index.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="dom-mediacapture-record" />
 import { ReactElement } from "react";
@@ -15,2 +14,3 @@ export declare type ReactMediaRecorderRenderProps = {
     previewStream: MediaStream | null;
+    previewAudioStream: MediaStream | null;
     clearBlobUrl: () => void;
@@ -30,3 +30,3 @@ };
 };
-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 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" | "paused";
 export declare enum RecorderErrors {
@@ -42,3 +42,3 @@ AbortError = "media_aborted",
 }
-export declare function useReactMediaRecorder({ audio, video, onStop, blobPropertyBag, screen, mediaRecorderOptions, askPermissionOnMount }: 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>)>;
+export declare function useReactMediaRecorder({ audio, video, onStop, blobPropertyBag, screen, mediaRecorderOptions, askPermissionOnMount, }: ReactMediaRecorderHookProps): ReactMediaRecorderRenderProps;
+export declare const ReactMediaRecorder: (props: ReactMediaRecorderProps) => ReactElement<any, string | import("react").JSXElementConstructor<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=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,_g=_a.askPermissionOnMount,askPermissionOnMount=_g===void 0?false:_g;var mediaRecorder=react_1.useRef(null);var mediaChunks=react_1.useRef([]);var mediaStream=react_1.useRef(null);var _h=react_1.useState("idle"),status=_h[0],setStatus=_h[1];var _j=react_1.useState(false),isAudioMuted=_j[0],setIsAudioMuted=_j[1];var _k=react_1.useState(null),mediaBlobUrl=_k[0],setMediaBlobUrl=_k[1];var _l=react_1.useState("NONE"),error=_l[0],setError=_l[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(op[0]&5)throw op[1];return{value:op[0]?op[1]:void 0,done:true};}};Object.defineProperty(exports,"__esModule",{value:true});exports.ReactMediaRecorder=exports.useReactMediaRecorder=exports.RecorderErrors=void 0;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,_g=_a.askPermissionOnMount,askPermissionOnMount=_g===void 0?false:_g;var mediaRecorder=(0,react_1.useRef)(null);var mediaChunks=(0,react_1.useRef)([]);var mediaStream=(0,react_1.useRef)(null);var _h=(0,react_1.useState)("idle"),status=_h[0],setStatus=_h[1];var _j=(0,react_1.useState)(false),isAudioMuted=_j[0],setIsAudioMuted=_j[1];var _k=(0,react_1.useState)(null),mediaBlobUrl=_k[0],setMediaBlobUrl=_k[1];var _l=(0,react_1.useState)("NONE"),error=_l[0],setError=_l[1];var getMediaStream=(0,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]);(0,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,3 +18,5 @@ 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&&askPermissionOnMount){getMediaStream();}},[audio,screen,video,getMediaStream,mediaRecorderOptions,askPermissionOnMount]);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));};
+if(!mediaStream.current&&askPermissionOnMount){getMediaStream();}
+return function(){if(mediaStream.current){var tracks=mediaStream.current.getTracks();tracks.forEach(function(track){return track.stop();});}};},[audio,screen,video,getMediaStream,mediaRecorderOptions,askPermissionOnMount,]);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"){setStatus("paused");mediaRecorder.current.pause();}};var resumeRecording=function(){if(mediaRecorder.current&&mediaRecorder.current.state==="paused"){setStatus("recording");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,previewAudioStream:mediaStream.current?new MediaStream(mediaStream.current.getAudioTracks()):null,clearBlobUrl:function(){if(mediaBlobUrl){URL.revokeObjectURL(mediaBlobUrl);}
+setMediaBlobUrl(null);},};}
+exports.useReactMediaRecorder=useReactMediaRecorder;var ReactMediaRecorder=function(props){return props.render(useReactMediaRecorder(props));};exports.ReactMediaRecorder=ReactMediaRecorder;

package.json

 {
   "name": "react-media-recorder",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A React component based on MediaRecorder() API to record audio/video streams",
@@ -37,9 +37,7 @@ "main": "index.js",
   "devDependencies": {
-    "@types/dom-mediacapture-record": "^1.0.2",
-    "@types/node": "^12.12.11",
     "@types/react": "^16.9.11",
     "jsmin": "^1.0.1",
-    "typescript": "^3.7.2"
+    "typescript": "^4.4.3"
   },
   "types": "./lib/index.d.ts"
 }

README.md

@@ -244,2 +244,6 @@ # react-media-recorder :o2: :video_camera: :microphone: :computer:
 
+#### 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](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) and [AnalyzerNode](https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode) features of the Web Audio API. Some javascript examples of how to do this can be found [here](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API).
+
 ## Contributing
@@ -246,0 +250,0 @@

No alert changes

Improved metrics

Total package byte prevSize

19787

increased by4.3%

Dev dependency count

3

decreased by-40%

Lines of code

84

increased by2.44%

Number of lines in readme file

253

increased by1.61%

No dependency changes