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

Join 7000+ other code newbies

Last year 7000 newbies learned how to code with me! Totally project oriented.

Subscribe and you'll get access to my classes, coupon codes for tech conferences and totally valuable article on jump-starting your career as a developer.

Stream video with getUserMedia()

Join 7000+ other code newbies

Related

Leave a Reply Cancel reply