Show
Salam. Selamat datang di sistemit.com. Di kesempatan kali ini saya akan berbagi cara bagaimana untuk mengakses webcam pada website baik itu web php, html dan javascript. Kita kali ini akan menggunakan library bernama webcam.js yang mana library tersebut merupakan library untuk mengakses webcam yang ada di komputer maupun gadget (mobile). Adapun fungsi dari menampilkan kamera webcam pada website ada banyak. Antara lain, misal : untuk keperluan input buku tamu, mengambil gambar secara langsung dan menyimpannya. Nah ini benar benar sangat diperlukan. Bagaimana sih cara mengakses webcam dengan html atau php ? Mari simak langkah langkah berikut : 1. Download webcam.jsDonload library webcam.js di sini 2. Buat file index.phpBuatlah file bernama index.php dan copy kode berikut: <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Cam Snap</title> <script type="text/javascript" src="webcam.js"></script> <script language="JavaScript"> function take_snapshot() { Webcam.snap(function(data_uri) { document.getElementById('results').innerHTML = '<img id="base64image" src="'+data_uri+'"/><button onclick="SaveSnap();">Save Snap</button>'; }); } function ShowCam(){ Webcam.set({ width: 320, height: 240, image_format: 'jpeg', jpeg_quality: 100 }); Webcam.attach('#my_camera'); } function SaveSnap(){ document.getElementById("loading").innerHTML="Saving, please wait..."; var file = document.getElementById("base64image").src; var formdata = new FormData(); formdata.append("base64image", file); var ajax = new XMLHttpRequest(); ajax.addEventListener("load", function(event) { uploadcomplete(event);}, false); ajax.open("POST", "upload.php"); ajax.send(formdata); } function uploadcomplete(event){ document.getElementById("loading").innerHTML=""; var image_return=event.target.responseText; var showup=document.getElementById("uploaded").src=image_return; } window.onload= ShowCam; </script> <style type="text/css"> .container{display:inline-block;width:320px;} #Cam{background:rgb(255,255,215);}#Prev{background:rgb(255,255,155);}#Saved{background:rgb(255,255,55);} </style> </head> <body> <div class="container" id="Cam"><b>Webcam Preview...</b> <div id="my_camera"></div><form> <input type="button" value="Snap It" onClick="take_snapshot()"></form> </div> <div class="container" id="Prev"> <b>Snap Preview...</b><div id="results"></div> </div> <div class="container" id="Saved"> <b>Saved</b><span id="loading"></span><img id="uploaded" src=""/> </div> </body> </html> 3. Buatlah file aksi upload (upload.php)Agar foto yang kita ambil dari webcam tersimpan kita perlu membuat aksi upload dengan file bernama upload.php dengan kode sebagai berikut : <?php define('UPLOAD_DIR', 'uploads/'); $img = $_POST['base64image']; $img = str_replace('data:image/jpeg;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $file = UPLOAD_DIR . uniqid() . $_POST['nama'] . '.png'; $success = file_put_contents($file, $data); print $success ? $file : 'Unable to save the file.'; ?> 4. Buat folder bernama uploadsTerakhir buatlah
folder bernama uploads untuk menyimpan gambar yang di ambil. Demikianlah cara untuk menampilkan webcam dengan menggunakan php dan html. Semoga bermanfaat. Jangan lupa share dan komen yaPengantarKehadiran HTML5 memperkenalkan API dengan akses ke peranti keras perangkat, termasuk API MediaDevices. API ini memberikan akses ke perangkat masukan media seperti audio dan video. Dengan bantuan API ini, pengembang dapat mengakses perangkat audio dan video untuk mengalirkan dan menampilkan umpan video langsung di peramban. Dalam tutorial ini, Anda akan
mengakses umpan video dari perangkat pengguna dan menampilkannya di peramban menggunakan metode API Ketika digunakan bersama API Rekaman MediaStream, Anda dapat merekam dan menyimpan data media yang ditangkap di peramban. API ini hanya bekerja di asal yang aman seperti API lainnya yang baru diperkenalkan, tetapi API ini juga bekerja di Prasyarat
Tutorial ini pertama-tama akan menjelaskan konsep dan mendemonstrasikan contoh dengan Codepen. Di langkah terakhir, Anda akan menciptakan umpan video yang berfungsi untuk peramban. Langkah 1 — Memeriksa Dukungan PerangkatPertama-tama, Anda akan melihat cara memeriksa apakah peramban pengguna mendukung API
Pertama-tama,
ini memeriksa apakah API Langkah 2 — Meminta Izin PenggunaSetelah mengonfirmasi dukungan peramban untuk Tempelkan baris berikut ke Codepen untuk meminta izin:
Objek yang diberikan sebagai argumen untuk metode Bagian ini akan membahas tentang konsep umum dari
Anda harus menentukan baik Jika Anda berniat meminta aliran video dari resolusi
Dengan pembaruan ini, peramban akan mencoba mencocokkan pengaturan kualitas yang ditentukan untuk aliran tersebut. Jika perangkat video tidak dapat memberikan resolusi ini, peramban akan memberikan resolusi lain yang tersedia. Untuk memastikan peramban
memberikan resolusi yang tidak lebih rendah dari yang disediakan sebelumnya, Anda harus memastikan untuk menggunakan properti
Ini akan memastikan bahwa resolusi aliran tersebut setidaknya akan sebesar Dalam beberapa kasus, Anda mungkin khawatir tentang menyimpan data dan
perlu membuat aliran tidak melampaui resolusi yang ditetapkan. Ini dapat menjadi berguna ketika pengguna berada dalam paket yang terbatas. Untuk mengaktifkan fungsionalitas ini, perbarui objek constraints untuk memuat bidang
Dengan pengaturan ini, peramban akan memastikan bahwa aliran yang diberikan tidak lebih kecil dari Ketentuan lain yang dapat digunakan mencakup Anda dapat memperbarui constraints untuk menggunakan kata kunci
Untuk memberi tahu peramban agar menggunakan kamera depan atau belakang (di perangkat mobil) pada perangkat, Anda dapat menentukan properti
Pengaturan ini akan menggunakan kamera yang selalu menghadap depan di semua
perangkat. Untuk menggunakan kamera belakang di perangkat mobil, Anda dapat mengubah properti
Langkah 4 — Menggunakan Metode enumerateDevicesKetika metode Dengan metode ini, Anda dapat memberi pengguna opsi-opsi tentang perangkat media yang digunakan untuk mengalirkan konten audio atau
konten video. Metode ini menghasilkan Contoh cara menggunakan metode ini ditampilkan dalam cuplikan kode di bawah ini:
Respons sampel untuk setiap perangkat akan terlihat seperti yang berikut:
Catatan: Label tidak akan diberikan kecuali ada aliran yang tersedia, atau jika pengguna telah memberikan izin akses perangkat. Langkah 5 — Menampilkan Aliran Video di PerambanAnda telah melewati proses meminta dan mendapatkan akses ke perangkat media, mengonfigurasi constraints untuk menyertakan resolusi yang diperlukan, dan memilih kamera yang Anda perlukan untuk merekam video. Setelah melewati semua langkah ini, setidaknya Anda ingin melihat apakah aliran tersebut bekerja
sesuai dengan pengaturan yang dikonfigurasi. Untuk memastikan ini, Anda akan menggunakan elemen Seperti disebutkan sebelumnya, metode Anda akan
menciptakan demo singkat yang membiarkan pengguna memilih dari daftar perangkat video mereka yang tersedia, yang menggunakan metode Ini adalah metode Ciptakan berkas
index.html
Dalam cuplikan kode di atas, Anda telah menyiapkan elemen yang Anda perlukan dan beberapa kontrol untuk video. Yang juga disertakan adalah tombol untuk mengambil tangkapan layar dari umpan video saat ini. Sekarang, mari kita hias komponen ini sedikit. Ciptakan berkas style.css
Langkah selanjutnya adalah menambahkan fungsionalitas pada demo. Dengan menggunakan metode script.js
Dalam cuplikan kode di atas, ada beberapa hal yang terjadi. Mari kita uraikan:
Selanjutnya, Anda akan menambahkan pendengar ke tombol kontrol pada laman untuk melakukan Perbarui berkas script.js
Sekarang, saat Anda membuka berkas Berikut adalah demo yang lengkap: https://codepen.io/chrisbeast/pen/ebYwpX KesimpulanTutorial ini memperkenalkan API API menggunakan parameter ( Anda dapat memperpanjang demo lebih lanjut untuk memberi pengguna dengan suatu opsi untuk menyimpan tangkapan layar yang diambil, begitu juga dengan merekam dan menyimpan data video serta audio dengan bantuan dari API Rekaman MediaStream. |