fix AudioIn getSources #231 (#234)

AudioIn uses window.navigator.mediaDevices getUserMedia and enumerateDevices

add AudioIn test

AudioIn uses audio context sample rate (fix a bug in Firefox)

Author: therewasaguy

src/.eslintrc

@@ -4,7 +4,8 @@
     "node": true,
     "mocha": true,
     "browser": true,
-    "builtin": true
+    "builtin": true,
+    "es6": true
   },
   "globals": {
     "p5": true,

src/audioin.js

@@ -3,6 +3,9 @@
 define(function (require) {
   var p5sound = require('master');
 
+  // an array of input sources
+  p5sound.inputSources = [];
+
   /**
    *  <p>Get audio from an input, i.e. your computer's microphone.</p>
    *
@@ -45,8 +48,7 @@ define(function (require) {
 
     this.stream = null;
     this.mediaStream = null;
-
-    this.currentSource = 0;
+    this.currentSource = null;
 
     /**
      *  Client must allow browser to access their microphone / audioin source.
@@ -60,18 +62,8 @@ define(function (require) {
     this.amplitude = new p5.Amplitude();
     this.output.connect(this.amplitude.input);
 
-    // Some browsers let developer determine their input sources
-    if (typeof window.MediaStreamTrack === 'undefined') {
-      if (errorCallback) {
-        errorCallback();
-      } else {
-        window.alert('This browser does not support AudioIn');
-      }
-    } else if (typeof window.MediaDevices.enumerateDevices === 'function') {
-      // Chrome supports getSources to list inputs. Dev picks default
-      window.MediaDevices.enumerateDevices(this._gotSources);
-    } else {
-      // Firefox has no getSources() but lets user choose their input
+    if (!window.MediaStreamTrack || !window.navigator.mediaDevices || !window.navigator.mediaDevices.getUserMedia) {
+      errorCallback ? errorCallback() : window.alert('This browser does not support MediaStreamTrack and mediaDevices');
     }
 
     // add to soundArray so we can dispose on close
@@ -100,50 +92,39 @@ define(function (require) {
   p5.AudioIn.prototype.start = function(successCallback, errorCallback) {
     var self = this;
 
-    // if stream was already started...
+    if (this.stream) {
+      this.stop();
+    }
 
+    // set the audio source
+    var audioSource = p5sound.inputSources[self.currentSource];
+    var constraints = {
+      audio: {
+        sampleRate: p5sound.audiocontext.sampleRate,
+        echoCancellation: false
+      }
+    };
 
-    // if _gotSources() i.e. developers determine which source to use
-    if (p5sound.inputSources[self.currentSource]) {
-      // set the audio source
-      var audioSource = p5sound.inputSources[self.currentSource].id;
-      var constraints = {
-        audio: {
-          optional: [{sourceId: audioSource}]
-        }};
-      window.navigator.getUserMedia( constraints,
-        this._onStream = function(stream) {
-          self.stream = stream;
-          self.enabled = true;
-          // Wrap a MediaStreamSourceNode around the live input
-          self.mediaStream = p5sound.audiocontext.createMediaStreamSource(stream);
-          self.mediaStream.connect(self.output);
-          if (successCallback) successCallback();
-          // only send to the Amplitude reader, so we can see it but not hear it.
-          self.amplitude.setInput(self.output);
-        }, this._onStreamError = function(e) {
-          if (errorCallback) errorCallback(e);
-          else console.error(e);
-        });
-    } else {
-    // if Firefox where users select their source via browser
-    // if (typeof MediaStreamTrack.getSources === 'undefined') {
-      // Only get the audio stream.
-      window.navigator.getUserMedia( {'audio':true},
-        this._onStream = function(stream) {
-          self.stream = stream;
-          self.enabled = true;
-          // Wrap a MediaStreamSourceNode around the live input
-          self.mediaStream = p5sound.audiocontext.createMediaStreamSource(stream);
-          self.mediaStream.connect(self.output);
-          // only send to the Amplitude reader, so we can see it but not hear it.
-          self.amplitude.setInput(self.output);
-          if (successCallback) successCallback();
-        }, this._onStreamError = function(e) {
-          if (errorCallback) errorCallback(e);
-          else console.error(e);
-        });
+    // if developers determine which source to use
+    if (p5sound.inputSources[this.currentSource]) {
+      constraints.audio.deviceId = audioSource.deviceId;
     }
+
+    window.navigator.mediaDevices.getUserMedia( constraints )
+      .then( function(stream) {
+        self.stream = stream;
+        self.enabled = true;
+        // Wrap a MediaStreamSourceNode around the live input
+        self.mediaStream = p5sound.audiocontext.createMediaStreamSource(stream);
+        self.mediaStream.connect(self.output);
+        // only send to the Amplitude reader, so we can see it but not hear it.
+        self.amplitude.setInput(self.output);
+        if (successCallback) successCallback();
+      })
+      .catch( function(err) {
+        if (errorCallback) errorCallback(err);
+        else console.error(err);
+      });
   };
 
   /**
@@ -154,8 +135,14 @@ define(function (require) {
    */
   p5.AudioIn.prototype.stop = function() {
     if (this.stream) {
-      // assume only one track
-      this.stream.getTracks()[0].stop();
+      this.stream.getTracks().forEach(function(track) {
+        track.stop();
+      });
+
+      this.mediaStream.disconnect();
+
+      delete this.mediaStream;
+      delete this.stream;
     }
   };
 
@@ -216,22 +203,6 @@ define(function (require) {
     return this.amplitude.getLevel();
   };
 
-  /**
-   *  Add input sources to the list of available sources.
-   *
-   *  @private
-   */
-  p5.AudioIn.prototype._gotSources = function(sourceInfos) {
-    for (var i = 0; i< sourceInfos.length; i++) {
-      var sourceInfo = sourceInfos[i];
-      if (sourceInfo.kind === 'audio') {
-        // add the inputs to inputSources
-        //p5sound.inputSources.push(sourceInfo);
-        return sourceInfo;
-      }
-    }
-  };
-
   /**
    *  Set amplitude (volume) of a mic input between 0 and 1.0. <br/>
    *
@@ -252,31 +223,20 @@ define(function (require) {
     }
   };
 
-  p5.AudioIn.prototype.listSources = function() {
-    console.log('listSources is deprecated - please use AudioIn.getSources');
-    console.log('input sources: ');
-    if (p5sound.inputSources.length > 0) {
-      return p5sound.inputSources;
-    } else {
-      return 'This browser does not support MediaStreamTrack.getSources()';
-    }
-  };
   /**
-   * Chrome only. Returns a list of available input sources
-   * and allows the user to set the media source. Firefox allows
-   * the user to choose from input sources in the permissions dialogue
-   * instead of enumerating available sources and selecting one.
-   * Note: in order to have descriptive media names your page must be
-   * served over a secure (HTTPS) connection and the page should
-   * request user media before enumerating devices. Otherwise device
-   * ID will be a long device ID number and does not specify device
-   * type. For example see
-   * https://simpl.info/getusermedia/sources/index.html vs.
-   * http://simpl.info/getusermedia/sources/index.html
+   * Returns a list of available input sources. This is a wrapper
+   * for <a title="MediaDevices.enumerateDevices() - Web APIs | MDN" target="_blank" href=
+   *  "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices"
+   *  > and it returns a Promise.
    *
    * @method  getSources
-   * @param  {Function} callback a callback to handle the sources
-   *                               when they have been enumerated
+   * @param  {Function} [successCallback] This callback function handles the sources when they
+   *                                      have been enumerated. The callback function
+   *                                      receives the deviceList array as its only argument
+   * @param  {Function} [errorCallback] This optional callback receives the error
+   *                                    message as its argument.
+   * @returns {Promise} Returns a Promise that can be used in place of the callbacks, similar
+   *                            to the enumerateDevices() method
    * @example
    *  <div><code>
    *  var audiograb;
@@ -285,51 +245,62 @@ define(function (require) {
    *    //new audioIn
    *    audioGrab = new p5.AudioIn();
    *
-   *    audioGrab.getSources(function(sourceList) {
+   *    audioGrab.getSources(function(deviceList) {
    *      //print out the array of available sources
-   *      console.log(sourceList);
-   *      //set the source to the first item in the inputSources array
+   *      console.log(deviceList);
+   *      //set the source to the first item in the deviceList array
    *      audioGrab.setSource(0);
    *    });
    *  }
    *  </code></div>
    */
-  p5.AudioIn.prototype.getSources = function (callback) {
-    if(typeof window.MediaStreamTrack.getSources === 'function') {
-      window.MediaStreamTrack.getSources(function (data) {
-        for (var i = 0, max = data.length; i < max; i++) {
-          var sourceInfo = data[i];
-          if (sourceInfo.kind === 'audio') {
-          // add the inputs to inputSources
-            p5sound.inputSources.push(sourceInfo);
+  p5.AudioIn.prototype.getSources = function (onSuccess, onError) {
+    return new Promise( function(resolve, reject) {
+      window.navigator.mediaDevices.enumerateDevices()
+        .then( function(devices) {
+          p5sound.inputSources = devices.filter(function(device) {
+            return device.kind === 'audioinput';
+          });
+          resolve(p5sound.inputSources);
+          if (onSuccess) {
+            onSuccess(p5sound.inputSources);
           }
-        }
-        callback(p5sound.inputSources);
-      });
-    } else {
-      console.log('This browser does not support MediaStreamTrack.getSources()');
-    }
+        })
+        .catch( function(error) {
+          reject(error);
+          if (onError) {
+            onError(error);
+          } else {
+            console.error('This browser does not support MediaStreamTrack.getSources()');
+          }
+        });
+    });
   };
+
   /**
    *  Set the input source. Accepts a number representing a
-   *  position in the array returned by listSources().
+   *  position in the array returned by getSources().
    *  This is only available in browsers that support
-   *  MediaStreamTrack.getSources(). Instead, some browsers
-   *  give users the option to set their own media source.<br/>
+   *  <a title="MediaDevices.enumerateDevices() - Web APIs | MDN" target="_blank" href=
+   *  "https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices"
+   *  >navigator.mediaDevices.enumerateDevices()</a>.<br/>
    *
    *  @method setSource
    *  @param {number} num position of input source in the array
    */
   p5.AudioIn.prototype.setSource = function(num) {
-    // TO DO - set input by string or # (array position)
-    var self = this;
     if (p5sound.inputSources.length > 0 && num < p5sound.inputSources.length) {
       // set the current source
-      self.currentSource = num;
-      console.log('set source to ' + p5sound.inputSources[self.currentSource].id);
+      this.currentSource = num;
+      console.log('set source to ', p5sound.inputSources[this.currentSource]);
     } else {
       console.log('unable to set input source');
     }
+
+    // restart stream if currently active
+    if (this.stream && this.stream.active) {
+      this.start();
+    }
   };
 
   // private method
@@ -339,14 +310,15 @@ define(function (require) {
     p5sound.soundArray.splice(index, 1);
 
     this.stop();
+
     if (this.output) {
       this.output.disconnect();
     }
     if (this.amplitude) {
       this.amplitude.disconnect();
     }
-    this.amplitude = null;
-    this.output = null;
+    delete this.amplitude;
+    delete this.output;
   };
 
 });

src/master.js

@@ -19,9 +19,6 @@ define(function () {
 
     this.output.disconnect();
 
-    // an array of input sources
-    this.inputSources = [];
-
     // connect input to limiter
     this.input.connect(this.limiter);
 

test/index.html

@@ -15,4 +15,4 @@
 	<div id="mocha"></div>
 	<script>mocha.setup('bdd')</script>
 </body>
-</html>
+</html>

test/test.js

@@ -9,7 +9,7 @@ require.config({
 var allTests = ['tests/p5.SoundFile', 'tests/p5.Amplitude', 
 	'tests/p5.Oscillator', 'tests/p5.Distortion', 
 	'tests/p5.Effect','tests/p5.Filter', 'tests/p5.FFT', 'tests/p5.Compressor',
-	'tests/p5.EQ'];
+	'tests/p5.EQ', 'tests/p5.AudioIn'];
 
 p5.prototype.masterVolume(0);
 

test/tests/p5.AudioIn.js

@@ -0,0 +1,40 @@
+define(['chai'],
+  function(chai) {
+
+  var expect = chai.expect;
+
+  describe('p5.AudioIn', function() {
+    it('can be created and disposed', function(){
+      var mic = new p5.AudioIn();
+      mic.dispose();
+    });
+
+    it('can be started and stopped', function() {
+      var mic = new p5.AudioIn();
+      mic.start(function() {
+        mic.stop();
+      });
+    });
+
+    it('can get sources', function(done) {
+      var mic = new p5.AudioIn();
+      mic.getSources(function(sources) {
+        console.log(sources);
+        expect(sources).to.be.an('array');
+        done();
+      });
+    });
+
+    it('can set source', function(done) {
+      var mic = new p5.AudioIn();
+      expect(mic.currentSource).to.be.null;
+
+      return mic.getSources(function(sources) {
+        mic.setSource(0);
+        expect(mic.currentSource).to.be(0);
+        done();
+      });
+    });
+  });
+
+});