HTML5: Take photo with webcam

Robert AndresenUncategorized Leave a Comment

I needed a simple way to take product images on a local webpage.

Instead of taking a picture with you phone, send image to your computer and upload it – why not use a simple webcam?

I followed this tutorial: http://fuel-efficient-vehicles.org/pwsdb/?p=304. So look at the tutorial if you need more info.

 

takePicture.php




Take a photo with your webcam

 

You have to accept that your browser can access the webcam, if you haven't already!

 
 

 

savePicture.php

"; // Show photo

		list($type, $rawData) = explode(';', $rawData);
		list(, $rawData)      = explode(',', $rawData);
		$unencoded = base64_decode($rawData);
		
		$filename = $getMercID.'_'.date('dmYHi').'_'.rand(1111,9999).'.jpg'; // Set a filename
		file_put_contents("images/products/$filename", base64_decode($rawData)); // Save photo to folder

		// Update product database with the new filename
		$query = "UPDATE products SET 
					product_photo='".$filename."'
					WHERE id='".$getMercID."'";
		$result = $mysqli->query($query);


	} 
	
	// Stop if product id is missing
	else {
		die('Product ID is missing...');
	}

?>