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/

Image could not be processed. Please go back and try again.

Tadinya saya ingin mengganti header halaman website, namun ketika selesai meng-crop gambar –> save, muncul :
“Image could not be processed. Please go back and try again”
Solusi yang saya dapat dari forum adalah menginstall php-gd :

yum install php-gd

kemudian jangan lupa restart service apache

service httpd restart

sumber :
http://h3x.no/2011/03/06/wordpress-image-could-not-be-processed-please-go-back-and-try-again

Simple Streaming using RTP on private network

Saya menggunakan 2 komputer yang terhubung melalui private network. Source ada pada komputer dengan IP 10.0.0.35 dan Destination  pada komputer dengan IP 10.0.0.240.

Setup pada source computer 

  1. Pertama tentu saja buka aplikasi VLC media player anda pada main menu Media klik submenu Stream
1. Sub menu Stream

1. Sub menu Stream

2. Lalu pilih menu Capture Device. Karena kita akan menggunakan web cam , pada video device name pilihlah device web cam anda dan pada Audio device name pilihlah microphone dari laptop anda. Lalu klik Stream.

2. Capture device

2. Capture device

 3. Pada source kita menggunakan dshow:// yang merupakan default dari system untuk web cam, tidak usah diganti langsung saja klik next

3. source

3. source

4. Pada destination setup, di sinilah kita menentukan bahwa kita akan mengirimkan streaming menggunakan RTP, maka pada new destination pilihlah RTP / MPEG Transport Stream, kemudian klik Add

4. Destination setup

4. Destination setup

5.  Pada Address, ketikkan IP tetangga ada yang anda tuju untuk menampilkan streaming. Untuk Baseport, terserah angka berapa saja, namun di computer tujuan nanti harus menggunakan port yang sama.

4. IP and port setup

5. IP and port setup

Setup pada  destination computer 

1. Buka aplikasi VLC media player, anda pada main menu Media klik submenu Open Network Stream (Buka Stream Jaringan)

1. Open network stream

1. Open network stream

2. Pada url jaringan ketikkan rtp://@iptetangga:port. Ingat, IP dan port harus persis seperti yang telah di set di computer source. Kemudian klik Play

2. Setup URL jaringan

2. Setup URL jaringan

3. Voilaaa ! Success streaming dengan web cam anda. Bagaimana untuk streaming dengan file? Streaming sebuah video? Tunggu tulisan selanjutnya. Merci

3. Successfully playing

3. Successfully playing