WebkitSpeechRecognition not working Chrome?

Question

JavaScript

.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
  .speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
  .speech img {float: right; width: 40px; height: 40px }

<form id="labnol" method="get" action="https://www.google.com/search">
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>

function startDictation() {
  if (window.hasOwnProperty('webkitSpeechRecognition')) {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = false;
    recognition.interimResults = false;
    recognition.lang = "en-US";
    recognition.start();
    recognition.onresult = function(e) {
      console.log(1);
      document.getElementById('transcript').value = e.results[0][0].transcript;
      recognition.stop();
      document.getElementById('labnol').submit();
    };
    recognition.onerror = function(e) {
      console.log(e);
      recognition.stop();
    }
  }
}

Why does not it work ?
If you run the file from the desktop, it gives: not-allowed (The user agent disallowed any speech input from occurring for of security, privacy or user preference.)
If you upload it to a local server, it gives: not-allowed (The user agent disallowed any speech input from occurring for reasons of security, privacy or user preference.)
If thrown to a remote http server, it gives: not-allowed (The user agent disallowed any speech input from occurring for reasons of security, privacy or user preference.)
Please help. Why might this error occur?
Does https matter to him?