trying to fix video record, save before bigger changes

slaeforms/app.py

@@ -229,7 +229,7 @@ def teststartpage():
 def jsonform():
     #user is not yet registered and should not be here
     if not "slaeform_user_id" in session:
-        return redirect(url_for(teststartpage)) #TODO replace this later with actual startpage
+        return redirect("/teststart") #TODO replace this later with actual startpage
     
 
     current_block = config[session["current_block_name"]]
@@ -316,6 +316,12 @@ def sendpage_json():
             print("Error occurred: {e}".format(e=str(e)))
             return "There was a problem while adding the response to the Database"
     
+    # handle possible Video that was send
+    video = request.files['recordedVideo']
+    #video_name = './uploads/' + str(date) + "_" + str(session_user_id)
+    video.save(f'./uploads/{video.filename}')
+
+
     # Now move to the next stimulus or block
     update_session()
 

slaeforms/default.json

@@ -48,7 +48,12 @@
                 "name": "text_feedback",
                 "required": "false",
                 "size": "250"
-            } 
+            },
+            "question3":{
+                "type": "videoinput",
+                "name": "video_feedback",
+                "required": "false"
+            }
         },
         "database_table" :{
             "table_name": "default_block3_test",

slaeforms/static/styles.css

@@ -1,6 +1,6 @@
 body {
     width: 100%;
-    height: 100vh;
+    height: 100%;
     margin: 0;
     display: flex;
     justify-content: center;
@@ -52,6 +52,13 @@ body {
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
+video {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+}
+
 .videocontrols {
     width: 100px; /* Set a specific width for the buttons */
     height: 70px; /* Set a specific height for the buttons */

slaeforms/static/videoscript.js

@@ -0,0 +1,132 @@
+
+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');
+var mediaRecorder = null;
+var stream = null;
+let recordedVideoBlob = null;
+let isRecording = false;
+let videoAccess = false;
+
+//handle form submission:
+document.getElementById("question_form").addEventListener("submit", function (event) {
+    event.preventDefault(); // Prevent the default form submission
+
+    // Create a FormData object
+    const formData = new FormData(event.target);
+
+    // Append the recorded video Blob to the FormData object
+    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");
+    fetch("/send_json", {
+        method: "POST",
+        body: formData
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Success:', data);
+            // Handle success response
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            // Handle error response
+        });
+});
+
+async function cameraButton() {
+    if (!videoAccess) { //test what happens if user doesnt give the permission
+        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
+        }
+        console.log("stream is active");
+        videoAccess = true
+
+        videoDisplay.srcObject = stream
+
+        buttonCameraIcon.src = ICON_PATHS.cameraofficon; //todo, not sure if this works
+        buttonCameraIcon.alt = "Camera-off Icon";
+        buttonRecord.style.display = 'inline-block';
+        buttonDelete.style.display = 'inline-block';
+        videoDisplay.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
+            // I probably want to change the bitrate: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
+        });
+
+    } else {
+        console.log("cameraButton case videoAccess = true");
+
+        stream = null;
+        videoAccess = false
+
+        buttonCameraIcon.src = ICON_PATHS.cameraicon; //todo, not sure if this works
+        buttonCameraIcon.alt = "Camera Icon";
+        buttonRecord.style.display = 'none';
+        buttonDelete.style.display = 'none';
+        videoDisplay.style.display = 'none';
+    }
+    console.log("camera button function ends");
+}
+
+
+
+function recordButton() {
+    console.log("recordButton pressed");
+    if (!isRecording) {
+        console.log("recordButton pressed case isRecording = false");
+        deleteButton();
+        buttonDelete.setAttribute("disabled", "");
+        buttonDeleteIcon.classList.add("buttondisable");
+        videoDisplay.srcObject = stream;
+        videoDisplay.src = null;
+        mediaRecorder.start();
+
+        buttonRecordIcon.src = ICON_PATHS.stopicon;
+        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");
+        videoDisplay.srcObject = null;
+        videoDisplay.src = URL.createObjectURL(mediaRecorder.data);
+        recordedVideoBlob = mediaRecorder.data;
+
+        buttonRecordIcon.src = ICON_PATHS.recordicon;
+        buttonRecordIcon.alt = 'Stop Icon';
+        isRecording = false;
+        console.log('Recording stopped');
+
+        buttonDelete.removeAttribute("disabled");
+        buttonDeleteIcon.classList.remove("buttondisable");
+    }
+}
+function deleteButton() {
+    //todo delete data
+    videoDisplay.srcObject = stream;
+    videoDisplay.src = null;
+    buttonDelete.setAttribute("disabled", "");
+    buttonDeleteIcon.classList.add("buttondisable");
+}
+
+
+  

slaeforms/templates/all_links.html

@@ -10,6 +10,7 @@
 </head>
 
 <body>
+    <div class="container">
     <h2>All available pages</h2>
     <ul>
         <p>--------------------------------------------</p>
@@ -24,6 +25,7 @@
         <p>--------------------------------------------</p>
         {% endfor %}
         </ul>
+    </div>
 </body>
 
 </html>

slaeforms/templates/myvideotemplate.html

@@ -10,6 +10,7 @@
 </head>
 
 <body>
+    <div class="container">
     <h2>Gib Feedback als Video</h2>
     <div class="centertext">
 
@@ -34,7 +35,7 @@
     </div>
     <div class="spacer" aria-hidden="true" style="height:15px"></div>
     <div class="centertext">
-        <video autoplay muted playsinline width="1280" height="720" id="videoDisplay"></video>
+        <video autoplay muted playsinline id="videoDisplay"></video>
     </div>
     <script>
         const buttonCamera = document.getElementById('buttonCamera');
@@ -135,7 +136,7 @@
             buttonDeleteIcon.classList.add("buttondisable");
         }
     </script>
-
+</div>
 </body>
 
 </html>

slaeforms/templates/standard_template.html

@@ -8,10 +8,10 @@
     <h3>{{title}}</h3>
     {% endif %}
     <div class="video-container">
-    <iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player"
+        <iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player"
-        frameborder="0"
+            frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowfullscreen></iframe>
+            allowfullscreen></iframe>
     </div>
 </div>
 {% else %}
@@ -32,9 +32,16 @@ required
 
 <head>
     <meta charset="utf-8" />
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}" />
+    <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
     <title>Testform</title>
     <link rel=" shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <script>const ICON_PATHS = {
+        cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}",
+        cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}",
+        stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}",
+        recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}"
+    };</script>
 </head>
 
 <body>
@@ -51,7 +58,7 @@ required
 
 
         <h2>Questions</h2>
-        <form action="http://localhost:5000/send_json" method="post">
+        <form id="question_form" action="http://localhost:5000/send_json" method="post">
             {% for question in questions %}
             {% if (questions[question]["type"] == "likert") %}
             <div class="likercontainer">
@@ -72,12 +79,47 @@ required
                     cols="60" maxlength="{{ questions[question]['size'] }}"
                     {{required(questions[question])}}></textarea>
             </div>
+            {% elif (questions[question]["type"] == "videoinput") %}
+            <h2>Gib Feedback als Video</h2>
+            <div class="centertext">
+
+                <button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
+                    <img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}"
+                        alt="Camera Icon">
+                </button>
+
+            </div>
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
+            <div class="centertext">
+
+                <button type="button" class="videocontrols" id="buttonRecord" style="display:none"
+                    onclick="recordButton()">
+                    <img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}"
+                        alt="Camera Icon">
+                </button>
+
+                <button type="button" class="videocontrols" id="buttonDelete" style="display:none" disabled
+                    onclick="deleteButton()">
+                    <img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}"
+                        alt="Delete Icon" class="buttondisable">
+                </button>
+
+            </div>
+            <div class="spacer" aria-hidden="true" style="height:15px"></div>
+            <div class="centertext">
+                <video autoplay muted playsinline id="videoDisplay"></video>
+            </div>
+            
+            <script src="{{ url_for('static', filename='videoscript.js')}}">
+                
+            </script>
             {% else %}
             <p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
             {% endif %}
             {% endfor %}
             <div class="button-container">
                 <p><input id="submitbutton" type="submit" value="submit" ; /></p>
+                <!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> -->
             </div>
         </form>
     </div>

slaeforms/templates/test_page0.html

@@ -9,10 +9,12 @@
 </head>
 
 <body>
+    <div class="container">
     <p>This is just a test page for the single page option of the json configuration, but without something to submit</p>
     <form action="http://localhost:5000/send_json" method="post">
     <input type="hidden" name="submittedString" value="Hello, backend!">
     <p><input id="submitbutton" type = "submit" value = "submit";/></p>
     </form>
+</div>
 </body>
 </html>

slaeforms/templates/test_page1.html

@@ -9,6 +9,7 @@
 </head>
 
 <body>
+    <div class="container">
     <p>This is just a test page for the single page option of the json configuration</p>
     <form action="http://localhost:5000/send_json" method="post">
         <input
@@ -19,5 +20,6 @@
       <label for="accepted">Akzeptieren sie die Datenschutzerklaerung</label>
     <p><input id="submitbutton" type = "submit" value = "submit";/></p>
     </form>
+</div>
 </body>
 </html>