Stream video with getUserMedia()

Request the user to start their webcam stream

 var video= document.querySelector("#videoElement"); if(navigator.mediaDevices.getUserMedia){ navigator.mediaDevices.getUserMedia({ video: true }) .then(function (stream) { video.srcObject = stream; }) .catch(function (error) { console.log("Error streaming"); }); }

1. Using the getUserMedia() API which allows you to access a user’s camera and mic without any plugins
2. Streams have inputs (video) and outputs (video)
3. The if-conditional checks if the getUserMedia is supported
4. Syntax: navigator.mediaDevices.getUserMedia(constraints).then(successCallback).catch(errorCallback)
5. The getUserMedia() method takes one argument called the MediaStreamConstraints object which allows you to specify the constrains/specifications of the media . In this case video is set to true
6. Media.getUserMedia() returns then method which returns a promise which will take 2 parameter:

• a callback function which resolves to a media stream object, in this case video
• failure function for a failure

1. If there is is an error, or the user refuses to give permission to access the webcam then ‘error’ is logged to the console