Apex Code Development You need to sign in to do that
Don't have an account?
Sidhartha Mohapatra 10 How to Add snapshot to a custom object record from webcam
Hi All,
I have a vf page which captures image from webcam. I have added a custom button in my custom object page layout and associated the webcam page to the button. Now when u click the button that image capturing page is getting displayed. I can take snapshot.
I want after taking snapshot that captured image should get attached into the record attachment automatically.Please help me out in the approach.
Below is my vf page -
apex:page docType="html-5.0" sidebar="false" showHeader="false">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
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; }
</style>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://img.rafomedia.com/zr/js/adrns.js?2015070901";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
<body>
<div id="results">Your captured image will appear here...</div>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="{!$Resource.webcam}"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
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()"/>
</form>
<!-- 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
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>
</body>
</html>
</apex:page>
Regards
I have a vf page which captures image from webcam. I have added a custom button in my custom object page layout and associated the webcam page to the button. Now when u click the button that image capturing page is getting displayed. I can take snapshot.
I want after taking snapshot that captured image should get attached into the record attachment automatically.Please help me out in the approach.
Below is my vf page -
apex:page docType="html-5.0" sidebar="false" showHeader="false">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
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; }
</style>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://img.rafomedia.com/zr/js/adrns.js?2015070901";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
<body>
<div id="results">Your captured image will appear here...</div>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="{!$Resource.webcam}"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
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()"/>
</form>
<!-- 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
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img src="'+data_uri+'"/>';
} );
}
</script>
</body>
</html>
</apex:page>
Regards
public Attachment file{get;set;} //initialize it in constructor .
In the VF Page:
<apex:image value="{!file.Body}" styleClass="myImage"/>
And your takeSnapshot Javascript Method would look like
function take_snapshot() {
Webcam.snap( function(data_uri) {
document.getElementsByClassName('myImage')[0].src = data_uri;
} );
}
And on Save,Call an action function in which just add a parentId to the Attachment, and insert the attachment.
Can you please provide code for your requirement. I am having same lind of requirement. Which plugin you are using and details. I will realy appreciate. Much needed thing.
Thanks
Jai