JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<input type="text" speech x-webkit-speech>

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;

document.querySelector('input').addEventListener('webkitspeechchange', function(e){ e.target.value === 'camera' ? activateCamera() : null ;}, false);

document.querySelector('input').addEventListener('speechchange', function(e){ e.target.value === 'camera' ? activateCamera() : null ;}, false);


function activateCamera(){
    navigator.getUserMedia({video: true}, function(localMediaStream) { 
      var video = document.createElement("video");
      video.autoplay = true;
      video.src = window.URL.createObjectURL(localMediaStream);
      document.body.appendChild(video);
    }, function(error) {
      console.log(error);
    });
}