Menampilkan Kamera di halaman Web
I.Latar Belakang.
Membuat suatu program yang memunculkan kamera di halaman web.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.
Untuk mengambil gambar dengan laptop langsung.
IV.Penjelasan.
Ambil Gambar
Pertama kita harus membuat file bernama kamera.php lalu kita harus membuat kameranya muncul pada halaman web tapi kamera muncul harus di atas canvas, karena canvas sebagai tempat meletakan kamera nya.
Contoh :
Maka outputnya :
Lalu kita buat tombol untuk mengambil foto nya.
Contoh :
Maka outputnya :
Lalu kita membuat fungsi fungsi javascript untuk membuka kameranya agar bisa memunculkan gambar kita.
Contoh:
Maka outputnya :
setelah kita bisa mengaktifkan kamera kita akan membuat tombol AMBIL itu berfungsi mengambil foto, tahap pertama pada tombol adalah membuat fungsi javascriptnya, lalu setelah fungsi javascript nya sudah kita buat proses penamaan gambarnya dengan php saya membuat nya dengan file proses.php pada fungsi php.
Contoh :
Nah sekarang kita bisa ambil foto dengan kamera, hasil foto akan tampil di canvas sebelahnya.
V.Kesimpulan.
kita bisa memodifikasikan html, css, php, dan javascript. menjadi suatu program yang baik.
VI.Refrensi.
Membuat suatu program yang memunculkan kamera di halaman web.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.
Untuk mengambil gambar dengan laptop langsung.
IV.Penjelasan.
Ambil Gambar
Pertama kita harus membuat file bernama kamera.php lalu kita harus membuat kameranya muncul pada halaman web tapi kamera muncul harus di atas canvas, karena canvas sebagai tempat meletakan kamera nya.
Contoh :
Maka outputnya :
Contoh :
Maka outputnya :
Lalu kita membuat fungsi fungsi javascript untuk membuka kameranya agar bisa memunculkan gambar kita.
Contoh:
Maka outputnya :
Contoh :
Nah sekarang kita bisa ambil foto dengan kamera, hasil foto akan tampil di canvas sebelahnya.
V.Kesimpulan.
kita bisa memodifikasikan html, css, php, dan javascript. menjadi suatu program yang baik.
VI.Refrensi.
- w3schools.com
- https://davidwalsh.name/browser-camera
- http://stackoverflow.com/questions/13760805/how-to-take-a-snapshot-of-html5-javascript-based-video-player
- http://stackoverflow.com/questions/38096115/take-a-picture-from-html5
Komentar
Posting Komentar