Small fixes

slaeforms/static/videoscript.js

@@ -15,15 +15,21 @@ let videoAccess = false;
 // Handle form submission
 document.getElementById("question_form").addEventListener("submit", function (event) {
     event.preventDefault(); // Prevent the default form submission
-
+    console.log("submit button pressed");
     // Create a FormData object
     const formData = new FormData(event.target);
 
+    console.log("form data: ",formData);
+
     // Append the recorded video Blob to the FormData object
     if (recordedVideoBlob) {
+        console.log("video is available: ", recordedVideoBlob);
         formData.append("recordedVideo", recordedVideoBlob, "recordedVideo.webm");
     }
 
+    
+    console.log("Data to be submitted: ",formData);
+    
     // Use fetch to send the form data and video to the backend
     console.log("try to send the form and video");
     fetch("/send_json", {
@@ -40,18 +46,6 @@ document.getElementById("question_form").addEventListener("submit", function (ev
             // Handle error response
         });
 });
-async function main() {
-// Handle data available event
-mediaRecorder.addEventListener("dataavailable", (event) => {
-    console.log("Data available Event triggered")
-    if (event.data.size > 0) {
-        recordedVideoBlob = (event.data);
-        console.log("Data available:", recordedVideoBlob);
-    } else {
-        console.log("No Data available");
-    }
-
-});}
 
 async function cameraButton() {
     if (!videoAccess) {
@@ -77,27 +71,33 @@ async function cameraButton() {
         videoContainer.style.display = 'inline-block';
 
         mediaRecorder = new MediaRecorder(stream, {
-            mimeType: "video/webm",
+            mimeType: "video/webm", // could use different video format
+            // videoBitsPerSecond: 5000000, // Standard bitrate for video is 2,5 mbps
         });
 
         mediaRecorder.addEventListener("dataavailable", (event) => {
-            console.log("Data available Event triggered")
+            console.log("Data available Event triggered");
             if (event.data.size > 0) {
                 recordedVideoBlob = event.data;
-                videoDisplay.src = URL.createObjectURL(event.data);
-                videoDisplay.controls = true;
-                videoDisplay.pause();
                 console.log("Data available:", recordedVideoBlob);
-
-                buttonRecordIcon.src = ICON_PATHS.recordicon;
-                buttonRecordIcon.alt = 'Stop Icon';
-                isRecording = false;
-                console.log('Recording stopped');
-                console.log("Src path:", videoDisplay.src);
             } else {
                 console.log("No Data available");
             }
+        });
 
+        mediaRecorder.addEventListener("stop", () => {
+            if (recordedVideoBlob) {
+                videoDisplay.srcObject = null;
+                videoDisplay.src = URL.createObjectURL(recordedVideoBlob);
+                videoDisplay.controls = true;
+                videoDisplay.pause();
+
+                buttonRecordIcon.src = ICON_PATHS.recordicon;
+                buttonRecordIcon.alt = 'Record Icon';
+                isRecording = false;
+                console.log('Recording stopped');
+                console.log("Src path:", videoDisplay.src);
+            }
         });
 
     } else {
@@ -126,10 +126,12 @@ function recordButton() {
         buttonDeleteIcon.classList.add("buttondisable");
         videoDisplay.srcObject = stream;
         videoDisplay.src = null;
+        videoDisplay.controls = false;
         mediaRecorder.start();
+        console.log("video bitrate = ",mediaRecorder.videoBitsPerSecond);
 
         buttonRecordIcon.src = ICON_PATHS.stopicon;
-        buttonRecordIcon.alt = 'record icon';
+        buttonRecordIcon.alt = 'Stop Icon';
         isRecording = true;
         console.log('Recording started');
     } else {
@@ -137,19 +139,16 @@ function recordButton() {
         mediaRecorder.stop();
 
         console.log("recording stops");
-        // videoDisplay.srcObject = null;
-        
-
         buttonDelete.removeAttribute("disabled");
         buttonDeleteIcon.classList.remove("buttondisable");
-
     }
 }
 
 function deleteButton() {
     // TODO delete data
+    videoDisplay.controls = false;
     videoDisplay.srcObject = stream;
     recordedVideoBlob = null
     buttonDelete.setAttribute("disabled", "");
-    //buttonDeleteIcon.classList.add("buttondisable");
+    buttonDeleteIcon.classList.add("buttondisable");
 }