add cancel recording functionality

streamer45 · Aug 4, 2019 · 941d4c2 · 941d4c2
1 parent 30e071d
commit 941d4c2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -11,6 +11,7 @@
     <button onclick="init()">INIT RECORDER</button>
     <button onclick="start()">START RECORDING</button>
     <button onclick="stop()">STOP RECORDING</button>
+    <button onclick="cancel()">CANCEL RECORDING</button>
     <button onclick="deinit()">DEINIT RECORDER</button>
     <div id="recording"></div>
   </body>

diff --git a/demo/main.js b/demo/main.js
@@ -47,3 +47,12 @@ function stop() {
     console.log(err);
   });
 }
+
+function cancel() {
+  console.log('cancel');
+  recorder.cancel().then(() => {
+    console.log('canceled');
+  }).catch((err) => {
+    console.log(err);
+  });
+}
diff --git a/src/recorder.js b/src/recorder.js
@@ -12,7 +12,9 @@ class Recorder {
     this.numSamples = config.numSamples || 4096;
     this.bitRate = 64;
     this.maxDuration = 300;
+    this._onCancel = null;
     this._onData = null;
+    this._onDeinit = null;
     this._onMaxDuration = null;
   }
 
@@ -70,6 +72,14 @@ class Recorder {
     });
   }
 
+  _stopCapture() {
+    this.muteNode.disconnect(this.audioCtx.destination);
+    this.procNode.disconnect(this.muteNode);
+    this.srcNode.disconnect(this.procNode);
+    this.mediaStream.getTracks()[0].stop();
+    this.mediaStream = null;
+  }
+
   _audioProcess(ev) {
     if (!this.startTime) this.startTime = new Date().getTime();
     if (this.worker) {
@@ -100,6 +110,8 @@ class Recorder {
           this.stopTime = 0;
           this.startTime = 0;
           if (this._onData) this._onData(blob, duration);
+        } else if (ev.data === 'cancel') {
+          if (this._onCancel) this._onCancel();
         } else if (ev.data === 'init') {
           this.worker = worker;
           res();
@@ -149,17 +161,26 @@ class Recorder {
   stop() {
     return new Promise((res, rej) => {
       if (!this.audioCtx || !this.worker) return rej(new Error('Recorder not initialized'));
+      if (!this.mediaStream) return rej(new Error('Recorder not started'));
       this._onData = (blob, duration) => res({blob, duration});
-      this.srcNode.disconnect(this.procNode);
-      this.procNode.disconnect(this.muteNode);
-      this.muteNode.disconnect(this.audioCtx.destination);
-      this.mediaStream.getTracks()[0].stop();
-      this.mediaStream = null;
+      this._stopCapture();
       this.stopTime = new Date().getTime();
       this.worker.postMessage('stop');
     });
   }
 
+  cancel() {
+    return new Promise((res, rej) => {
+      if (!this.audioCtx || !this.worker) return rej(new Error('Recorder not initialized'));
+      if (!this.mediaStream) return rej(new Error('Recorder not started'));
+      this.startTime = 0;
+      this.stopTime = 0;
+      this._stopCapture();
+      this._onCancel = () => res();
+      this.worker.postMessage('cancel');
+    });
+  }
+
   deinit() {
     return new Promise((res, rej) => {
       if (this.audioCtx) {

diff --git a/src/recorder.worker.js b/src/recorder.worker.js
@@ -64,13 +64,17 @@ onmessage = (ev) => {
     }
 
     const mp3 = state.data.subarray(0, state.data_len);
-
     const data_sz = state.data.length;
 
     postMessage(mp3, [mp3.buffer]);
 
     state.data = new Uint8Array(data_sz);
     state.data_len = 0;
+  } else if (ev.data === 'cancel') {
+    const data_sz = state.data.length;
+    state.data = new Uint8Array(data_sz);
+    state.data_len = 0;
+    postMessage('cancel');
   } else if (ev.data === 'deinit') {
     deinit();
     postMessage('deinit');