Accessing Video+Audio (getUserMedia tutorial)

Plugins are so annoying

  • Downloading, installing and updating can be complex, error prone and annoying.

  • Can be difficult to deploy, debug, troubleshoot, test and maintain

  • May require licensing and integration with complex, expensive technology.

  • It’s often difficult to persuade people to install plugins in the first place!

Thanks to getUserMedia API !!

getUserMedia works

getUserMedia works

It has 3 parameters :

  • Constraints

    • an object having either one or both the properties audio and video.

    • To get both video and audio you would use: { video: true, audio: true }

  • successCallback

    • A function that will be called if the media stream is successfully loaded. The function will be passed a LocalMediaStreamobject.

  • errorCallback (optional)

    • A function that will be called if the media stream cannot be loaded.

LET’S TRY IT!!

assuming that u’ve had running a web server. copy this code then load the page on your browser.

 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Trying getUserMedia API</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"
type="text/javascript"></script>

<script>

function onFailure(err) {

alert("The following error occured: " + err.name);

}

jQuery(document).ready(function () {

var video = document.querySelector('#webcam');

navigator.getUserMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia);

if (navigator.getUserMedia) {

navigator.getUserMedia

(

{ video: true, audio:true },

function (localMediaStream) {

video.src = window.URL.createObjectURL(localMediaStream);

}, onFailure);

}

else {

alert('OOPS No browser Support');

}

});

</script>
</head>

<body>

<div>

<video id="webcam" width="500" autoplay></video>

</div>

</body>

</html>

Nanti akan muncul permohonan untuk mengakses web cam dan mic laptop, just klik allow.

getUserMedia access

getUserMedia access

Yatttaa! sukses!

getUserMedia

getUserMedia

Big thanks to :

Reference :

http://www.html5rocks.com/en/tutorials/getusermedia/intro/?redirect_from_locale=fr

http://daginge.com/technology/2013/12/05/taking-snapshots-with-getusermedia/

http://www.arungudelli.com/html5/html5-getusermedia/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s