Manage Webcam and Micro

Samples for the article http://www.adictosaltrabajo.com/tutoriales/manejando-audio-y-video-con-html5/

by Juan Antonio Jiménez Torres

HTML

<input type="button" id="button" value="start">
<div>
  <video id="video"></video>
</div>

JavaScript

var myButton = document.getElementById("button");
var myVideo  = document.getElementById("video");
    
    myButton.addEventListener('click', clickHandler, false);    

    navigator.getUserMedia = navigator.getUserMedia || 
                             navigator.mozGetUserMedia || 
                             navigator.webkitGetUserMedia || 
                             navigator.msGetUserMedia;

function clickHandler(){
    if (myVideo.paused){
        getVideo();
    } else {
				myVideo.pause();
        myButton.value = "start";
    }
}

function getVideo(){
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
            video: true,
            audio: false
        }, onSuccess, onError);
    }
};

function onSuccess(streamVideo) {
    var videoProvider;

    if (window.URL) {
        videoProvider = window.URL.createObjectURL(streamVideo);
    } else {
        videoProvider = streamVideo;
    }
    
    myVideo.controls = true;
    myVideo.src = videoProvider;
    myVideo.play();
    
    myButton.value = "stop"
}

function onError(error) {
    console.log("getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.", error);
}