I'm writing a Vue.js web app and trying to access the Watson Speech-To-Text API. I found a very simple implementation using the JavaScript SDK (watson-speech) in documentation. This is the code I'm using:
execute () {
var stream;
fetch('/api/speech-to-text/token').then(function(response) {
return response.text();
}).then(function (token) {
stream = WatsonSpeech.SpeechToText.recognizeFile({
token: token,
file: document.querySelector('#audiofile').files[0],
play: true, // play the audio out loud
outputElement: '#output', // CSS selector or DOM Element (optional)
}
});
stream.on('error', function(err) {
console.log(err);
});
}).catch(function(error) {
console.log(error);
});
}
There's a button that when clicked (after a file upload) runs this execute() function.
When I run this at the link where I found it (https://watson-speech.mybluemix.net/file-upload.html), it works just fine. I've configured the environment variables to use my API username and password (and confirmed they work by downloading an example React project from another Watson repository). When I try to do it in my own project however, it doesn't work. I get the following error:
Error during WebSocket handshake: Unexpected response code: 403
I'm not sure if this is a CORS issue, or if this can't be done all client-side or what. Does WebSocket need to be installed? I had thought it was all handled by the Watson functions, so I'm at a loss. Any help would be greatly appreciated!
