Webcam Capture picture and Save the Image to the Database


#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">
	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


#2

@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


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


#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


#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.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


#6

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


#7

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


#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


#9

Awesome!

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

-m


#10

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


#11

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

my regards


#12

Cool!

Any questions on the Bower stuff?

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


#13

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

-Matthew Vita


#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


#15

Cool!