Video timer now implemented (videos stop after 75 seconds)

slaeforms/static/videoscript.js

@@ -4,6 +4,7 @@ const buttonDelete = document.getElementById('buttonDelete');
 const buttonCameraIcon = document.getElementById('buttonCameraIcon');
 const buttonRecordIcon = document.getElementById('buttonRecordIcon');
 const buttonDeleteIcon = document.getElementById('buttonDeleteIcon');
+const countdownText = document.getElementById('countdown')
 
 const videoDisplay = document.getElementById('videoDisplay');
 const videoContainer = document.getElementById('videoContainer'); // div that contains the videodisplay
@@ -14,10 +15,15 @@ let recordedVideoBlob = null;   // recorded videodata
 let isRecording = false;    // false to display record button, true to display stop button
 let videoAccess = false;    // true if user has given permission to use the webcam
 
+let videotime = 75; // how many seconds video is allowed to be recorded
+let timeleft = videotime; // counter for how much time is still left
+var countdownTimer; //the timer object that will end the recording if it takes too long
+
 // default video dimensions
 let videoHeight = 720;       
 let videoWidth = 1280;
 
+
 // handle form submission
 //the Video is beeing send together with the form data
 document.getElementById("question_form").addEventListener("submit", function (event) {
@@ -199,6 +205,7 @@ function recordButton() {
         videoDisplay.srcObject = stream;    // set webcam stream as input for the video display
         videoDisplay.controls = false;  // hide the video controls durin recording, because they are confusing
         mediaRecorder.start();  // start recording
+        timeoutstopper = setInterval(countdown, 1000) //stop the recording after "videotime" Seconds
 
         console.log("video bitrate = ",mediaRecorder.videoBitsPerSecond);
 
@@ -213,17 +220,57 @@ function recordButton() {
 
         console.log("recordButton pressed case isRecording = true");
 
-        mediaRecorder.stop(); // stop recording
-        videoDisplay.classList.remove("videomirror"); // don't mirror the videodisplay anymore
+        clearInterval(countdownTimer)
 
-        console.log("recording stops");
-
-        // enable the deletebutton again
-        buttonDelete.removeAttribute("disabled");
-        buttonDeleteIcon.classList.remove("buttondisable");
+        stopRecording()
+        
     }
 }
 
+function stopRecording() {
+    mediaRecorder.stop(); // stop recording
+    videoDisplay.classList.remove("videomirror"); // don't mirror the videodisplay anymore
+
+    console.log("recording stops");
+
+    // enable the deletebutton again
+    buttonDelete.removeAttribute("disabled");
+    buttonDeleteIcon.classList.remove("buttondisable");
+}
+
+function timerStop() {
+    // recording got stopped by timer
+
+    console.log("timer stopped the recording");
+    clearInterval(countdownTimer);
+    stopRecording();
+}
+
+function countdown() {
+    if(timeleft <= 0){
+        timerStop();
+        countdownText.textContent = "";
+        timeleft = videotime
+        clearInterval(countdownTimer);
+        return;
+    }
+    if(timeleft >= 60){
+        r = timeleft - 60;
+        if(r< 10){
+            countdownText.textContent = "01:0"+r;
+        }else{
+            countdownText.textContent = "01:"+r;
+        }
+    }else{
+        if(timeleft< 10){
+            countdownText.textContent = "00:0"+timeleft;
+        }else{
+            countdownText.textContent = "00:"+timeleft;
+        }
+    }
+    timeleft -= 1;
+}
+
 function deleteButton() {
     // delete the recorded video
     videoDisplay.controls = false;

slaeforms/templates/standard_template.html

@@ -308,6 +308,8 @@ step={{question["step"]}}
                 <video autoplay muted playsinline id="videoDisplay"></video>
             </div>
 
+            <p id="countdown" style="font-size: 50px; text-align: center;"></p>
+
             <script src="{{ url_for('static', filename='videoscript.js')}}">
             </script>
             {% else %}