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

Using the getUserMedia() API which allows you to access a user’s camera and mic without any plugins
Streams have inputs (video) and outputs (video)
The if-conditional checks if the getUserMedia is supported
Syntax: navigator.mediaDevices.getUserMedia(constraints).then(successCallback).catch(errorCallback)
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
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

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

Leave a Reply Cancel reply