FredrikOseberg / react-chatbot-kit

MIT License
325 stars 156 forks source link

Is it possible to implement voice recognition? #9

Closed sinetoami closed 4 years ago

sinetoami commented 4 years ago

I'd like to know if it's possible to implement voice recognition embedded with this library. If so, how can I do that?

Thanks in advance.

FredrikOseberg commented 4 years ago

Well, basically anything that has a javascript library can be implemented in your widgets. You control how your components behave, so you could implement a widget that listens for voices and then perform some kind of action based on that.

Or were you thinking of another use case?

sinetoami commented 4 years ago

Hey, @FredrikOseberg. Thanks for your reply.

So, basically I just want to use a feature of voice recognition as another option with input text. To allows the site users to choose between those methods of interaction. Probably build some AWS infrastructure to host an assistent chat bot.

Let me know if I was not clear in my explanation.

FredrikOseberg commented 4 years ago

Interesting. I was intrigued by this, so I did a test. Here's a working example with the web speech api. You need to implement it in the MessageParser like this:

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition

class MessageParser {
    constructor(actionProvider, state) {
        this.actionProvider = actionProvider;
        this.state = state;

        this.recognition = new SpeechRecognition()
        this.recognition.continous = true
        this.recognition.interimResults = false
        this.recognition.lang = 'en-US'
        this.recognition.maxAlternatives = 1;

        this.recognition.start()
        this.recognition.onresult = (e) => {
            if  (e.results[0].isFinal) {
                const transcript = e.results[0][0].transcript;
                this.recognition.abort()
                this.parse(transcript)
            }
        }
    }

    parse(message) {
        console.log(message)
        setTimeout(() => {
            this.recognition.start()
        }, 500)
    }
}

export default MessageParser

Once you have the result in your parse method you can call any method you find appropriate from the ActionProvider, just like you do when you are responding to actual text messages.

sinetoami commented 4 years ago

Seems good to me. I will close this issue until I implement that feature on my application. If I have another questions about it I will return.

Many thanks for your guidance.