Webcam Capture picture and Save the Image to the Database

(Sombi Willingtone) #1

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">
		width: 500,
		height: 300,
		dest_width: 200, 
		dest_height: 180,
		image_format: 'jpeg',
		jpeg_quality: 90
	Webcam.attach( '#my_camera' );

<!-- A button for taking snaps -->
	<input type=button value="Take Snapshot" onClick="take_snapshot()" style="float:left; width:180px; height:40px;"/>
<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)"  />
<script language="JavaScript">
		var image_name= $('#results').val();
		if (image_name==''){
			alert('please take snapshot');
			return false;
			var extension =$('#results').val().split('.').pop().toLowerCase();
			if(jquery.inArray(extension,['gif','png','jpeg','jpg']) == -1)
		alert('invalid image');
		return false;


<!-- 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+'"/>';
			} );	
		} );
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

(ViSolve) #2


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,

(Matthew Vita) #3

@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?

(Sombi Willingtone) #4

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

(Sombi Willingtone) #5

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.fname, patient_data.lname,, snapshot.image FROM patient_data
INNER JOIN SNAPSHOT ON =;" . 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

(Sombi Willingtone) #6

(Matthew Vita) #7


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?

(Sombi Willingtone) #8

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

(Matthew Vita) #9


Please review for more info


(Sombi Willingtone) #10

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

(Sombi Willingtone) #11

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

my regards

(Matthew Vita) #12


Any questions on the Bower stuff?

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

(Matthew Vita) #13

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

-Matthew Vita

(Sombi Willingtone) #14

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

(Matthew Vita) #15


(Sombi Willingtone) #16

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


(Brady Miller) #17

hi @Sombi_Willingtone ,

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


(Matthew Vita) #19

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

(Jeremiah Ocasio) #20

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

(Nilesh Hake) #21

Hi Sombi Willingtone,

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