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.
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.
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 :-)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With