An example of how to test locally the microphone in chrome using javascript:
The primary goal here was to develop and test locally the microphone with chrome using a javascript application for speech recognition. The problem was that it is not possible to use the microphone locally for security reasons since an https is required to use it. Here a solution is presented to test locally the microphone in chrome using javascript and python:
Install openssl and create a self-signed certificate ssl
First, it is necessary to install openssl and then execute the following command in the terminal to create a self signed ssl certificate:
> openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365
this command asks for some information:
Generating a 2048 bit RSA private key..............................................................................................+++.............................................................................................................................+++writing new private key to 'key.pem'Enter PEM pass phrase:Verifying - Enter PEM pass phrase:
the most important is the "PEM pass phrase" (remember it, use for example 'hello', you will need it later). The command will also create two files key.pem and cert.pem that need to be keep as well.
Start a local server with python
In the same folder that the files key.pem and cert.pem, create a python script (called for example server.py):
import http.server, sslserver_address = ('localhost', 4443)httpd = http.server.HTTPServer(server_address, http.server.SimpleHTTPRequestHandler)httpd.socket = ssl.wrap_socket (httpd.socket,keyfile="key.pem",certfile='cert.pem',server_side=True)httpd.serve_forever()
and them start the script and enter your "PEM pass phrase":
> python server.pyEnter PEM pass phrase:
then enter the following url address in chrome:
https://localhost:4443/
it will display a simple page, click on the advanced button and then "Proceed to localhost" (see screen shots below).
It is then possible to use the microphone locally with chrome (simple example will be presented hereafter).
Example of microphone used with Artyom for speech recognition
With Artyom it is possible to implement some commands based on speech recognition. The Artyom javascript files can be downloaded here, then create a simple html file (called here ' test_artyom.html'):
<!DOCTYPE html><html lang="en"><head><title>Cooking with artyom.js</title><!-- Important to load artyom in the head tag, this give time to load all the voices in the browser --><script type="text/javascript" src="artyom-source/artyom.window.js"></script></head><body><div><button type="button" onclick="StartArtyomOneCommand();">Start artyom one command</button> <br><button type="button" onclick="StopArtyom();">Stop recognition</button></div><span id='output'></span><script>var Jarvis = new Artyom();Jarvis.say("Hello !");var artyom = new Artyom();// or add some commandsDemostrations in the normal wayartyom.addCommands([{indexes: ['Hello','Hi','is someone there'],action: (i) => {artyom.say("Hello, how are you ?");}},]);artyom.redirectRecognizedTextOutput(function(text,isFinal){var span = document.getElementById('output');if(isFinal){span.innerHTML = '';}else{span.innerHTML = text;}});function StartArtyomOneCommand(){console.log("One command");if(artyom.isRecognizing()){return alert("Stop artyom first !");}//Although the voice can't be changed,// You need to set the language for the speech// Recognition, see the documentation for more examplesreturn artyom.initialize({lang:"en-GB",debug:true,continuous:false,listen:true});}function StartArtyomContinuous(){console.log("Continuous commands");if(artyom.isRecognizing()){return alert("Stop artyom first !");}// You can create a permanent voice assistant// if you want using the continuous mode !return artyom.initialize({lang:"en-GB",debug:true,continuous:false,listen:true});}function StopArtyom(){artyom.fatality();}</script></body></html>
then click on the file "test_artyom.html" in chrome, you can then test artyom and the microphone. For example, if you say "Hello" you should get the answer "Hello, how are you ?".
References
| Links | Site |
|---|---|
| openssl | openssl.org |
| Python 3 HTTPS Webserver [closed] | stackoverflow |
| Simple Python HTTP(S) Server With GET/POST Examples | blog.anvileight.com |
| Simple HTTPS server in python | watchitlater.com |
| Simple HTTPS Server In Python Using Self Signed Certs | pankajmalhotra.com |
| Creating an HTTPS server in Python | /piware.de |
| How To Create A localhost HTTPS Python Server | dgendill.com |
| Python: Let’s Create a Simple HTTP Server | afternerd.com |
| Running Your Flask Application Over HTTPS | blog.miguelgrinberg.com |
| How to add voice commands to your webpage with javascript | ourcodeworld.com |
| artyom | artyom |
| Web Speech API Custom Words | stackoverflow |
| Adding words to the webkitSpeechRecognition() for speech recognition | stackoverflow |
| pocketsphinx | syl22-00.github.io |
| Simple Python HTTP(S) Server With GET/POST Examples | blog.anvileight.com |
| What is Twisted? | twistedmatrix.com |
