Merge pull request 'update für Feedback' (#4) from working into main

Reviewed-on: #4

slaeforms/app.py

@@ -33,7 +33,7 @@ app = Flask(__name__)
 # configure the database, give it a path (it will be in the instances folder)
 app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db"
 app.config["PERMANENT_SESSION_LIFETIME"] = 10800 #3 Stunden, 10800 sekunden
-app.config['MAX_CONTENT_LENGTH'] = 16 * 1000 * 1000 # try and fix video upload not working
+app.config['MAX_CONTENT_LENGTH'] = 22 * 1000 * 1000 # try and fix video upload not working
 db.init_app(app)
 
 #set the secret key (TODO change this for final deployment)

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 = 70; // 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) {
@@ -123,8 +129,9 @@ async function cameraButton() {
 
         // initialize MediaRecorder, give it the webcam stream as input to record
         mediaRecorder = new MediaRecorder(stream, {
-            mimeType: "video/webm", // could use different video format
+            mimeType: "video/webm",
-            // videoBitsPerSecond: 5000000, // Standard bitrate for video is 2,5 mbps
+            audioBitsPerSecond: 0,
+            videoBitsPerSecond: 1900000, // Standard bitrate for video is 2,5 mbps
         });
 
         // when data is available at the mediaRecorder (this means the recording has ended, since I have not specified time intervalls)
@@ -198,6 +205,9 @@ 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
+        timeleft = videotime;
+        countdownTimer = setInterval(countdown, 1000) //stop the recording after "videotime" Seconds
+        
 
         console.log("video bitrate = ",mediaRecorder.videoBitsPerSecond);
 
@@ -212,17 +222,56 @@ function recordButton() {
 
         console.log("recordButton pressed case isRecording = true");
 
-        mediaRecorder.stop(); // stop recording
+        clearInterval(countdownTimer)
-        videoDisplay.classList.remove("videomirror"); // don't mirror the videodisplay anymore
 
-        console.log("recording stops");
+        stopRecording()
-
+        
-        // enable the deletebutton again
-        buttonDelete.removeAttribute("disabled");
-        buttonDeleteIcon.classList.remove("buttondisable");
     }
 }
 
+function stopRecording() {
+    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");
+}
+
+function timerStop() {
+    // recording got stopped by timer
+
+    console.log("timer stopped the recording");
+    clearInterval(countdownTimer);
+    stopRecording();
+}
+
+function countdown() {
+    if(timeleft <= 0){
+        countdownText.textContent = "";
+        timerStop();
+        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/p1infos.html

@@ -3,5 +3,6 @@
     <p>Im Folgenden werden ihnen Videos gezeigt, die sie in den Kategorien „Natürlichkeit“, „Verständlichkeit“ und „grammatikalischer Korrektheit“ bewerten sollen.</p>
     <p>Dafür können sie auf einer Skala mit 7 Punkten bewerten, wobei der Punkt ganz links für „sehr schlecht“, der Punkt in der Mitte für „neutral“, und der Punkt ganz rechts für „sehr schlecht“ steht.</p>
     <p>Dann können sie weiteres Feedback als Text oder als Video geben. Das Video können sie direkt im Browser aufnehmen. Beachten sie, dass sie dazu eine Webcam benötigen und der Webseite erlauben müssen diese zu benutzen. Wenn sie auf den Kamera Knopf drücken, wird ihr Browser sie nach der Berechtigung fragen.</p>
+    <p>Wenn sie Feedback per Video geben, kann es je nach dem wie schnell ihre Internetverbindung ist, einige Sekunden dauern die nächste Seite aufzurufen, weil das Video erst hochgeladen werden muss.</p>
     <p>Genaue Informationen darüber wie wir die Videos verarbeiten finden sie in unserer <a target="_blank" href="{{ url_for('datenschutz') }}">Datenschutzerklärung</a>.</p>
 </div>

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: 40px; text-align: center;"></p>
+
             <script src="{{ url_for('static', filename='videoscript.js')}}">
             </script>
             {% else %}

slaeforms/userstudy1.json

@@ -435,7 +435,7 @@
             },
             "question5": {
                 "type": "videoinput",
-                "text": "Hier können sie per Video Feedback geben",
+                "text": "Hier können sie per Video Feedback geben (max. 70 Sekunden)",
                 "name": "video_feedback",
                 "required": "false"
             }
@@ -616,7 +616,7 @@
             },
             "question6": {
                 "type": "videoinput",
-                "text": "Hier können sie per Video Feedback geben",
+                "text": "Hier können sie per Video Feedback geben (max. 70 Sekunden)",
                 "name": "video_feedback",
                 "required": "false"
             }
@@ -808,7 +808,7 @@
             },
             "question6": {
                 "type": "videoinput",
-                "text": "Hier können sie per Video Feedback geben",
+                "text": "Hier können sie per Video Feedback geben (max. 70 Sekunden)",
                 "name": "video_feedback",
                 "required": "false"
             }