CSS for Videopage fixed!

slaeforms/static/styles.css

@@ -58,6 +58,10 @@ video {
     width: auto;
     height: auto;
 }
+.aspect-ratio-16-9 {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+  }
 
 .videocontrols {
     width: 100px; /* Set a specific width for the buttons */

slaeforms/static/videoscript.js

@@ -1,18 +1,18 @@
-
 const buttonCamera = document.getElementById('buttonCamera');
 const buttonRecord = document.getElementById('buttonRecord');
 const buttonDelete = document.getElementById('buttonDelete');
 const videoDisplay = document.getElementById('videoDisplay');
 const buttonCameraIcon = document.getElementById('buttonCameraIcon');
 const buttonRecordIcon = document.getElementById('buttonRecordIcon');
-//const buttonDeleteIcon = document.getElementById('buttonDeleteIcon');
+const buttonDeleteIcon = document.getElementById('buttonDeleteIcon');
+const videoContainer = document.getElementById('videoContainer');
 var mediaRecorder = null;
 var stream = null;
 let recordedVideoBlob = null;
 let isRecording = false;
 let videoAccess = false;
 
-//handle form submission:
+// Handle form submission
 document.getElementById("question_form").addEventListener("submit", function (event) {
     event.preventDefault(); // Prevent the default form submission
 
@@ -20,7 +20,9 @@ document.getElementById("question_form").addEventListener("submit", function (ev
     const formData = new FormData(event.target);
 
     // Append the recorded video Blob to the FormData object
-    formData.append("recordedVideo", recordedVideoBlob, "recordedVideo.webm");
+    if (recordedVideoBlob) {
+        formData.append("recordedVideo", recordedVideoBlob, "recordedVideo.webm");
+    }
 
     // Use fetch to send the form data and video to the backend
     console.log("try to send the form and video");
@@ -28,64 +30,66 @@ document.getElementById("question_form").addEventListener("submit", function (ev
         method: "POST",
         body: formData
     })
-        .then(response => response.json())
+    .then(response => response.json())
-        .then(data => {
+    .then(data => {
-            console.log('Success:', data);
+        console.log('Success:', data);
-            // Handle success response
+        // Handle success response
-        })
+    })
-        .catch(error => {
+    .catch(error => {
-            console.error('Error:', error);
+        console.error('Error:', error);
-            // Handle error response
+        // Handle error response
-        });
+    });
 });
 
 async function cameraButton() {
-    if (!videoAccess) { //test what happens if user doesnt give the permission
+    if (!videoAccess) {
         console.log("cameraButton case videoAccess = false");
-        // maybe a try catch block?
         try {
             stream = await navigator.mediaDevices.getUserMedia({
                 video: true,
             });
         } catch (error) {
-            //TODO when this occurs the user should get a hint to reload the page or to allow it next to the url
-            newerror = error
             console.log("Error: ", error);
-            return
+            return;
         }
         console.log("stream is active");
-        videoAccess = true
+        videoAccess = true;
 
-        videoDisplay.srcObject = stream
+        videoDisplay.srcObject = stream;
 
-        buttonCameraIcon.src = ICON_PATHS.cameraofficon; //todo, not sure if this works
+        buttonCameraIcon.src = ICON_PATHS.cameraofficon;
         buttonCameraIcon.alt = "Camera-off Icon";
         buttonRecord.style.display = 'inline-block';
         buttonDelete.style.display = 'inline-block';
         videoDisplay.style.display = 'inline-block';
+        videoContainer.style.display = 'inline-block';
 
         mediaRecorder = new MediaRecorder(stream, {
-            mimeType: "video/webm", //could use other video format: https://www.iana.org/assignments/media-types/media-types.xhtml#video
+            mimeType: "video/webm",
-            // I probably want to change the bitrate: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
         });
 
+        // Handle data available event
+        mediaRecorder.addEventListener("dataavailable", (event) => {
+            recordedVideoBlob = event.data;
+            console.log("Data available:", recordedVideoBlob);
+        });
     } else {
         console.log("cameraButton case videoAccess = true");
 
+        stream.getTracks().forEach(track => track.stop()); // Stop all tracks to release the camera
         stream = null;
-        videoAccess = false
+        videoAccess = false;
 
-        buttonCameraIcon.src = ICON_PATHS.cameraicon; //todo, not sure if this works
+        buttonCameraIcon.src = ICON_PATHS.cameraicon;
         buttonCameraIcon.alt = "Camera Icon";
         buttonRecord.style.display = 'none';
         buttonDelete.style.display = 'none';
         videoDisplay.style.display = 'none';
+        videoContainer.style.display = 'none';
     }
     console.log("camera button function ends");
 }
 
-
-
 function recordButton() {
     console.log("recordButton pressed");
     if (!isRecording) {
@@ -101,32 +105,34 @@ function recordButton() {
         buttonRecordIcon.alt = 'record icon';
         isRecording = true;
         console.log('Recording started');
-
     } else {
         console.log("recordButton pressed case isRecording = true");
         mediaRecorder.stop();
 
-        console.log("recording stops, now change source");
+        mediaRecorder.addEventListener("stop", () => {
-        videoDisplay.srcObject = null;
+            console.log("recording stops, now change source");
-        videoDisplay.src = URL.createObjectURL(mediaRecorder.data);
+            // videoDisplay.srcObject = null;
-        recordedVideoBlob = mediaRecorder.data;
+            if (recordedVideoBlob) {
+                videoDisplay.src = URL.createObjectURL(recordedVideoBlob);
+                videoDisplay.controls = true;
+                videoDisplay.pause();
+            }
+            
+            buttonRecordIcon.src = ICON_PATHS.recordicon;
+            buttonRecordIcon.alt = 'Stop Icon';
+            isRecording = false;
+            console.log('Recording stopped');
 
-        buttonRecordIcon.src = ICON_PATHS.recordicon;
+            buttonDelete.removeAttribute("disabled");
-        buttonRecordIcon.alt = 'Stop Icon';
+            buttonDeleteIcon.classList.remove("buttondisable");
-        isRecording = false;
+        });
-        console.log('Recording stopped');
-
-        buttonDelete.removeAttribute("disabled");
-        buttonDeleteIcon.classList.remove("buttondisable");
     }
 }
+
 function deleteButton() {
-    //todo delete data
+    // TODO delete data
     videoDisplay.srcObject = stream;
-    videoDisplay.src = null;
+    recordedVideoBlob = null
     buttonDelete.setAttribute("disabled", "");
-    buttonDeleteIcon.classList.add("buttondisable");
+    //buttonDeleteIcon.classList.add("buttondisable");
 }
-
-
-  

slaeforms/templates/standard_template.html

@@ -106,7 +106,7 @@ required
 
             </div>
             <div class="spacer" aria-hidden="true" style="height:15px"></div>
-            <div class="centertext">
+            <div id="videoContainer" class="centertext, aspect-ratio-16-9" style="display:none">
                 <video autoplay muted playsinline id="videoDisplay"></video>
             </div>