Jan/slaeforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

trying to fix video record, save before bigger changes

Browse Source
This commit is contained in:
Jan 2024-06-09 15:59:19 +02:00
parent 0a180eac6f
commit 624ac2323b
9 changed files with 210 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
slaeforms/app.py
View File

@ -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()

7
slaeforms/default.json
View File

@ -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",

9
slaeforms/static/styles.css
View File

@ -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 */

132
slaeforms/static/videoscript.js
View File

@ -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");
}

2
slaeforms/templates/all_links.html
View File

@ -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>

5
slaeforms/templates/myvideotemplate.html
View File

@ -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>

54
slaeforms/templates/standard_template.html
View File

@ -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"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
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>

2
slaeforms/templates/test_page0.html
View File

@ -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>

2
slaeforms/templates/test_page1.html
View File

@ -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>