Webcam Capture picture and Save the Image to the Database

i please help im trying to customize so that patient photos are take direct with webcanm and i need to be saved in folder where it can be uploaded to database. iam stack here… my script is

<?php $connect = mysqli_connect("localhost","root","","Kalson1"); if (isset($_post["image"])) { $file=addslashes(file_get_contents($_file["results"]["tmp_name"])); $query="INSERT INTO patient_data(image) VALUES ('image')"; if (mysql_query($connect, $query)) { echo ''; } } ?>

<!doctype html>

body { font-family: Helvetica, sans-serif; } h2, h3 { margin-top:0; } form { margin-top: 15px; } form > input { margin-right: 15px; } #results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
Take Patient Picture...
<div id="my_camera"></div>

<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="webcam.js"></script>

<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
	Webcam.set({
		width: 500,
		height: 300,
		dest_width: 200, 
		dest_height: 180,
		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()" style="float:left; width:180px; height:40px;"/>
</form> 
<form method="post" enctype="multipart/form-data">   
    <input type="submit" id="results" name="image" value="submit" style="float:right; width:180px; height:40px; background:rgba(0,102,51,1)"  />
    </form>
<script language="JavaScript">
$(document).ready(function(){
	$('#image').click(function(){
		var image_name= $('#results').val();
		if (image_name==''){
			alert('please take snapshot');
			return false;
			
			}
			else
			{
			var extension =$('#results').val().split('.').pop().toLowerCase();
			if(jquery.inArray(extension,['gif','png','jpeg','jpg']) == -1)
	{
		alert('invalid image');
		$('results').val('');
		return false;
	}

				}
		
		
		});
	
	});
</script>

<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
	function take_snapshot() {
		// take snapshot and get image data
		Webcam.snap( function(data_uri) {
			// display results in page
			
				
			Webcam.upload( data_uri, 'saveimage.php', function(code, text) {
				document.getElementById('results').innerHTML = 
				'<h2>Patient image:</h2>' + 
				'<img src="'+text+'"/>';
			} );	
		} );
	}
</script>
per now it captures an display in web page as shown in figure below but it can send to database to be called to view on patients report

i kindly request some help to make it work…thanks

@Sombi_Willingtone,

We checked your code which you shared above for web cam access ,we understand that
1.You are capturing the image by clicking the “take screen-shot” button
2.Once the image is captured that will be saved in local using ‘saveimage.php’ .

We suggest you to get the response url from ‘saveimage.php’ and store the URL in a hidden field of the form.

During the form submission , you can use the response URL as the file path value to the corresponding column in the table.

We also suggest there some n number of plug-in to use web-cam feature with php.

Let us know if you have any clarifications.

Thank you,
ViSolve

@Sombi_Willingtone This is a really cool feature. Once you get further with it, would you be willing to get it into the OpenEMR codebase with me?

Also it appears that the webcam.js is deprecated in favor of GitHub - amw/jpeg_camera: JpegCamera – JavaScript webcam image capture library - Have you tired this package?

true MatthewVita i have tried with jpegcamera now it working fine…im now battling with displaying it on patient summary page and custom report

1 Like

yes i can now capture and upload my picture using jpegcemera plugin… but some challenge on how to link it patient
i made query " SELECT patient_data.id, patient_data.fname, patient_data.lname, snapshot.id, snapshot.image FROM patient_data
INNER JOIN SNAPSHOT ON snapshot.id = patient_data.pid;" . my problem now to disploy it on patient file

or any way how to link to upload.php in library/ajax/upload.php to upload it to document folder as its

the zip file contains my source code im trying out

https://drive.google.com/file/d/1qSs9IhNOzMcrWTpwskwr4-2xwlt00_jJ/view?usp=sharing

@Sombi_Willingtone

Great momentum. I took a look at the code. Would you like to start getting this to work within OpenEMR? Have you used used Bower?

sure, is my pleasure to , i really like that. i hav’t used Bower before but may be it an opportunity to learn it too

thanx matthew

Awesome!

Please review http://www.open-emr.org/wiki/index.php/Bower for more info

-m

ok, let me try it now i will update you soon

1 Like

woow thanks of been down but now im back, i went through Bower now im ready to go

my regards

1 Like

Cool!

Any questions on the Bower stuff?

Are you able to share the updated code on Github or like you did before with Drive?

Hi @Sombi_Willingtone - any branch on Github I could look at for this?

-Matthew Vita

hello @MatthewVita, Really it has been longtime, i haven’t uploaded yet. i have 30 medical centers which im giving support to and they need much customization, this has kept me too busy. but i promise soon i will send u link on Github.

thanks we keep in touch

1 Like

Cool!

hello matthew;
I successfully completed webcam photo capture, i will upload the files and you review as help me to incooperate in openemr

thanx
regards

hi @Sombi_Willingtone ,

Are you able to do a Pull Request with code on github? If need guidance, just let us know.

Thanks,
-brady

(Just replied to your PM on this - thanks!)

is there a version of this in the git repo that we can check out?

Hi Sombi Willingtone,

I have already implement this feature for one of our client I will give exact location, which file needs to modify.

Thanks,
Nilesh