Un exemple de comment tester localement son microphone avec javascript et chrome:
L'objectif de départ était de pourvoir tester localement une application basée sur javascript utilisant le microphone pour reconnaitre du texte a partir de la voix (speech recognition). Le problème est qu'il n'est pas possible d'utiliser localement son microphone avec chrome directement, car il faut utiliser le https pour pouvoir utiliser le microphone. On va presenter ici une solution pour pouvoir tester localement son microphone avec javascript et chrome en utilisant python:
Installer openssl et créer un certificat ssl
Tout d'abord il faut installer openssl puis lancer la commande suivante dans le terminal pour créer un certificat ssl (self signed):
> openssl req -x509 -newkey rsa:2048 -keyout key.pem -out cert.pem -days 365
cette command va demander de rentrer un certains nombres d'informations:
Generating a 2048 bit RSA private key..............................................................................................+++.............................................................................................................................+++writing new private key to 'key.pem'Enter PEM pass phrase:Verifying - Enter PEM pass phrase:
le plus important est le "PEM pass phrase", le reste n'est pas important ici. Il faut surtout retenir pour la suite le "PEM pass phrase" que vous avez rentrer (par exemple "hello"). Cette commande va aussi créer deux fichiers key.pem et cert.pem qu'il faut conserver.
Lancer un serveur local avec python
Dans le même répertoire que les fichiers key.pem et cert.pem, créer un script python (nommé par exemple 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()
puis lancer le script (et entrer votre mot passe; qui est "hello" dans notre exemple):
> python server.pyEnter PEM pass phrase:
puis dans Chrome entrer l'adresse url:
https://localhost:4443/
qui affiche la page suivante, il faut alors appuyer sur le bouton "advanced" puis sur "Proceed to localhost"
On peut maintenant tester le microphone dans une page html avec du javascript (comme dans l'exemple de la section suivante).
Exemple d'utilisation du microphone dans chrome avec Artyom
Avec Artyom on peut faire de la reconnaissance vocale. Télécharger les fichiers javascript sur la page suivante artyom puis créer une page html utilisant artyom (nommé ici 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>
en cliquant sur le fichier "test_artyom.html" dans chrome on peut alors tester artyom en cliquant ensuite sur le bouton "Start artyom one command" puis dite "Hello" à voix haute (si en retour vous entendez "Hello, how are you ?" l'application marche correctement)
Références
| Liens | 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 |
