title: IBM Watson Speech-to-Text sending microphone data closes connection
body: <p>I'm working through the <a href="https://www.ibm.com/watson/developercloud/doc/speech-to-text/websockets.html" rel="nofollow noreferrer">tutorial</a> for IBM Watson Speech-to-Text, using WebSocket for real time transcription. I'm using Angular.</p>
  
  <p>The first 25 lines of code are copied from the <a href="https://www.ibm.com/watson/developercloud/speech-to-text/api/v1/#recognize_audio_websockets" rel="nofollow noreferrer">API reference</a>. This code successfully connects and initiates a recognition request. Watson sends me a message <code>{ "state": "listening" }</code>.</p>
  
  <p>I wrote <code>function onClose()</code> that logs when the connection closes.</p>
  
  <p>I made a button that runs the handler <code>$scope.startSpeechRecognition</code>. This uses  <code>getUserMedia()</code> to stream audio from the microphone and <code>websocket.send()</code> to stream the data to Watson. This isn't working. Clicking this button closes the connection. I presume that I'm sending the wrong type of data and Watson is closing the connection?</p>
  
  <p>I moved <code>websocket.send(blob);</code> from <code>onOpen</code> to my handler <code>$scope.startSpeechRecognition</code>. I changed <code>websocket.send(blob);</code> to <code>websocket.send(mediaStream);</code>. I might have this wrong: <code>'content-type': 'audio/l16;rate=22050'</code>. How do I know what bit rate comes from the microphone?</p>
  
  <p>Is there a tutorial for JavaScript? When I google "IBM Watson Speech-to-Text JavaScript tutorial" at the top is an <a href="https://github.com/watson-developer-cloud/speech-javascript-sdk" rel="nofollow noreferrer">8000-line SDK</a>. Is the SDK required or can I write a simple program to learn how the service works?</p>
  
  <p>Here's my controller:</p>
  
  <pre><code>'use strict';
  app.controller('WatsonController', ['$scope', 'watsonToken',  function($scope, watsonToken) {
    console.log("Watson controller.");
  
    var token = watsonToken;
    var wsURI = "wss://stream.watsonplatform.net/speech-to-text/api/v1/recognize"
      + "?watson-token=" + token + '&amp;model=en-US_BroadbandModel';
  
    var websocket = new WebSocket(wsURI); // opens connection to Watson
    websocket.onopen = function(evt) { onOpen(evt) }; // executes when a connection opens
    websocket.onclose = function(evt) { onClose(evt) }; // executes when a connection closes
    websocket.onmessage = function(evt) { onMessage(evt) }; // logs messages from Watson to the console
    websocket.onerror = function(evt) { onError(evt) }; // logs errors to the console
  
    function onOpen(evt) {
      var message = {
        action: 'start',
        'content-type': 'audio/flac',
        'interim_results': true,
        'max-alternatives': 3,
        keywords: ['colorado', 'tornado', 'tornadoes'],
        'keywords_threshold': 0.5
      };
      websocket.send(JSON.stringify(message));
  
      // Prepare and send the audio file.
      // websocket.send(blob);
  
      // websocket.send(JSON.stringify({action: 'stop'}));
    }
  
    function onClose() {
      console.log("Connection closed.");
    };
  
    function onMessage(evt) {
      console.log(evt.data); // log the message to the console
    }
  
    $scope.startSpeechRecognition = () =&gt; {
      console.log("Starting speech recognition.");
      var constraints = { audio: true, video: false };
      navigator.mediaDevices.getUserMedia(constraints)
      .then(function(mediaStream) {
        console.log("Streaming audio.");
        websocket.send(mediaStream);
      })
      .catch(function(err) { console.log(err.name + ": " + err.message); }); // log errors
    };
  
    $scope.stopSpeechRecognition = () =&gt; { // handler for button
      console.log("Stopping speech recognition.");
      websocket.send(JSON.stringify({action: 'stop'}));
    };
  
    $scope.closeWatsonSpeechToText = () =&gt; { // handler for button
      console.log("Closing connection to Watson.");
      websocket.close(); // closes connection to Watson?
    };
  
  }]);
  </code></pre>
  
  <p>And here's my template:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-sm-2 col-md-2 col-lg-2"&gt;
      &lt;p&gt;Watson test.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col-sm-2 col-md-2 col-lg-2"&gt;
      &lt;button type="button" class="btn btn-primary" ng-click="startSpeechRecognition()"&gt;Start&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="col-sm-2 col-md-2 col-lg-2"&gt;
      &lt;button type="button" class="btn btn-warning" ng-click="stopSpeechRecognition()"&gt;Stop&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="col-sm-2 col-md-2 col-lg-2"&gt;
      &lt;button type="button" class="btn btn-danger" ng-click="closeWatsonSpeechToText()"&gt;Close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>