oTree Forum >

Taking multiple snapshots from participant during session

#1 by Pipoca

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

#2 by Chris_oTree

I don't see anything in that code that is taking or sending photos? I just see this:

        function sendValue() {

#3 by Pipoca

That's weird, for some reason, the html that I uploaded looks different to what I coded when downloaded. Let me add the whole code for that HTML here

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

{{ block content }}

<!doctype html>
    <!-- CSS -->
        width: 320px;
        height: 240px;
        border: 1px solid black;

        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.

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

    <h4>Facial Capure section</h4>

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

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

    <!-- 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">
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        Webcam.attach( '#my_camera' );
    <!-- 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

                } else {

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

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



{{ endblock }}

Write a reply

Set forum username