How to test locally the microphone in chrome using javascript ?

Published: March 31, 2019

DMCA.com Protection Status

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, ssl

server_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.py
Enter 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).

How to test locally the microphone in chrome using javascript ? How to test locally the microphone in chrome using javascript ?
How to test locally the microphone in chrome using javascript ?

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 way
artyom.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 examples
    return 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 ?".

How to test locally the microphone in chrome using javascript ? How to test locally the microphone in chrome using javascript ?
How to test locally the microphone in chrome using javascript ?

References