[NEW] Encode to mp3 while recording

.eslintignore

@@ -18,6 +18,5 @@ packages/rocketchat-videobridge/client/public/external_api.js
 packages/rocketchat-theme/client/vendor/
 private/moment-locales/
 public/livechat/
-public/recorderWorker.js
-public/libmp3lame.js
-public/mp3Worker.js
+public/mp3-realtime-worker.js
+public/lame.min.js

package.json

@@ -139,6 +139,7 @@
 		"ip-range-check": "0.0.2",
 		"jquery": "^3.2.1",
 		"jschardet": "1.6.0",
+		"lamejs": "^1.2.0",
 		"ldapjs": "^1.0.2",
 		"less": "https://github.com/meteor/less.js/tarball/8130849eb3d7f0ecf0ca8d0af7c4207b0442e3f6",
 		"less-plugin-autoprefix": "1.5.1",

packages/rocketchat-ui/client/lib/recorderjs/audioRecorder.js

@@ -2,9 +2,13 @@
 this.AudioRecorder = new class {
 	start(cb) {
 		window.AudioContext = window.AudioContext || window.webkitAudioContext;
-		navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
-		window.URL = window.URL || window.webkitURL;
 
+		navigator.getUserMedia = navigator.getUserMedia ||
+			navigator.webkitGetUserMedia ||
+			navigator.mozGetUserMedia ||
+			navigator.msGetUserMedia;
+
+		window.URL = window.URL || window.webkitURL;
 		window.audioContext = new AudioContext;
 
 		const ok = stream => {
@@ -22,7 +26,10 @@ this.AudioRecorder = new class {
 	startUserMedia(stream) {
 		this.stream = stream;
 		const input = window.audioContext.createMediaStreamSource(stream);
-		this.recorder = new Recorder(input, {workerPath: '/recorderWorker.js'});
+		this.recorder = new Recorder(input, {
+			workerPath: 'mp3-realtime-worker.js',
+			numChannels: 1
+		});
 		return this.recorder.record();
 	}
 
@@ -35,8 +42,6 @@ this.AudioRecorder = new class {
 
 		this.stream.getAudioTracks()[0].stop();
 
-		this.recorder.clear();
-
 		window.audioContext.close();
 		delete window.audioContext;
 		delete this.recorder;
@@ -44,6 +49,6 @@ this.AudioRecorder = new class {
 	}
 
 	getBlob(cb) {
-		return this.recorder.exportWAV(cb);
+		return this.recorder.exportMP3(cb);
 	}
 };

packages/rocketchat-ui/client/lib/recorderjs/recorder.js

 (function(window){
 
-  var WORKER_PATH = 'recorderWorker.js';
-  var encoderWorker = new Worker('mp3Worker.js');
+  var WORKER_PATH = 'mp3-realtime-worker.js';
+  //var encoderWorker = new Worker('mp3Worker.js');
 
   var Recorder = function(source, cfg){
     var config = cfg || {};
@@ -12,6 +12,7 @@
                  this.context.createJavaScriptNode).call(this.context,
                  bufferLen, numChannels, numChannels);
     var worker = new Worker(config.workerPath || WORKER_PATH);
+
     worker.postMessage({
       command: 'init',
       config: {
@@ -19,6 +20,7 @@
         numChannels: numChannels
       }
     });
+
     var recording = false,
       currCallback;
 
@@ -28,20 +30,13 @@
       for (var channel = 0; channel < numChannels; channel++){
           buffer.push(e.inputBuffer.getChannelData(channel));
       }
+
       worker.postMessage({
-        command: 'record',
-        buffer: buffer
+        command: 'encode',
+        buffer: buffer[0]
       });
     }
 
-    this.configure = function(cfg){
-      for (var prop in cfg){
-        if (cfg.hasOwnProperty(prop)){
-          config[prop] = cfg[prop];
-        }
-      }
-    }
-
     this.record = function(){
       recording = true;
     }
@@ -50,74 +45,22 @@
       recording = false;
     }
 
-    this.clear = function(){
-      worker.postMessage({ command: 'clear' });
-    }
-
-    this.getBuffer = function(cb) {
+    this.exportMP3 = function(cb, type){
       currCallback = cb || config.callback;
-      worker.postMessage({ command: 'getBuffer' })
-    }
-
-    this.exportWAV = function(cb, type){
-      currCallback = cb || config.callback;
-      type = type || config.type || 'audio/wav';
       if (!currCallback) throw new Error('Callback not set');
       worker.postMessage({
-        command: 'exportWAV',
-        type: type
+        command: 'finish',
       });
     }
 
     worker.onmessage = function(e){
-      var blob = e.data;
-      var arrayBuffer;
-      var fileReader = new FileReader();
-
-      fileReader.onload = function(){
-        arrayBuffer = this.result;
-        var buffer = new Uint8Array(arrayBuffer),
-        data = parseWav(buffer);
-
-        encoderWorker.postMessage({ cmd: 'init', config:{
-          mode : 3,
-          channels:1,
-          samplerate: data.sampleRate,
-          bitrate: data.bitsPerSample
-        }});
-
-        encoderWorker.postMessage({ cmd: 'encode', buf: Uint8ArrayToFloat32Array(data.samples) });
-        encoderWorker.postMessage({ cmd: 'finish'});
-        encoderWorker.onmessage = function(e) {
-          if (e.data.cmd == 'data') {
-            var mp3Blob = new Blob([new Uint8Array(e.data.buf)], {type: 'audio/mp3'});
-            currCallback(mp3Blob);
-          }
-        };
-      };
-
-      fileReader.readAsArrayBuffer(blob);
-    }
-
-    function parseWav(wav) {
-      function readInt(i, bytes) {
-        var ret = 0,
-        shft = 0;
-        while (bytes) {
-          ret += wav[i] << shft;
-          shft += 8;
-          i++;
-          bytes--;
-        }
-        return ret;
+      switch (e.data.command) {
+        case 'end':
+          currCallback(new Blob(e.data.buffer, {type: 'audio/mp3'}));
+          break;
+        default:
+          console.log(e);
       }
-      if (readInt(20, 2) != 1) throw 'Invalid compression code, not PCM';
-      if (readInt(22, 2) != 1) throw 'Invalid number of channels, not 1';
-      return {
-        sampleRate: readInt(24, 4),
-        bitsPerSample: readInt(34, 2),
-        samples: wav.subarray(44)
-      };
     }
 
     function Uint8ArrayToFloat32Array(u8a){
@@ -138,7 +81,7 @@
     var url = (window.URL || window.webkitURL).createObjectURL(blob);
     var link = window.document.createElement('a');
     link.href = url;
-    link.download = filename || 'output.mp3';
+    link.download = filename || 'audio-message.mp3';
     var click = document.createEvent("Event");
     click.initEvent("click", true, true);
     link.dispatchEvent(click);

public/mp3-realtime-worker.js

+(function () {
+  'use strict';
+
+  importScripts('lame.min.js');
+
+  var mp3Encoder, maxSamples = 1152, samplesMono, config, dataBuffer;
+  var clearBuffer = function () {
+    dataBuffer = [];
+  };
+
+  var appendToBuffer = function (mp3Buf) {
+    dataBuffer.push(new Int8Array(mp3Buf));
+  };
+
+
+  var init = function (prefConfig) {
+    config = prefConfig || {};
+    mp3Encoder = new lamejs.Mp3Encoder(1, config.sampleRate || 44100, config.bitRate || 128);
+    clearBuffer();
+  };
+
+  var floatTo16BitPCM = function floatTo16BitPCM(input, output) {
+    for (var i = 0; i < input.length; i++) {
+      var s = Math.max(-1, Math.min(1, input[i]));
+      output[i] = (s < 0 ? s * 0x8000 : s * 0x7FFF);
+    }
+  };
+
+  var convertBuffer = function(arrayBuffer){
+    var data = new Float32Array(arrayBuffer);
+    var out = new Int16Array(arrayBuffer.length);
+    floatTo16BitPCM(data, out)
+    return out;
+  };
+
+  var encode = function (arrayBuffer) {
+    samplesMono = convertBuffer(arrayBuffer);
+    var remaining = samplesMono.length;
+    for (var i = 0; remaining >= 0; i += maxSamples) {
+      var left = samplesMono.subarray(i, i + maxSamples);
+      var mp3buf = mp3Encoder.encodeBuffer(left);
+      appendToBuffer(mp3buf);
+      remaining -= maxSamples;
+    }
+
+  };
+
+  var finish = function () {
+    appendToBuffer(mp3Encoder.flush());
+    self.postMessage({
+      command: 'end',
+      buffer: dataBuffer
+    });
+    clearBuffer();
+  };
+
+  self.onmessage = function (e) {
+    switch (e.data.command) {
+      case 'init':
+        init(e.data.config);
+        break;
+
+      case 'encode':
+        encode(e.data.buffer);
+        break;
+
+      case 'finish':
+        finish();
+        break;
+    }
+  };
+
+})();

public/mp3Worker.js

-importScripts('libmp3lame.js')
-var mp3codec;
-
-self.onmessage = function(e) {
-	switch (e.data.cmd) {
-	case 'init':
-		if (!e.data.config) {
-			e.data.config = { };
-		}
-		mp3codec = Lame.init();
-
-		Lame.set_mode(mp3codec, e.data.config.mode || Lame.JOINT_STEREO);
-		Lame.set_num_channels(mp3codec, e.data.config.channels || 2);
-		Lame.set_num_samples(mp3codec, e.data.config.samples || -1);
-		Lame.set_in_samplerate(mp3codec, e.data.config.samplerate || 44100);
-		Lame.set_out_samplerate(mp3codec, e.data.config.samplerate || 44100);
-		Lame.set_bitrate(mp3codec, e.data.config.bitrate || 128);
-		Lame.init_params(mp3codec);
-		break;
-	case 'encode':
-		var mp3data = Lame.encode_buffer_ieee_float(mp3codec, e.data.buf, e.data.buf);
-		self.postMessage({cmd: 'data', buf: mp3data.data});
-		break;
-	case 'finish':
-		var mp3data = Lame.encode_flush(mp3codec);
-		self.postMessage({cmd: 'end', buf: mp3data.data});
-		Lame.close(mp3codec);
-		mp3codec = null;
-		break;
-	}
-};

public/recorderWorker.js

-var recLength = 0,
-  recBuffers = [],
-  sampleRate,
-  numChannels;
-
-this.onmessage = function(e){
-  switch(e.data.command){
-    case 'init':
-      init(e.data.config);
-      break;
-    case 'record':
-      record(e.data.buffer);
-      break;
-    case 'exportWAV':
-      exportWAV(e.data.type);
-      break;
-    case 'getBuffer':
-      getBuffer();
-      break;
-    case 'clear':
-      clear();
-      break;
-  }
-};
-
-function init(config){
-  sampleRate = config.sampleRate;
-  numChannels = config.numChannels;
-  initBuffers();
-}
-
-function record(inputBuffer){
-  for (var channel = 0; channel < numChannels; channel++){
-    recBuffers[channel].push(inputBuffer[channel]);
-  }
-  recLength += inputBuffer[0].length;
-}
-
-function exportWAV(type){
-  var buffers = [];
-  for (var channel = 0; channel < numChannels; channel++){
-    buffers.push(mergeBuffers(recBuffers[channel], recLength));
-  }
-  if (numChannels === 2){
-      var interleaved = interleave(buffers[0], buffers[1]);
-  } else {
-      var interleaved = buffers[0];
-  }
-  var dataview = encodeWAV(interleaved);
-  var audioBlob = new Blob([dataview], { type: type });
-
-  this.postMessage(audioBlob);
-}
-
-function getBuffer(){
-  var buffers = [];
-  for (var channel = 0; channel < numChannels; channel++){
-    buffers.push(mergeBuffers(recBuffers[channel], recLength));
-  }
-  this.postMessage(buffers);
-}
-
-function clear(){
-  recLength = 0;
-  recBuffers = [];
-  initBuffers();
-}
-
-function initBuffers(){
-  for (var channel = 0; channel < numChannels; channel++){
-    recBuffers[channel] = [];
-  }
-}
-
-function mergeBuffers(recBuffers, recLength){
-  var result = new Float32Array(recLength);
-  var offset = 0;
-  for (var i = 0; i < recBuffers.length; i++){
-    result.set(recBuffers[i], offset);
-    offset += recBuffers[i].length;
-  }
-  return result;
-}
-
-function interleave(inputL, inputR){
-  var length = inputL.length + inputR.length;
-  var result = new Float32Array(length);
-
-  var index = 0,
-    inputIndex = 0;
-
-  while (index < length){
-    result[index++] = inputL[inputIndex];
-    result[index++] = inputR[inputIndex];
-    inputIndex++;
-  }
-  return result;
-}
-
-function floatTo16BitPCM(output, offset, input){
-  for (var i = 0; i < input.length; i++, offset+=2){
-    var s = Math.max(-1, Math.min(1, input[i]));
-    output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
-  }
-}
-
-function writeString(view, offset, string){
-  for (var i = 0; i < string.length; i++){
-    view.setUint8(offset + i, string.charCodeAt(i));
-  }
-}
-
-function encodeWAV(samples){
-  var buffer = new ArrayBuffer(44 + samples.length * 2);
-  var view = new DataView(buffer);
-
-  /* RIFF identifier */
-  writeString(view, 0, 'RIFF');
-  /* RIFF chunk length */
-  view.setUint32(4, 36 + samples.length * 2, true);
-  /* RIFF type */
-  writeString(view, 8, 'WAVE');
-  /* format chunk identifier */
-  writeString(view, 12, 'fmt ');
-  /* format chunk length */
-  view.setUint32(16, 16, true);
-  /* sample format (raw) */
-  view.setUint16(20, 1, true);
-  /* channel count */
-  view.setUint16(22, numChannels, true);
-  /* sample rate */
-  view.setUint32(24, sampleRate, true);
-  /* byte rate (sample rate * block align) */
-  view.setUint32(28, sampleRate * 4, true);
-  /* block align (channel count * bytes per sample) */
-  view.setUint16(32, numChannels * 2, true);
-  /* bits per sample */
-  view.setUint16(34, 16, true);
-  /* data chunk identifier */
-  writeString(view, 36, 'data');
-  /* data chunk length */
-  view.setUint32(40, samples.length * 2, true);
-
-  floatTo16BitPCM(view, 44, samples);
-
-  return view;
-}
\ No newline at end of file