Add onData prop to handle mediaRecorder.ondataavailable (#31)

Thanks @pavestru!
hackingbeauty · Mar 8, 2018 · 2926ea1 · 2926ea1
1 parent 16b630e
commit 2926ea1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -29,6 +29,7 @@ You can also see this component in action at [voicerecordpro.com](https://www.vo
 <ReactMic
   record={boolean}         // defaults -> false.  Set to true to begin recording
   className={string}       // provide css class name
+  onData={function}        // callback to execute when chunk of audio data is available
   onStop={function}        // callback to execute when audio stops recording
   strokeColor={string}     // sound wave color
   backgroundColor={string} // background color
@@ -62,6 +63,10 @@ export class Example extends React.Component {
     });
   }
 
+  onData(recordedBlob) {
+    console.log('chunk of real-time data is: ', recordedBlob);
+  }
+
   onStop(recordedBlob) {
     console.log('recordedBlob is: ', recordedBlob);
   }

diff --git a/src/components/ReactMic.js b/src/components/ReactMic.js
@@ -24,7 +24,7 @@ export default class ReactMic extends Component {
   }
 
   componentDidMount() {
-    const { onStop, onStart, audioElem, audioBitsPerSecond, mimeType } = this.props;
+    const { onStop, onStart, onData, audioElem, audioBitsPerSecond, mimeType } = this.props;
     const { visualizer } = this.refs;
     const canvas = visualizer;
     const canvasCtx = canvas.getContext("2d");
@@ -50,7 +50,7 @@ export default class ReactMic extends Component {
 
       this.setState({
         analyser            : analyser,
-        microphoneRecorder  : new MicrophoneRecorder(onStart, onStop, options),
+        microphoneRecorder  : new MicrophoneRecorder(onStart, onStop, onData, options),
         canvas              : canvas,
         canvasCtx           : canvasCtx
       }, () => {
@@ -110,7 +110,8 @@ ReactMic.propTypes = {
   mimeType        : string,
   height          : number,
   record          : bool.isRequired,
-  onStop          : func
+  onStop          : func,
+  onData          : func
 };
 
 ReactMic.defaultProps = {

diff --git a/src/libs/MicrophoneRecorder.js b/src/libs/MicrophoneRecorder.js
@@ -10,6 +10,7 @@ let mediaOptions;
 let blobObject;
 let onStartCallback;
 let onStopCallback;
+let onDataCallback;
 
 const constraints = { audio: true, video: false }; // constraints - only audio needed
 
@@ -19,10 +20,11 @@ navigator.getUserMedia = (navigator.getUserMedia ||
                           navigator.msGetUserMedia);
 
 export class MicrophoneRecorder {
-  constructor(onStart, onStop, options) {
+  constructor(onStart, onStop, onData, options) {
     onStartCallback= onStart;
     onStopCallback= onStop;
     mediaOptions= options;
+    onDataCallback = onData;
   }
 
   startRecording=() => {
@@ -64,6 +66,9 @@ export class MicrophoneRecorder {
           mediaRecorder.onstop = this.onStop;
           mediaRecorder.ondataavailable = (event) => {
             chunks.push(event.data);
+            if(onDataCallback) {
+              onDataCallback(event.data);
+            }
           }
 
           audioCtx = AudioContext.getAudioContext();