Mengakses Camera dengan HTML5

Bisa mengakses Camera dan Capture image di website menggunakan HTML5al yang mungkin, sudah lama mungkin tapi saya yang baru tau.πŸ˜€

Sekarang Setelah melakukan riset, browsing2 dari berbagai sumber akhirnya dapat nih dasarnya. lalu tak tambahin CSS serta tak edit trigernya semoga bisa bermanfaat. meskipun ini masih jauh dari yang saya cari tapi karena saya masih awam senanga rasanya bisa menemukan hal seperti ini. yah buat catatan juga.. karena ini juga baru malam pertama riset dan coba2. semangat terus..πŸ˜€

setelah selesai tak ada salahnya di catat disini, siapa tau temen2 juga ada yang mengalami masalah yang sama dengan saya.

Ini adalah hasilnya, ya masih sederhana silahkan dikembangkan sendiri.

hasil by fai

Langsung Saja, berikut adalah canvas yang kita buat di dalam body :

<!–

Biasanya Element tidak akan dibuat atau muncul jika belum di ijinkan (allow) oleh client diperbolehkan akses camera.

–>

<div id=”awal”>

<video id=”video” width=”200β€³ height=”150β€³ autoplay></video>

Klik Video diatas Untuk mengambil Gambar

</div>

<div id=”hasil”>

<canvas id=”canvas” width=”400β€³ height=”300β€³></canvas>

Hasil Capture foto.

</div>

Lalu kita buat javascriptnya letakan di Head ya :

<script type="text/javascript">// <![CDATA[
// Menambahkan listener setelah conten selesai di load

window.addEventListener("DOMContentLoaded", function() {

// menyeleksi elemen dan membuat pengaturan awal

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),

video = document.getElementById("video"),

videoObj = { "video": true },

errBack = function(error) {

console.log("Video capture error: ", error.code);

};

// event saat tombol tak foto

document.getElementById("video").addEventListener("click", function() {

context.drawImage(video, 0, 0, 400, 300);

//alert('test ko ngga bisa ya');

});

// ambil video untuk kanvas awal

if(navigator.getUserMedia) { // Standard

navigator.getUserMedia(videoObj, function(stream) {

video.src = stream;

video.play();

}, errBack);

} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed

navigator.webkitGetUserMedia(videoObj, function(stream){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errBack);

}

}, false);
// ]]></script>

Mudah bukan ?πŸ˜€

Ingat sebagai catatan walaupun file html biasa tapi untuk bisa akses kamera maka harus dijalankan di dalam server contoh apache, serta saya ememakai browser google crome.

anda bisa download source codenya langsung.. cuma 1 halaman ko. tenang aja..

link Download tutorial acces camera with html 5 :Β akses camera dengan html 5

3 thoughts on “Mengakses Camera dengan HTML5

    • wah makasih ya dah mampir,
      belum sempet mas bro.. soalnya kalo detail buaanyak. jdi memang sengaja dimasukan dasar2 aja. dan detailnya bisa googling banyak.
      tpai kalo ada mslaah siap bantu tanya langsung lewat grup FB aja.πŸ™‚

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s