Taking multiple snapshots from participant during session

#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

```html
{{ 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 }}
```
Taking multiple snapshots from participant during session

Write a reply
