在HTML5视频上显示预加载器

Question

我在javascript中声音不太好，我正在使用html5 getUserMedia（）api进行此任务。

到目前为止它的工作正常，因为我可以拍摄框架的快照并将其绘制在画布上。

我现在似乎无法解决的问题是，当点击捕获按钮时，在视频中心显示预加载器。我已经写了一个延迟功能，在拍摄图像之前会延迟2秒

我有一个功能快照

 function snapshot(){
 //this function is the one that draws the frame from video to the canvas

 }

 function preloader(){

  //i want the preloader gif image displaying for the 2 seconds on the video

  setTimeout(snapshot, 2000);

 }

然后我将我的事件监听器作为

 document.querySelector("#click").addEventListener('click',preloader);

我有gif文件（我的图像文件中的预加载器）