<aside> 💡 Request the user to start their webcam stream

</aside>

Code

HTML

<video autoplay="true" id="videoElement">

JavaScript

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");
});
}

Notes

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

6. If there is is an error, or the user refuses to give permission to access the webcam then 'error' is logged to the console

Resources:

http://www.medien.ifi.lmu.de/lehre/ws1920/omm/uebung/folien/OMM-10-Media-Streaming.pdf