Hello i am setting up a selfie "photobooth". Everything works like fine but i found a bug and dont't find a solution.
I'll explain the function:I have a webcam that shows live-video.If i push the "s"-key it takes a picture and freezes it to the screen for 15 seconds.Wile it is showing the frozen image i can push "s"-key again for stopping the freez and start again with the live-video.Otherwise it jumps back to live-video after 15 seconds.Till here everything works perfect.
Now my problem:If i push the "s"-key more often while the freezed image is showing. It clears the frozen image and shows my background-image giving my a error-box with this message: "Webcam.js Error: Webcam is not loaded yet"
How can this be solved?
Thanks for any help!
Here is my code:
<!doctype html><div id="foto"><div id="my_camera"></div><!-- <input type=button class=anybutton value="Take Snapshot" onClick="take_snapshot()"> --><!-- Webcam.min.js --><script type="text/javascript" src="webcamjs/webcam.min.js"></script><!-- Configure a few settings and attach camera --><script language="JavaScript"> let seconds = 15 // time to show image // Configure a few settings and attach camera let propwidth = 1600 // width of webcam window Webcam.set({ width: propwidth, height: (propwidth/16)*9, image_format: 'jpeg', jpeg_quality: 90 }); Webcam.attach( '#my_camera' ); // preload shutter audio clip //var shutter = new Audio(); //shutter.autoplay = true; //shutter.src = 'shutter.mp3'; //document.addEventListener('DOMContentLoaded', (event) => { document.addEventListener('keydown', function(event) { if (event.code == 'KeyS' ) { take_snapshot() } }); function take_snapshot() { // play sound effect // shutter.play(); // take snapshot and get image data Webcam.snap( function(data_uri) { document.getElementById('my_camera').innerHTML = '<img src="'+data_uri+'"/>'; show_snapshot(); }); } function show_snapshot(){ // display results in page document.addEventListener('keydown', function(event) { if (event.code == 'KeyS' ) { window.location.href = window.location.href; } }); var showTimer = setInterval(function(){ clearInterval(showTimer); window.location.href = window.location.href; }, seconds*1000); } //}) Webcam.attach( '#my_camera' );</script></div>