Taking multiple snapshots from participant during session

223 views
Skip to first unread message

Pipoca

unread,
Jul 6, 2022, 11:49:33 PM7/6/22
to oTree help & discussion
Hi all,

I'm trying to develop an app that takes multiple photos per second from the participants during the session, but I'm having issues making my code work. 

I manage to take a single picture and send it to the server, but not several of them. Here is my frontend code

"""
{{ block title }}
    Facial Capture Page!
{{ endblock }}

{{ block content }}

<!doctype html>
<html>
<body>
    <!-- CSS -->
    <style>
    #my_camera{
        width: 320px;
        height: 240px;
        border: 1px solid black;
    }
    </style>

    <p>
        Welcome! This is an oTree app that can be used for Facial Emotion Recognition experiments. Feel free to download the
        source code <a href="https://github.com/mgutierrezc/otree_facial_coding/releases/tag/v1.0.0-beta">here</a>. You can contact me by mail in case you have any question regarding it.
    </p>

    <h4>Instructions</h4>
   
    <ul>
        <li>Allow the app to use your webcam. </li>
        <li>Position your face in front of the camera. </li>
        <li>Click on "Take snapshot"</li>
        <ul>
            <li>If you are satisfied with your picture, click on "Next" (scroll down if you don't see it)</li>
            <li>Else, take a new snapshot. It will automatically replace the previous one. </li>
        </ul>
        <li><b>Note: </b>only the photo used for the FER is stored. the other ones are automatically deleted each time you
        take a new one.</li>
    </ul>

    <h4>Facial Capure section</h4>
    <br>

    <div id="my_camera"></div>
    <br>

    <button class="button">Take snapshots</button>
   
    <br><br>
    <div id="results" ></div>
    <input type="hidden" name="base_image" id="base_image" />
    <br><br>
    {{ next_button }}
   
    <br><br>
    <p>
        {{ include C.contact_template }}
    </p>

   
    <!-- Webcam.min.js -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js"></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 -->
   
    <!-- Code to handle taking the snapshot and displaying it locally -->
    <script language="JavaScript">


        function take_snapshot() {  
            var img = '';

            // take snapshot and get image data
            Webcam.snap( function(data_uri) {
                // display results in page
                document.getElementById('results').innerHTML =
                    '<img src="'+data_uri+'"/>';
               
                img = data_uri;
            } );

            return img;
        }

        $('.button').click(function() {
            var imgs = '';

            var started = Date.now();

            // make it loop every 200 milliseconds
            var interval = setInterval(function(){

                // for 2 seconds
                if (Date.now() - started > 2000) {

                // and then pause it
                clearInterval(interval);

                } else {

                // the thing to do every 100ms
                imgs = imgs + "----" + take_snapshot();
                }
            }, 200); // every 200 milliseconds

            document.getElementById('base_image').value = imgs;
        });



 
    </script>
   
 

</body>
</html>


{{ endblock }}

"""

Reply all
Reply to author
Forward
0 new messages