Captura de Imagem após contagem regressiva

[DanRibeiro 0]

Olá pessoal, sou novo no fórum e trago uma dúvida, preciso fazer com que #captura venha somente depois da #contagem regressiva, não estou sabendo fazer isso, alguém pode ajudar com alguma dica? Grato a todos.

<div id="content">

<div> <video id="video" width="640" height="480" autoplay></video></div>

<div> <canvas id="canvas" width="640" height="480"></canvas></div>

<div> <button id="snap">Tirar Foto</button></div>

<div> <button id="save">Enviar Foto</button></div>

<div> <button id="cancel">Cancelar</button></div>

</div><!-- -->

<script type="text/javascript">

window.addEventListener("DOMContentLoaded", function() {

var canvas = document.getElementById("canvas"),

context = canvas.getContext("2d"),

video = document.getElementById("video"),

videoObj = { "video": true },

errBack = function(error) {

console.log("Video capture error: ", error.code);

};

if(navigator.getUserMedia) {

navigator.getUserMedia(videoObj, function(stream) {

video.src = stream;

video.play();

}, errBack);

} else if(navigator.webkitGetUserMedia) {

navigator.webkitGetUserMedia(videoObj, function(stream){

video.src = window.webkitURL.createObjectURL(stream);

video.play();

}, errBack);

}

else if(navigator.mozGetUserMedia) {

navigator.mozGetUserMedia(videoObj, function(stream){

video.src = window.URL.createObjectURL(stream);

video.play();

}, errBack);

}

}, false);

//contagem regressiva

var i = 10;

function contagem(){

if((i-1) >= 0){

document.getElementById('snap').innerHTML=i;

i=i-1;

}else{

document.getElementById('snap').innerHTML="Pronto";

return this;

}

setInterval("contagem()", 1000);

};

//captura da imagem

document.getElementById("snap").addEventListener("click",function(){

var aux=contagem();

canvas.getContext("2d").drawImage(video, 0, 0, 800, 600);

context.restore();

});

document.getElementById("save").addEventListener("click", function() {

$.post('fotossalvar.php', {imagem:canvas.toDataURL()}, function(data){

},'json');

});

 

[Maykel-ctba 233]

To boiando...

 

#captura = Elemento com ID "captura"?

 

Outra coisa, poste os códigos dentro da tag de código. É uma tortura ler o código assim.

[DanRibeiro 0]

Ok, vou procurando ser mais claro. Quando clico no botão de id="snap" a imagem é capturada, quero que o usuário clique no botão e primeiro aconteça a contagem regressiva para depois capturar a imagem e mostrar ela na tela, segue o código como o Maykel-ctba pediu. grato

<div id="content">
 
    <div> <video id="video" width="640" height="480" autoplay></video></div>
    <div> <canvas id="canvas" width="640" height="480"></canvas></div> 
    <div> <button id="snap">Tirar Foto</button></div>
    <div> <button id="save">Enviar Foto</button></div>
    <div> <button id="cancel">Cancelar</button></div>
 
</div><!-- -->
 
 
<script type="text/javascript">
 
     window.addEventListener("DOMContentLoaded", function() {
        var canvas = document.getElementById("canvas"),
        context = canvas.getContext("2d"),
        video = document.getElementById("video"),
        videoObj = { "video": true },
        
        errBack = function(error) {
                console.log("Video capture error: ", error.code); 
        };  
 
        if(navigator.getUserMedia) {
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) {
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
        else if(navigator.mozGetUserMedia) {
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }
    }, false);
 
 
    //contagem regressiva
    var i = 10;
    function contagem(){
    if((i-1) >= 0){
        document.getElementById('snap').innerHTML=i;
        i=i-1;
        }else{
        document.getElementById('snap').innerHTML="Pronto";
        return this;
        }
        setInterval("contagem()", 1000);
    };
 
    //captura da imagem
    document.getElementById("snap").addEventListener("click",function(){
                var aux=contagem();
                canvas.getContext("2d").drawImage(video, 0, 0, 800, 600);
                context.restore();
   
        });
 
    document.getElementById("save").addEventListener("click", function() {      
        $.post('fotossalvar.php', {imagem:canvas.toDataURL()}, function(data){
        },'json');
    });