Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chrome version 60 SpeechRecognition

After version 60 webkitSpeechRecognition is disabled for non HTTPS websites. This is a major issue for developing purposes mainly. Is there a way to bypass/disable this security feature?

The issue is that the popup which is supposed to ask you if you want to access your mic is never displaying on HTTP, but it is on HTTPS.

Setting up HTTPS for DEV is not easy, so I really need a way to bypass this.

like image 774
Nick Doulgeridis Avatar asked Aug 08 '17 17:08

Nick Doulgeridis


2 Answers

Short answer, no. You can't disable it.

But, you can host it though a localhost in IIS if you have windows. There's a tutorial on how to do that here. Once the register it with IIS, you have to add some permissions so you can view in in the browser with localhost.

If you are running Linux, you can install Apache2 and just drop it into /var/www/public_html/{websitename}. Then you just access it though the browser through localhost. There's a tutorial on install Apache here.

There really should be a way to enable the microphone to work through the browser when working with local files. Once you set the localhost up though, it's relatively simple to work with.

like image 90
Jimenemex Avatar answered Sep 19 '22 15:09

Jimenemex


I tried this locally and worked well without HTTPS. It does not work if the file is being served directly from the filesystem, but with the help of a static file server (I'm using python3 -m http.server) I managed to get it working.

Hope it helps!

<html>
    <head>
        <title>Teste</title>
    </head>
    <body>
        <button id="btn">capture</button>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
        <script>
            $(document).ready(function(){
                var recognition = new webkitSpeechRecognition();
                recognition.onresult = function(event) { 
                  console.log(event) 
                }
                var started = false;
                $('#btn').click(function(){
                    if (started){
                        recognition.stop();
                        $(this).html('capture');
                        started = false;
                    }
                    else{
                        recognition.start();
                        started = true;
                        $(this).html('stop');
                    }
                });
            })
        </script>
    </body>
</html>

EDIT: jQuery is not necessary. It is just an old habit of mine :-)

like image 29
Herberth Amaral Avatar answered Sep 21 '22 15:09

Herberth Amaral