Capture Audio & Video with your website like skype using HTML5 and JavaScript ~ Hybrid Mobile Apps Development, React Native, Flutter, JavaScript, Darts, iOS, Android, NodeJS
Coding Savvy FB Twitter Google
» »

Capture Audio & Video with your website like skype using HTML5 and JavaScript

Hi Friends, It been a while since we did some cool Programming stuffs, Let crack this one together. Today we are going to learn how to access user webcam and use it to snap picture and videos just like Skype.This was initially done by +Eric Bidelman a Google Developer on HTMLRockswebsite owned by Google. but I save the best out of it for us, Please keep in Mind that the technology behind this audio/video capture is fully supported by Google Chrome ,Opera,Latest Firefox browser and some other browser but I will recommend that you make use of Google chrome to see how it really works.
Capture Audio & Video with your website like skype using HTML5 and JavaScript


Download Source Codes

Note: Only page with HTTPS support can use this feature
Audio/Video capture has been the "Holy Grail" of web development for a long time.
Many Developer have been able to use technologies and plugins such as (Flash or Silverlight) to get the job done.
But now HTML5 is here to rescue us from all that, It might not be apparent, but the rise of HTML5 has brought a surge of access to device hardware. Geolocation (GPS), the Orientation API (accelerometer), WebGL (GPU), and the Web Audio API (audio hardware) are perfect examples. These features are ridiculously powerful, exposing high level JavaScript APIs that sit on top of the system's underlying hardware capabilities.
We are going to use navigator.getUserMedia(), which allows web applications to access a user's camera and microphone without a plugin.
Firstly let look at how you can know if a browser supports this feature :


function hasGetUserMedia() {
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia); }


if (hasGetUserMedia()) {
// Good to go!
} else {
alert('getUserMedia() is not supported in your browser');
}

Gaining access to the hardware (Webcam and Microphone):
Th code below code works with HTML5 new tags < audio ></audio> and < video ></video> to archive our goal.
Notice that we're not setting a src attribute or including <source></source> elements on the <video> element. Instead of feeding the video a URL to a media file, we're feeding it a Blob URL obtained from a LocalMediaStream object representing the webcam.


< /video >
< /video >
<video autoplay ></video>


To set the media constrain Width,Hight and resolution
The getUserMedia() is what we are also going to use for setting constrain for the media stream
var hdConstraints = {
video: {
mandatory: {
minWidth: 1280,
minHeight: 720
}
}
};
navigator.getUserMedia(hdConstraints, successCallback, errorCallback);

var vgaConstraints = {
video: {
mandatory: {
maxWidth: 640,
maxHeight: 360
}
}
};
navigator.getUserMedia(vgaConstraints, successCallback, errorCallback);



To select our media source, in case there are several media hardware to choose from.
In Chrome 30 or later, getUserMedia() also supports selecting the the video/audio source using the MediaStreamTrack.getSources() API.
In this example, the last microphone and camera that's found is selected as the media stream source:

MediaStreamTrack.getSources(function(sourceInfos) {
var audioSource = null;
var videoSource = null;

for (var i = 0; i != sourceInfos.length; ++i) {
var sourceInfo = sourceInfos[i];
if (sourceInfo.kind === 'audio') {
console.log(sourceInfo.id, sourceInfo.label || 'microphone');

audioSource = sourceInfo.id;
} else if (sourceInfo.kind === 'video') {
console.log(sourceInfo.id, sourceInfo.label || 'camera');

videoSource = sourceInfo.id;
} else {
console.log('Some other kind of source: ', sourceInfo);
}
}
sourceSelected(audioSource, videoSource);
});

function sourceSelected(audioSource, videoSource) {
var constraints = {
audio: {
optional: [{sourceId: audioSource}]
},
video: {
optional: [{sourceId: videoSource}]
}
};

navigator.getUserMedia(constraints, successCallback, errorCallback);
}

Browser Security might come up, Some browsers throw up an infobar upon calling getUserMedia(), which gives users the option to grant or deny access to their camera/mic. The specification unfortunately is very quiet when it comes to security.
Browser Permisson
I have put it all together in a single file.
Download The source code and try it with your browser.
Download Source Codes
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment