Ane ceritanye lagi sibuk buat ngerjain TA S-1 ane. Ane dari fisika. eh TA-nya masalah instrumentasi astronomi -__-. Hahaha... memang rada aneh se kedengerannya tapi apa boleh buat namanya juga masih status mahasiswa. Nah salah satu bagian penting dari TA ane tuh bikin video coference. Aduh gimana cara lagi -__-... Tapi apa boleh buat. Nah ane seacing-seacing tuh di inet masalah video conference. Awal-awal se pake streaming via VLC sama wirecast. Simple se. Tapi masa tergantung sama software. Ane se pengennya pure pake web-programming. Nah ketemu tuh caranya pake getUserMedia().
Ni ane jelasin singkatnya.
nah getUserMedia() ini biasa digunain buat ngeakses hardware yang ada di kompi (dalam hal ini yang ane pake cuma akses webcam ama akses mikropon. getUserMedia() ni harus pake html5 yang support. Trus gg semua browser tu support, contohnya aja IE (tau lah ya). Klo ane disini pakenya mozila firefox, dan versi terbaru aja yang bisa dipake (cari ajalah di inet da pararinter atuh).
Disini ane cuma pengen fokus buat akses webcam laptop pake getUserMedia().
Ada dua bagian penting pas kita mw akses web-cam.
- video tag. Ni html tag buat nampilin video hasil streamingan.
- Baru fungsi getUserMedia()-nya.
Bagian pertama dulu ni. (Ane anggap kalian dah ngerti basic HTMLnya yo). Bikin tag HTML buat streaming videonya.
<video id="streaming" autoplay></video>
Udah cuman segitu doank.
Nah yang ribetnya ini ni... bikin getUserMedia()-nya.
ada tiga parameter penting ni yaitu Constrain, Success-Callback, sama satu lagi Error-Callback. Constrain itu parameter buat media streamingnya. Nah di media streaming ini cuman ada dua member dengan tipe boolean yaitu audio sama video (klo mw nyobain pilih salah satu juga boleh). getUserMedia() nantinya bakalan manggil fungsi yang udah ada di Success-Callback. Jadi jangan lupa tuh masukin fungsinya di Success-Callback. Biar bisa didefinisiin ma si getUserMedia. Nah satu lagi ni yaitu Error-CallBack. ni fungsi sifatnya opsional. Nah klo misal fungsi yang ada di Success-Callback gg terdefinisi, itu getUserMedia() bakalan manggil ni fungsi.
yah segitu deh penjelasan singkatnya langsung aja ke source code intinya.
1. Definisiin dulu HTML5nya
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
2. Bikin tag video buat streamingnya.
<video id="streaming" width=320 autoplay></video>
3. Bikin tempat buat ngisi script javascriptnya
<script>
.
.
.
</script>
4. Kita isi tu di dalem tag scriptnya pake fungsi getUserMedia().
4.1. Definisiin dulu getUserMedia()-nya apakah bergantung pada browser.
navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);
4.2. Baru fungsi intinya ni.
navigator.getUserMedia(
// constrain
{ video: true, audio: true}, // buat akses video sama audio di laptop.
// success-callback
function(localMediaStream){ //fungsi buat nampilin
var vid = document.getElementById('streaming'); // masukin ke variabel vid dari video yang id stream
vid.src = window.URL.createObjectURL(localMediaStream); // ni buat streamingnya
}
// error call-back
// diisi kalo error... tapi kagak usahlah...
}
Udah deh gitu doank...
nanti tampilnya kayak gini ni...
nanti si browser minta izin dulu buat ngakses mikropon ma kamera.
trus kalo di allow kayak gini deh jadinya.
Gambar cowo ganteng yang keluar... wkwkwkwwk...
Udah deh... segitu aje dari ane... moga manfaat buat agan-agan... wkwkwkwkwkwk...
ntar nextnya mw cobain yang peerconnection...
No comments:
Post a Comment