Upload Foto Webcam ke Database

<div>Tadi saya sempet test dari sample webcam.js nya, struktur projectnya seperti ini :</div><pre>. ├── index.php ├── upload.php └── uploads &lt;-- Directory utk menyimpan file yang akan diupload</pre><div><br>index.php (sumber:&nbsp;<a href="https://pixlcore.com/demos/webcamjs/demos/basic.html">https://pixlcore.com/demos/webcamjs/demos/basic.html</a>) dengan beberapa tambahan&nbsp; script untuk upload via jquery ajax :</div><pre> &lt;!doctype html&gt;

&lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;WebcamJS Test Page&lt;/title&gt; &lt;style type="text/css"&gt; body { font-family: Helvetica, sans-serif; } h2, h3 { margin-top:0; } form { margin-top: 15px; } form &gt; input { margin-right: 15px; } #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; } input[type=button], button{ padding: 8px 12px; font-weight: bold; border: 2px solid #bbb; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="results"&gt;Your captured image will appear here...&lt;/div&gt;

<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>

<div id="my_camera"></div>

<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js"></script>

<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
	Webcam.set({
		width: 640,
		height: 480,
		image_format: 'jpeg',
		//jpeg_quality: 90
	});
	Webcam.attach( '#my_camera' );
</script>

<!-- A button for taking snaps -->
<form>
	<input type=button value="Take Snapshot" onClick="take_snapshot()">
	<button type="button" onClick="uploadTakenPicture()" name="upload-image">Upload Picture</button>
</form>

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
	let images = null;
	function take_snapshot() {
		// take snapshot and get image data
		Webcam.snap( function(data_uri) {
			images = data_uri;
			// display results in page
			document.getElementById('results').innerHTML =
				'<h2>Here is your image:</h2>' +
				'<img src="'+data_uri+'"/>';
		} );
	}

	function uploadTakenPicture() {
		if(images !== null) {
			$.ajax({
				url: 'upload.php',
				method: 'POST',
				data: {
					'base64img': images
				},
				success: function(res){
					let response = JSON.parse(res);
					if(response.status === 'success') {
						alert("Uploaded successfully!");
					} else {
						alert(response.message);
					}
				},
			})
		} else {
			alert("Please take picture first!");
		}
	}
</script>

&lt;/body&gt; &lt;/html&gt;</pre><div><br>upload.php</div><pre>&lt;?php

if(isset($_POST['base64img'])) { $base64img = $_POST['base64img']; $base64img = str_replace("data:image/jpeg;base64,", "", $base64img); $imageDecoded = base64_decode($base64img); $path = 'uploads/'; $filename = time() . '.jpeg';

try{
	file_put_contents($path . $filename, $imageDecoded);
	$response = [
		'status' => 'success',
	];
} catch(\Exception $e) {
	$response = [
		'status' => 'error',
		'message' => $e->getMessage()
	];
}

echo json_encode($response);

}</pre><div><br>Saya coba seperti itu bekerja normal. mungkin bisa dijadikan sampel dan tinggal dikonversikan ke style codeigniter saja. Semoga berhasil.</div>