Delay or display animated photo timer before capturing photo using JavaScript

Question

I have created various JavaScript functions to capture photo from the browser. Using the JavaScript functions i can successfully launch camera, capture photos and preview it and then able to upload the photos.

I am thinking to integrate photo timer function. Here, once i click on the take photo button it will wait for 3 seconds (for example) and will display an animated timer (i am thinking to load a an Animated gif file) that will countdown 3 to 1. Once the countdown is finished i want to call the photo capturing function.

But i could not able to integrate this logic in my photo capturing functionality!

My sample code is :

var cameraEnabled = false;
var timer = null;

$('#takeButton').click(function(){

    if(timer != null)
    {
      clearTimeout(timer); 
      timer = null;
    }
    else
    {
        if(!cameraEnabled){
            return false;
        }
        timer = window.setTimeout(webcam.show_image(), 3000);
        webcam.freeze();
        togglePane();
        return false;
    }

});

My show_image function is:

 show_image:function()
 {
    var img = document.createElement("img");
    img.src = "countdowntimer.gif";
    document.body.appendChild(img);
 },

Could anyone please help me on this issue?

Advance thanks for your responses.

This might not be your problem but `setTimeout` takes milliseconds as the second parameter. So currently its waiting 30 seconds call `webcam.show_image`. Also `webcam.show_image()` shouldn't have the parenthesis, i believe it is currently calling it immediately. — DickieBoy, Apr 02 '13 at 13:42

score 1 · Accepted Answer · answered Apr 02 '13 at 13:43

1

timer = window.setTimeout(webcam.show_image(), 30000);

When you do this, you actually call webcam.show_image and then pass result of function to setTimeout. To pass pointer to function you should do

timer = window.setTimeout(webcam.show_image, 30000);

Additionally, I don't think it's a good idea to use animated gif for text countdown, you can just manipulate innerHTML in some DIV. Finally, 30000 ms is 30 secs, not 3.

answered Apr 02 '13 at 13:43

Tommi

3,199
1
24
38

Hi Tommi..thanks i like the code..but could you tell me how can i integrate the shoot function without using the alert?? My shoot function is webcam.freeze(); After shooting i am toggling the pane and return false..for example: togglePane(); return false; – techhunter Apr 02 '13 at 14:26
Then just remove alert and paste webcam.freeze(); togglePane(); instead – Tommi Apr 02 '13 at 14:28
Its a really very good help for me..thanks Tommi.. the timer logic is coming up.. but still i am having different issues which i am going to fix. if i can't fix, i will post the rest of the codes again. – techhunter Apr 02 '13 at 14:46
Tommi..there is one bug in your code logic though i am not sure! after displaying the alert and closing the alert message when i again click on the button it starts to count (-). How it can be fixed? I think i have to write a function to reload the UI? – techhunter Apr 02 '13 at 15:09
1

Sure, it was a proof-of-concept and I thoght you'll investigate code and implement it for yourself. Anyway, you should reinitialize counter variable (timeto = 3) when user clicks on button. For example, like this http://jsfiddle.net/s5gUh/2/ – Tommi Apr 02 '13 at 15:31

Delay or display animated photo timer before capturing photo using JavaScript

1 Answers1