update to latest microphone-stream to enable iOS cmpatibility

Author: nfriedly

dist/watson-speech.js

@@ -5977,13 +5977,19 @@ var bufferFrom = __webpack_require__(15);
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia
  *
- * @param {MediaStream} stream https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
  * @param {Object} [opts] options
+ * @param {MediaStream} [opts.stream] https://developer.mozilla.org/en-US/docs/Web/API/MediaStream - for iOS compatibility, it is recommended that you create the MicrophoneStream instance in response to the tap - before you have a MediaStream, and then later call setStream() with the MediaStream.
  * @param {Boolean} [opts.objectMode=false] Puts the stream into ObjectMode where it emits AudioBuffers instead of Buffers - see https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer
  * @param {Number|null} [opts.bufferSize=null] https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createScriptProcessor
  * @constructor
  */
-function MicrophoneStream(stream, opts) {
+function MicrophoneStream(opts) {
+  // backwards compatibility - passing in the Stream here will generally not work on iOS 11 Safari
+  if (typeof MediaStream && opts instanceof MediaStream) {
+    var stream = opts;
+    opts = arguments[1] || {};
+    opts.stream = stream;
+  }
   // "It is recommended for authors to not specify this buffer size and allow the implementation to pick a good
   // buffer size to balance between latency and audio quality."
   // https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createScriptProcessor
@@ -6019,12 +6025,32 @@ function MicrophoneStream(stream, opts) {
 
   var AudioContext = window.AudioContext || window.webkitAudioContext;
   var context = new AudioContext();
-  var audioInput = context.createMediaStreamSource(stream);
   var recorder = context.createScriptProcessor(bufferSize, inputChannels, outputChannels);
 
-  recorder.onaudioprocess = recorderProcess;
+  // Workaround for Safari on iOS 11 - context starts out suspended, and the resume() call must be in response to a tap.
+  // This allows you to create the MicrophoneStream instance synchronously in response to the first tap,
+  // and then connect the MediaStream asynchronously, after the user has granted microphone access.
+  var audioInput;
+  if (context.state === 'suspended') {
+    context.resume();
+  }
 
-  audioInput.connect(recorder);
+  /**
+   * Set the MediaStream
+   *
+   * This was removed from the constructor to enable better compatibility with Safari on iOS 11.
+   *
+   * @param {MediaStream} stream https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
+   */
+  this.setStream = function(stream) {
+    audioInput = context.createMediaStreamSource(stream);
+    audioInput.connect(recorder);
+    recorder.onaudioprocess = recorderProcess;
+  };
+
+  if (opts.stream) {
+    this.setStream(stream);
+  }
 
   // other half of workaround for chrome bugs
   recorder.connect(context.destination);
@@ -6039,7 +6065,9 @@ function MicrophoneStream(stream, opts) {
       // This fails in some older versions of chrome. Nothing we can do about it.
     }
     recorder.disconnect();
-    audioInput.disconnect();
+    if (audioInput) {
+      audioInput.disconnect();
+    }
     try {
       context.close(); // returns a promise;
     } catch (ex) {
@@ -8785,29 +8813,66 @@ module.exports = function recognizeMicrophone(options) {
   var recognizeStream = new RecognizeStream(rsOpts);
   var streams = [recognizeStream]; // collect all of the streams so that we can bundle up errors and send them to the last one
 
+  // set up the output first so that we have a place to emit errors
+  // if there's trouble with the input stream
+  var stream = recognizeStream;
+
   var keepMic = options.keepMicrophone;
-  var getMicStream;
+  var micStream;
   if (keepMic && preservedMicStream) {
     preservedMicStream.unpipe(bitBucket);
-    getMicStream = Promise.resolve(preservedMicStream);
+    micStream = preservedMicStream;
   } else {
+    // create the MicrophoneStream synchronously to allow it to resume the context in Safari on iOS 11
+    micStream = new MicrophoneStream({
+      objectMode: true,
+      bufferSize: options.bufferSize
+    });
     var pm = options.mediaStream ? Promise.resolve(options.mediaStream) : getUserMedia({ video: false, audio: true });
-
-    getMicStream = pm.then(function(mic) {
-      var micStream = new MicrophoneStream(mic, {
-        objectMode: true,
-        bufferSize: options.bufferSize
+    pm
+      .then(function(mediaStream) {
+        micStream.setStream(mediaStream);
+        if (keepMic) {
+          preservedMicStream = micStream;
+        }
+      })
+      .catch(function(err) {
+        stream.emit('error', err);
+        if (err.name === 'NotSupportedError') {
+          stream.end(); // end the stream
+        }
       });
-      if (keepMic) {
-        preservedMicStream = micStream;
-      }
-      return Promise.resolve(micStream);
-    });
   }
 
-  // set up the output first so that we have a place to emit errors
-  // if there's trouble with the input stream
-  var stream = recognizeStream;
+  var l16Stream = new L16({ writableObjectMode: true });
+
+  micStream.pipe(l16Stream).pipe(recognizeStream);
+
+  streams.push(micStream, l16Stream);
+
+  /**
+   * unpipes the mic stream to prevent any more audio from being sent over the wire
+   * temporarily re-pipes it to the bitBucket (basically /dev/null)  becuse
+   * otherwise it will buffer the audio from in between calls and prepend it to the next one
+   *
+   * @private
+   */
+  function end() {
+    micStream.unpipe(l16Stream);
+    micStream.pipe(bitBucket);
+    l16Stream.end();
+  }
+  // trigger on both stop and end events:
+  // stop will not fire when a stream ends due to a timeout
+  // but when stop does fire, we want to honor it immediately
+  // end will always fire, but it may take a few moments after stop
+  if (keepMic) {
+    recognizeStream.on('end', end);
+    recognizeStream.on('stop', end);
+  } else {
+    recognizeStream.on('end', micStream.stop.bind(micStream));
+    recognizeStream.on('stop', micStream.stop.bind(micStream));
+  }
 
   if (options.resultsBySpeaker) {
     stream = stream.pipe(new SpeakerStream(options));
@@ -8829,49 +8894,6 @@ module.exports = function recognizeMicrophone(options) {
     streams.push(stream);
   }
 
-  getMicStream.catch(function(err) {
-    stream.emit('error', err);
-    if (err.name === 'NotSupportedError') {
-      stream.end(); // end the stream
-    }
-  });
-
-  getMicStream
-    .then(function(micStream) {
-      streams.push(micStream);
-
-      var l16Stream = new L16({ writableObjectMode: true });
-
-      micStream.pipe(l16Stream).pipe(recognizeStream);
-
-      streams.push(l16Stream);
-
-      /**
-     * unpipes the mic stream to prevent any more audio from being sent over the wire
-     * temporarily re-pipes it to the bitBucket (basically /dev/null)  becuse
-     * otherwise it will buffer the audio from in between calls and prepend it to the next one
-     *
-     * @private
-     */
-      function end() {
-        micStream.unpipe(l16Stream);
-        micStream.pipe(bitBucket);
-        l16Stream.end();
-      }
-      // trigger on both stop and end events:
-      // stop will not fire when a stream ends due to a timeout
-      // but when stop does fire, we want to honor it immediately
-      // end will always fire, but it may take a few moments after stop
-      if (keepMic) {
-        recognizeStream.on('end', end);
-        recognizeStream.on('stop', end);
-      } else {
-        recognizeStream.on('end', micStream.stop.bind(micStream));
-        recognizeStream.on('stop', micStream.stop.bind(micStream));
-      }
-    })
-    .catch(recognizeStream.emit.bind(recognizeStream, 'error'));
-
   // Capture errors from any stream except the last one and emit them on the last one
   streams.forEach(function(prevStream) {
     if (prevStream !== stream) {

dist/watson-speech.min.js

@@ -17,6 +17,7 @@ <h2>Speech to Text</h2>
   <h3>Microphone Input</h3>
   <ul>
     <li><a href="microphone-streaming.html">Transcribe from Microphone</a></li>
+    <li><a href="microphone-streaming-preload-token.html">Transcribe from Microphone - w/ pre-loaded token</a></li>
     <li><a href="microphone-streaming-auto-stop.html">Transcribe from Microphone, automatically stop at first pause</a></li>
     <li><a href="microphone-streaming-model.html">Transcribe from Microphone, with chosen model</a></li>
     <li><a href="microphone-alternatives.html">Transcribe from Microphone, with Alternatives</a></li>

dist/watson-speech.min.js.map

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Pre-loaded Token - Watson Speech to Text client example</title>
+  <link rel="stylesheet" href="style.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+</head>
+<body>
+<div class="container">
+<a href="/">&laquo; Examples</a>
+
+<section>
+    <h2>Transcribe from Microphone - With Pre-loaded Token</h2>
+    <button id="button">Start Microphone Transcription</button>
+    <button id="stop">Stop</button>
+
+    <h2>Output:</h2>
+    <div id="output">--</div>
+</section>
+
+<script src="bower_components/watson-speech/dist/watson-speech.js"></script>
+<!-- window.fetch pollyfill for IE/Edge & Older Chrome/FireFox -->
+<script src="bower_components/fetch/fetch.js"></script>
+
+<h2>Code for this demo:</h2>
+
+<pre><code><script style="display: block;">
+var token;
+fetch('/api/speech-to-text/token')
+.then(function(response) {
+    return response.text();
+}).then(function(_token) {
+    token = _token;
+}).catch(function(error) {
+    console.log(error);
+});
+
+
+document.querySelector('#button').onclick = function () {
+    var stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
+        token: token,
+        outputElement: '#output' // CSS selector or DOM Element
+    });
+
+    stream.on('error', function(err) {
+        console.log(err);
+    });
+
+    document.querySelector('#stop').onclick = function() {
+      stream.stop();
+    };
+};
+
+</script></code></pre>
+
+</div>
+</body>
+</html>

examples/static/index.html

@@ -35,7 +35,7 @@ <h2>Code for this demo:</h2>
 
     var stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
       token: token,
-      object_mode: false // default
+      object_mode: false
     });
 
     stream.setEncoding('utf8'); // get text instead of Buffers for on data events

examples/static/microphone-streaming-preload-token.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Basic Example - Watson Text to Speech</title>
+    <title>Pre-loaded Example - Watson Text to Speech</title>
   <link rel="stylesheet" href="style.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 </head>
@@ -11,7 +11,7 @@
 <a href="/">&laquo; Examples</a>
 
 <section>
-    <h2>Basic Text to Speech Example</h2>
+    <h2>Pre-loaded Example</h2>
     <p><button id="button">Play Synthesized Text</button></p>
 </section>