1. server.js

'use strict';

const express = require('express');
const app = express();

const expressBrowserify = require('express-browserify');
// const webpackDevMiddleware = require('webpack-dev-middleware');
// const webpack = require('webpack');
// const webpackConfig = require('./webpack.config');
const { IamTokenManager } = require('ibm-watson/auth');

// allows environment properties to be set in a file named .env
require('dotenv').config({ silent: true });

if (!process.env.SPEECH_TO_TEXT_IAM_APIKEY) {
  console.error('Missing required credentials - see <https://github.com/watson-developer-cloud/node-sdk#getting-the-service-credentials>');
  process.exit(1);
}

// enable rate-limiting
const RateLimit = require('express-rate-limit');
app.enable('trust proxy'); // required to work properly behind Bluemix's reverse proxy

const limiter = new RateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100 // limit each IP to 100 requests per windowMs
});

//  apply to /api/*
app.use('/api/', limiter);

// force https - microphone access requires https in Chrome and possibly other browsers
// (*.mybluemix.net domains all have built-in https support)

const secure = require('express-secure-only');
app.use(secure());
app.use(express.static(__dirname + '/static'));

// set up express-browserify to serve browserify bundles for examples
const isDev = app.get('env') === 'development';
app.get(
  '/browserify-bundle.js',
  expressBrowserify('static/browserify-app.js', {
    watch: isDev,
    debug: isDev
  })
);

// set up webpack-dev-middleware to serve Webpack bundles for examples
// const compiler = webpack(webpackConfig);
// app.use(
//   webpackDevMiddleware(compiler, {
//     publicPath: '/' // Same as `output.publicPath` in most cases.
//   })
// );

const sttAuthenticator = new IamTokenManager({
  apikey: "5l_3czEdJcoAXHJs1um7L8F3lBXLhHmtjswjw1EnKKEe",
});

// speech to text token endpoint
app.use('/api/speech-to-text/token', function(req, res) {
  return sttAuthenticator
    .requestToken()
    .then(({ result }) => {
      res.json({ accessToken: result.access_token, url: process.env.SPEECH_TO_TEXT_URL });
    })
    .catch(console.error);
});

const port = process.env.PORT || process.env.VCAP_APP_PORT || 3000;
app.listen(port, function() {
  console.log('Example IBM Watson Speech JS SDK client app & token server live at <http://localhost>:%s/', port);
});

// Chrome requires https to access the user's microphone unless it's a localhost url so
// this sets up a basic server on port 3001 using an included self-signed certificate
// note: this is not suitable for production use
// however bluemix automatically adds https support at https://<myapp>.mybluemix.net
if (!process.env.VCAP_SERVICES) {
  const fs = require('fs');
  const https = require('https');
  const HTTPS_PORT = 3001;

  const options = {
    key: fs.readFileSync(__dirname + '/keys/localhost.pem'),
    cert: fs.readFileSync(__dirname + '/keys/localhost.cert')
  };
  https.createServer(options, app).listen(HTTPS_PORT, function() {
    console.log('Secure server live at <https://localhost>:%s/', HTTPS_PORT);
  });
}

해당 js 결과

$ node server.js
Missing required credentials - see <https://github.com/watson-developer-cloud/node-sdk#getting-the-service-credentials>

2. dir 구조

keys 는 github에있는거 그대로 복붙

3. App.vue

https://github.com/watson-developer-cloud/speech-javascript-sdk/blob/master/examples/static/microphone-streaming-object-to-console.html

이게 음성 입력 장치로 돌아가는 코드인거같음 그래서 App.vue에 해당 method 넣었는데

vue의 전반적인 흐름이 이해가 잘안가서 고치는데 애먹는중...

<template>
  <div>
   
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  methods: {
    onListenClick(){
      fetch('/api/speech-to-text/token')
  .then(function(response) {
      return response.json();
  }).then(function (token) {

    var stream = WatsonSpeech.SpeechToText.recognizeMicrophone(Object.assign(token, {
        objectMode: true, // send objects instead of text
        format: false // optional - performs basic formatting on the results such as capitals an periods
    }));

    stream.on('data', function(data) {
      console.log(data);
    });

    stream.on('error', function(err) {
        console.log(err);
    });

    document.querySelector('#stop').onclick = stream.stop.bind(stream);

  }).catch(function(error) {
      console.log(error);
  });
    }
}
}
</script>

<style>

</style>