Captura de Imagem após contagem regressiva

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');
 });