How to integrate into angularjs application

[yuenghole]

Hi,

may i know how to integrate the watson-html5-speech-recognition with stt-token.js into angularjs application?

thanks

[cdimascio]

@yuenghole See the section Example. Follow those instructions to get the example running. Do this first to ensure you have everything working.

Once you do, you can do one of the following: Note, given that I don't know how your app is structured, I'm going to provide a few possibilities

1. simplest thing to do: Drop your Angular assets into the public folder of the example app you just set up. Once you do this, the example app will now serve your Angular app. Since the example is all setup for speech reco, you can simply call the speech api from your angular app. Here is an example of the call you would make from your angular app. Do this to initialize and state the token url and then use it like this

2. If you have a backend server, then 1. isn't likely a viable option for you. If your backend is running node.js, include stt-token.js into it. Then see app.js to see how to include it as middleware. its one line of code app.use('/api/speech-to-text/', require('./stt-token.js')); You can use the example app as a template.

3. if you have a backend server that is running something other than Node e.g. Java, Ruby, Pythong, ..., you either have to port this code to your language of choice or start the example server with CORS enabled (i can help with this if necessary - i haven't added cors support yet, but should be very easy. I'm happy to do it if you require it)

hope this helps

[yuenghole]

Hi, @cdimascio.

Thank you for the reply.

I tried to include the speech.js as a library and I included the code below in my index.html and it is working:

However, may I know if I have a token ( token.zip ), how do I change the speech.js or somewhere else to use this token?

Thanks

[yuenghole]

Besides, this is the speech.js I am using speech.zip

[cdimascio]

@yuenghole the client lib itself will set the token for you. You just need to provide the endpoint to retrieve the token. You can do that as follows:

var Speech = require('watson-html5-speech-recognition');
var speech = new Speech.SpeechToText({
  watsonTokenUrl: '/api/speech-to-text/token' // <-- endpoint to retrieve token. This endpoint will be POSTed to to obtain the token. This endpoint refers to the endpoint exposed by the example server
});

[cdimascio]

no changes are required to speech.js

[pixelomo]

This looks like exactly what I need for adding stt to my app, what would be nice is instead of having to set up the demo app and then try incorporate it in to my app or vice versa there were instructions on how to just use it like any other node module.

i.e.

const Speech = require('watson-html5-speech-recognition');
const speech = new Speech.SpeechToText({
  username: 'username',
  password: 'password',
});

or even better say within a react app

import Speech from ('watson-html5-speech-recognition');

class Chat extends React.Component{
    render() {
        return (
            <div className="chatBox" >
                <Speech username="username" password="password" ></Speech>
            </div>
        );
    }
}

[cdimascio]

@alansutherland good point. The challenge here is that there is both a client and a server component, however perhaps I can consolidate it all onto the client and make the server configuration optional. This would make the basic setup very easy to get up and running and the more advanced case, well a bit more involved. The basic setup would look fairly close to what you provided above thoughts? suggestions?

[pixelomo]

@cdimascio I'm actually pretty frustrated, I've been going around in circles with your documentation. All the examples for getting started with the SDK show how to get a token using curl. Which is fine I can do that, but that means once an hour I need to manually run a curl command on the terminal and update my code ...hardly ideal :/

At least I can see that using the method I can get STT working. Here's the code if anyones interested:

const WatsonSpeech = require('watson-speech');

stt() {
        var stream = WatsonSpeech.SpeechToText.recognizeMicrophone({
        token: '6UnBOoUarLNH37EYq8HDdKEWawHK0u%2BxDiH3rTipw%2BD2s%2FnkuK8klrF8Lrqa9kxl9%2FqCAGbETXPkB0OQ9220tlEbdp4e9gwV7JpOv4A0%2FLnK4xaJPNM1%2FV%2FmtPDGLbeC%2F1rJPg6DZqAuG0XHZw6t%2F9Ty%2FLXzzI5jADFWgFhbZPtres3DteUtgKa4NkL3l3TKFfDtWF8vZ%2BB069498UDxOuPMvCn%2F9A1eVTGdk3xsksiUAKxAYAT3z%2FgAIFGceAxxdjARelSszvjzH2THhuGXFafxBpDBRC%2FF%2Bu%2FNL7VBZ0BRStfTSoM%2FqNDRrVipdbLYCz%2Bc9nbeU0YB5C%2Bww3XGGew%2BWXLaSkI1A4zdXlJzPvJRgfqA3eBpZ%2FRB58YpcfFx6%2BegWmZmOQj84wVqT7VEgVaay6Ur0Gos5smZLAd%2BUuoz9pdWfs4KmWartIBcnvioP7g65ZzZaPRmVnsmFjSYuMneuUdmkt96u7e3S3%2B46iDhaQFaphavA%2BwsFkLEFCtfNJ0mFwDo9Gu1DSY%2Fw59uEbmEzndtN2FQpQnRtfOruj7HF8%2BM19nTXl4gOIcuQs5Roe%2FEt1zrjtNja7V7AO298hRVxpqn%2BHxkAfihBlYSR4nGlEfoO4SZWV08POoUbxcU66MPyWP7%2FI2tTqYGsd4Y4NgFVGONXcAcXvMv30GkmXZps%2BVz5QVmNJrRjZbqSIVpFWs9amKiG2Ip4LXJJ1e3njf9ilV%2BWF725XfPJ1ie9tUwbi8UN%2Buon6XA79cvGW%2FUQutKJKwKyXsK2XzWNZkudGuKkLVK92A2OOYPQUo7A6q1KOlamHP%2B1WVKQCTDSCFf92INhV1riF9BboEhtUfWqsQ9lWrBgcJZvD6uIc8XMMsXmxroxjVuIUaHe27KTlkLxGayY5NktIZwDMwCKSwHLYrvyg30gNE%2FrhIfxAcDPDS%2FRq%2FIaq6K37gcFk%2BDtMV%2BpP5Hj7EyjeFR4Z%2BPnld12WWBBhDZbPefqwLEJqPfMaQ%3D',
            outputElement: '.output' // CSS selector or DOM Element
        });
        stream.on('error', function(err) {
            console.log(err);
        });

        if(document.querySelector('.active-mic')){
            stream.stop();
        } 
}

But I need an automatic way of generating a new token. All docs point to this example.

Here's my version of the example:

const watson = require('watson-developer-cloud');

const authorization = new watson.AuthorizationV1({
  username: 'user',
  password: 'pw',
  url: watson.SpeechToTextV1.URL
});

authorization.getToken(function (err, token) {
  if (!token) {
    console.log('error:', err);
  } else {
    console.log(token)
  }
});

when I run npm run build I get a number of errors, first one is:

ERROR in ./~/watson-developer-cloud/retrieve-and-rank/v1.js Module not found: Error: Can't resolve 'fs'

It appears that the fs package has been removed from npm.

I found an interesting stackoverflow question related to this. Sadly it appears that the first answer uses request() which also relies on fs and the second answer on child_process which has also been removed from npm...

The second answer is interesting in that it shows a way to exec a curl command from javascript though.

I think the watson-developer-cloud package needs updating to remove the dependency for fs and/or the documentation needs updating.

[pixelomo]

@cdimascio forgot to mention I'm using webpack

[pixelomo]

I was trying to run this client-side, didn't realise it had to be server-side

[cdimascio]

@alansutherland, awesome! glad to here you've got it sorted out. please let me know if there is something i can do to make the docs easier to understand. PRs are welcome as well. thanks