Comments (11)
@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
from watson-html5-speech-recognition.
@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
-
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 -
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. -
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
from watson-html5-speech-recognition.
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:
<script src="scripts/speech.js"></script><script style="display: block;">
var speech = SpeechToText;
var activeSTT;
function listen() {
activeSTT = speech.listen({
onStart: function() {
console.log('onStart Speech event');
},
onResult: function(e) {
console.log('onResult Speech event', e.text);
document.getElementById("recognizedText").innerHTML = e.text;
if (e.isFinal) {
stopListening();
}
},
onError: function(e) {
console.log('onError Speech event', e);
},
onEnd: function(e) {
console.log('onEnd Speech event', e);
stopListening();
}
});
}
function startListening() {
if (activeSTT) {
// do nothing, speech is active
} else if (speech.isSupported) {
listen();
} else {
alert('speech not supported by this browser');
}
}
function stopListening() {
if (activeSTT) {
activeSTT.stop();
activeSTT = null;
}
}
document.querySelector('#button').onclick = startListening;
</script>
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
from watson-html5-speech-recognition.
Besides, this is the speech.js I am using
speech.zip
from watson-html5-speech-recognition.
@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
});
from watson-html5-speech-recognition.
no changes are required to speech.js
from watson-html5-speech-recognition.
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>
);
}
}
from watson-html5-speech-recognition.
@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?
from watson-html5-speech-recognition.
@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.
from watson-html5-speech-recognition.
@cdimascio forgot to mention I'm using webpack
from watson-html5-speech-recognition.
I was trying to run this client-side, didn't realise it had to be server-side
from watson-html5-speech-recognition.
Related Issues (6)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from watson-html5-speech-recognition.