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.


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

 <!DOCTYPE html>

<html lang="en">


<meta charset="utf-8">

<title>Trying getUserMedia API</title>
<script src=""


function onFailure(err) {

alert("The following error occured: " +;


jQuery(document).ready(function () {

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

navigator.getUserMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||


if (navigator.getUserMedia) {



{ video: true, audio:true },

function (localMediaStream) {

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

}, onFailure);


else {

alert('OOPS No browser Support');






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




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

getUserMedia access

getUserMedia access

Yatttaa! sukses!



Big thanks to :

Reference :