react-media-recorder
Advanced tools
Comparing version 1.1.1 to 1.2.0
@@ -14,2 +14,3 @@ /// <reference types="dom-mediacapture-record" /> | ||
isAudioMuted: boolean; | ||
previewStream: MediaStream | null; | ||
}; | ||
@@ -16,0 +17,0 @@ declare type ReactMediaRecorderProps = { |
@@ -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,7,,8]);if(!screen)return[3,5];return[4,window.navigator.mediaDevices.getDisplayMedia({video:video})];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;_a.label=5;case 5:return[4,window.navigator.mediaDevices.getUserMedia(requiredMedia)];case 6:stream=_a.sent();mediaStream.current=stream;setStatus("idle");return[3,8];case 7:error_1=_a.sent();setError(error_1.name);setStatus("idle");return[3,8];case 8: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||(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(screen){if(!window.navigator.mediaDevices.getDisplayMedia){throw new Error("This browser doesn't support screen capturing");}} | ||
@@ -20,2 +20,2 @@ 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(!mediaStream.current){loadStream();}},[audio,screen,video,getMediaStream,mediaRecorderOptions]);var startRecording=function(){return __awaiter(void 0,void 0,void 0,function(){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){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");} | ||
return[2];}});});};var onRecordingActive=function(_a){var data=_a.data;mediaChunks.current.push(data);};var onRecordingStop=function(){var blobProperty=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);};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){setStatus("stopping");mediaRecorder.current.stop();}};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});}; | ||
return[2];}});});};var onRecordingActive=function(_a){var data=_a.data;mediaChunks.current.push(data);};var onRecordingStop=function(){var blobProperty=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);};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){setStatus("stopping");mediaRecorder.current.stop();}};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});}; |
{ | ||
"name": "react-media-recorder", | ||
"version": "1.1.1", | ||
"version": "1.2.0", | ||
"description": "A React component based on MediaRecorder() API to record audio/video streams", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
# 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 record audio/video streams or the screens using [MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder) API. | ||
`react-media-recorder` is a fully typed react component with render prop that can be used to: | ||
- Record audio/video | ||
- Record screen | ||
using [MediaRecorder API](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder). | ||
## Installation | ||
``` | ||
npm i -S react-media-recorder | ||
npm i react-media-recorder | ||
``` | ||
@@ -171,2 +176,33 @@ | ||
#### 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 `<video />` 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<HTMLVideoElement>(null); | ||
useEffect(() => { | ||
if (videoRef.current && stream) { | ||
videoRef.current.srcObject = stream; | ||
} | ||
}, [stream]); | ||
if (!stream) { | ||
return null; | ||
} | ||
return <video ref={videoRef} width={500} height={500} autoPlay controls />; | ||
}; | ||
const App = () => ( | ||
<ReactMediaRecorder | ||
video | ||
render={({ videoPreviewStream }) => { | ||
return <VideoPreview stream={videoPreviewStream} />; | ||
}} | ||
/> | ||
); | ||
``` | ||
## Contributing | ||
@@ -173,0 +209,0 @@ |
17125
61
212