Saving after trying a solve for video recording not playing

slaeforms/app.py

@@ -11,6 +11,7 @@ import uuid
 from sqlalchemy.exc import SQLAlchemyError
 from sqlalchemy import inspect
 from sqlalchemy.orm import DeclarativeBase
+import os
 
 random_order = True
 # activate environment: cd C:\Users\Jan\Google Drive\Master Stuff\Code\SLAEForms Testing\.venv\Scripts\
@@ -33,7 +34,7 @@ db.init_app(app)
 #set the secret key (TODO change this for final deployment)
 app.secret_key = b"29fe9e8edd407c5491d4f1c05632d9fa33e26ed8734a3f5e080ebac3772a555a"
 
-
+UPLOAD_FOLDER = 'uploads'
 
 
 
@@ -317,9 +318,14 @@ def sendpage_json():
             return "There was a problem while adding the response to the Database"
     
     # handle possible Video that was send
+    formatted_date = date.strftime("%Y.%m.%d %H-%M-%S")
+    print("date: ", date)
     video = request.files['recordedVideo']
-    #video_name = './uploads/' + str(date) + "_" + str(session_user_id)
+    video_name =  str(session_user_id) + "_" + session["current_block_name"] + "_" + session["current_stimulus_name"] + "_" + str(formatted_date) + ".webm"
-    video.save(f'./uploads/{video.filename}')
+    path = os.path.join(UPLOAD_FOLDER, video_name)
+    print("path: ",path)
+    os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+    video.save(path)
 
 
     # Now move to the next stimulus or block

slaeforms/static/videoscript.js

@@ -30,16 +30,28 @@ 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 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) {
@@ -68,11 +80,26 @@ async function cameraButton() {
             mimeType: "video/webm",
         });
 
-        // Handle data available event
         mediaRecorder.addEventListener("dataavailable", (event) => {
-            recordedVideoBlob = event.data;
+            console.log("Data available Event triggered")
-            console.log("Data available:", recordedVideoBlob);
+            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");
+            }
+        
         });
+        
     } else {
         console.log("cameraButton case videoAccess = true");
 
@@ -109,23 +136,13 @@ function recordButton() {
         console.log("recordButton pressed case isRecording = true");
         mediaRecorder.stop();
 
-        mediaRecorder.addEventListener("stop", () => {
+        console.log("recording stops");
-            console.log("recording stops, now change source");
+        // videoDisplay.srcObject = null;
-            // videoDisplay.srcObject = null;
+        
-            if (recordedVideoBlob) {
+
-                videoDisplay.src = URL.createObjectURL(recordedVideoBlob);
+        buttonDelete.removeAttribute("disabled");
-                videoDisplay.controls = true;
+        buttonDeleteIcon.classList.remove("buttondisable");
-                videoDisplay.pause();
-            }
-            
-            buttonRecordIcon.src = ICON_PATHS.recordicon;
-            buttonRecordIcon.alt = 'Stop Icon';
-            isRecording = false;
-            console.log('Recording stopped');
 
-            buttonDelete.removeAttribute("disabled");
-            buttonDeleteIcon.classList.remove("buttondisable");
-        });
     }
 }