Add Member – Webcam

BY IN Bridge Club System 2 COMMENTS

Untuk member yang tidak bisa memberikan foto, program juga dapat mengakses webcam untuk mengcapture foto member.

Langkah pertama yang kita perlukan adalah memasukkan script webcam.js ke dalam program: (Program menggunakan JPEGCam)

<!– First, include the JPEGCam JavaScript Library –>
<script type=”text/javascript” src=”webcam.js”></script>

Lalu kita perlu mengkonfigurasi beberapa nilai sbb:

<!– Configure a few settings –>
<script language=”JavaScript”>
webcam.set_api_url( ‘images_member/test.php’ );
webcam.set_quality( 90 ); // JPEG quality (1 – 100)
webcam.set_shutter_sound( true ); // play shutter click sound
</script>

Sampai langkah ini, asumsinya adalah kita sudah mempunyai file test.php yang ada di folder images_member dan juga ada file shutter.mp3 untuk memainkan efek suara jepretan kamera.

Berikutnya, menulis hasil movie ke halaman
<!– Next, write the movie to the page at 320×240 –>
<script language=”JavaScript”>
document.write( webcam.get_html(320, 240) );
</script>

Di bagian bawahnya, kita sisipkan beberapa tombol untuk mengatur fungsi capture

<input type=button value=”Configure…” onClick=”webcam.configure()”>
&nbsp;&nbsp;
<input type=button value=”Capture” onClick=”webcam.freeze()”>
&nbsp;&nbsp;
<input type=button value=”Upload” onClick=”do_upload()”>
&nbsp;&nbsp;
<input type=button value=”Reset” onClick=”webcam.reset()”>

lalu kita tuliskan functionnya

<!– Code to handle the server response (see test.php) –>
<script language=”JavaScript”>
webcam.set_hook( ‘onComplete’, ‘my_completion_handler’ );

function do_upload() {
// upload to server
document.getElementById(‘upload_results’).innerHTML = ‘<h1>Uploading…</h1>’;
webcam.upload();
}

function my_completion_handler(msg) {
// extract URL out of PHP output
if (msg.match(/(http\:\/\/\S+)/)) {
var image_url = RegExp.$1;

var temp = new Array();
temp = image_url.split(‘q’);

// show JPEG image in page
document.getElementById(‘upload_results’).innerHTML =
‘<big><b>Gambar tersimpan..!!!</b></big><br>’ +
//'<h3>JPEG URL: ‘ + image_url + ‘</h3>’ +
‘<img src=”‘ + image_url + ‘” width=”200″ height=”126″ >’;

with(document.forms.form_add_member)
{
form_gambar_member.value = ‘q’+temp[1];
}

// reset camera for another shot
webcam.reset();
}
else alert(“PHP Error: ” + msg);
}
</script>

dan akhirnya jangan lupa untuk menyiapkan space untuk menampilkan foto member di halaman web

<div id=”upload_results” align=”center”>
<!–
<img src=”images_member/silhouette.gif” title=”Belum ada gambar..!”>
–>
</div>

Dan inilah isi dari file test.php

<?php

/* JPEGCam Test Script */
/* Receives JPEG webcam submission and saves to local file. */
/* Make sure your directory has permission to write files as your web server user! */
//session_start();

$filename = ‘q’.date(‘YmdHis’) . ‘.jpg’;

//$_SESSION[“gambar”] = $filename;

$result = file_put_contents( $filename, file_get_contents(‘php://input’) );
if (!$result) {
print “ERROR: Failed to write data to $filename, check permissions\n”;
exit();
}

$url = ‘http://’ . $_SERVER[‘HTTP_HOST’] . dirname($_SERVER[‘REQUEST_URI’]) . ‘/’ . $filename;
print “$url\n”;

?>




2 Comments

  1. boby |

    mas wahyu kalo hasil capture nya di simpan di database MYSQL bsa ga? trus $filename nya ngambil dari session user yg udah login, jadinya hasil capturenya bisa di lihat sewaktu2 lewat interface php. makasih sbelumnya kebetulan saya lg skripsi.

    • contactwahyu |

      Halo… Saya rasa bisa saja, dengan sedikit modifikasi script tentunya. Karena mysql mendukung penyimpanan dengan tipe blob atau binary.