From 785b4c4ff5e59078ed424298f00ef40385daffb6 Mon Sep 17 00:00:00 2001 From: Jan Date: Thu, 19 Sep 2024 16:50:19 +0200 Subject: [PATCH 1/3] Some adjustments to video sizes, max record length is now 80sek --- slaeforms/app.py | 2 +- slaeforms/static/videoscript.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/slaeforms/app.py b/slaeforms/app.py index c332efc..4a77a04 100644 --- a/slaeforms/app.py +++ b/slaeforms/app.py @@ -33,7 +33,7 @@ app = Flask(__name__) # configure the database, give it a path (it will be in the instances folder) app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db" app.config["PERMANENT_SESSION_LIFETIME"] = 10800 #3 Stunden, 10800 sekunden -app.config['MAX_CONTENT_LENGTH'] = 16 * 1000 * 1000 # try and fix video upload not working +app.config['MAX_CONTENT_LENGTH'] = 20 * 1000 * 1000 # try and fix video upload not working db.init_app(app) #set the secret key (TODO change this for final deployment) diff --git a/slaeforms/static/videoscript.js b/slaeforms/static/videoscript.js index 8475395..5f54aee 100644 --- a/slaeforms/static/videoscript.js +++ b/slaeforms/static/videoscript.js @@ -123,8 +123,9 @@ async function cameraButton() { // initialize MediaRecorder, give it the webcam stream as input to record mediaRecorder = new MediaRecorder(stream, { - mimeType: "video/webm", // could use different video format - // videoBitsPerSecond: 5000000, // Standard bitrate for video is 2,5 mbps + mimeType: "video/webm", + audioBitsPerSecond: 0, + videoBitsPerSecond: 2000000, // Standard bitrate for video is 2,5 mbps }); // when data is available at the mediaRecorder (this means the recording has ended, since I have not specified time intervalls) From c4e312662c1b2e5338a3802a7a4fadc2d0f9f504 Mon Sep 17 00:00:00 2001 From: Jan Date: Sat, 21 Sep 2024 11:50:34 +0200 Subject: [PATCH 2/3] Video timer now implemented (videos stop after 75 seconds) --- slaeforms/static/videoscript.js | 61 +++++++++++++++++++--- slaeforms/templates/standard_template.html | 2 + 2 files changed, 56 insertions(+), 7 deletions(-) diff --git a/slaeforms/static/videoscript.js b/slaeforms/static/videoscript.js index 5f54aee..bc911f8 100644 --- a/slaeforms/static/videoscript.js +++ b/slaeforms/static/videoscript.js @@ -4,6 +4,7 @@ const buttonDelete = document.getElementById('buttonDelete'); const buttonCameraIcon = document.getElementById('buttonCameraIcon'); const buttonRecordIcon = document.getElementById('buttonRecordIcon'); const buttonDeleteIcon = document.getElementById('buttonDeleteIcon'); +const countdownText = document.getElementById('countdown') const videoDisplay = document.getElementById('videoDisplay'); const videoContainer = document.getElementById('videoContainer'); // div that contains the videodisplay @@ -14,10 +15,15 @@ let recordedVideoBlob = null; // recorded videodata let isRecording = false; // false to display record button, true to display stop button let videoAccess = false; // true if user has given permission to use the webcam +let videotime = 75; // how many seconds video is allowed to be recorded +let timeleft = videotime; // counter for how much time is still left +var countdownTimer; //the timer object that will end the recording if it takes too long + // default video dimensions let videoHeight = 720; let videoWidth = 1280; + // handle form submission //the Video is beeing send together with the form data document.getElementById("question_form").addEventListener("submit", function (event) { @@ -199,6 +205,7 @@ function recordButton() { videoDisplay.srcObject = stream; // set webcam stream as input for the video display videoDisplay.controls = false; // hide the video controls durin recording, because they are confusing mediaRecorder.start(); // start recording + timeoutstopper = setInterval(countdown, 1000) //stop the recording after "videotime" Seconds console.log("video bitrate = ",mediaRecorder.videoBitsPerSecond); @@ -213,17 +220,57 @@ function recordButton() { console.log("recordButton pressed case isRecording = true"); - mediaRecorder.stop(); // stop recording - videoDisplay.classList.remove("videomirror"); // don't mirror the videodisplay anymore + clearInterval(countdownTimer) - console.log("recording stops"); - - // enable the deletebutton again - buttonDelete.removeAttribute("disabled"); - buttonDeleteIcon.classList.remove("buttondisable"); + stopRecording() + } } +function stopRecording() { + mediaRecorder.stop(); // stop recording + videoDisplay.classList.remove("videomirror"); // don't mirror the videodisplay anymore + + console.log("recording stops"); + + // enable the deletebutton again + buttonDelete.removeAttribute("disabled"); + buttonDeleteIcon.classList.remove("buttondisable"); +} + +function timerStop() { + // recording got stopped by timer + + console.log("timer stopped the recording"); + clearInterval(countdownTimer); + stopRecording(); +} + +function countdown() { + if(timeleft <= 0){ + timerStop(); + countdownText.textContent = ""; + timeleft = videotime + clearInterval(countdownTimer); + return; + } + if(timeleft >= 60){ + r = timeleft - 60; + if(r< 10){ + countdownText.textContent = "01:0"+r; + }else{ + countdownText.textContent = "01:"+r; + } + }else{ + if(timeleft< 10){ + countdownText.textContent = "00:0"+timeleft; + }else{ + countdownText.textContent = "00:"+timeleft; + } + } + timeleft -= 1; +} + function deleteButton() { // delete the recorded video videoDisplay.controls = false; diff --git a/slaeforms/templates/standard_template.html b/slaeforms/templates/standard_template.html index d19537d..58527dd 100644 --- a/slaeforms/templates/standard_template.html +++ b/slaeforms/templates/standard_template.html @@ -308,6 +308,8 @@ step={{question["step"]}} +

+ {% else %} From 5eed494c1677ddd8ef7f59749bc272c1a9743a8e Mon Sep 17 00:00:00 2001 From: Jan Date: Mon, 23 Sep 2024 15:15:32 +0200 Subject: [PATCH 3/3] Some finetuning before feedback --- slaeforms/app.py | 2 +- slaeforms/static/videoscript.js | 13 +++++++------ slaeforms/templates/p1infos.html | 1 + slaeforms/templates/standard_template.html | 2 +- slaeforms/userstudy1.json | 6 +++--- 5 files changed, 13 insertions(+), 11 deletions(-) diff --git a/slaeforms/app.py b/slaeforms/app.py index 4a77a04..14aba46 100644 --- a/slaeforms/app.py +++ b/slaeforms/app.py @@ -33,7 +33,7 @@ app = Flask(__name__) # configure the database, give it a path (it will be in the instances folder) app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db" app.config["PERMANENT_SESSION_LIFETIME"] = 10800 #3 Stunden, 10800 sekunden -app.config['MAX_CONTENT_LENGTH'] = 20 * 1000 * 1000 # try and fix video upload not working +app.config['MAX_CONTENT_LENGTH'] = 22 * 1000 * 1000 # try and fix video upload not working db.init_app(app) #set the secret key (TODO change this for final deployment) diff --git a/slaeforms/static/videoscript.js b/slaeforms/static/videoscript.js index bc911f8..ebf178c 100644 --- a/slaeforms/static/videoscript.js +++ b/slaeforms/static/videoscript.js @@ -15,7 +15,7 @@ let recordedVideoBlob = null; // recorded videodata let isRecording = false; // false to display record button, true to display stop button let videoAccess = false; // true if user has given permission to use the webcam -let videotime = 75; // how many seconds video is allowed to be recorded +let videotime = 70; // how many seconds video is allowed to be recorded let timeleft = videotime; // counter for how much time is still left var countdownTimer; //the timer object that will end the recording if it takes too long @@ -131,7 +131,7 @@ async function cameraButton() { mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm", audioBitsPerSecond: 0, - videoBitsPerSecond: 2000000, // Standard bitrate for video is 2,5 mbps + videoBitsPerSecond: 1900000, // Standard bitrate for video is 2,5 mbps }); // when data is available at the mediaRecorder (this means the recording has ended, since I have not specified time intervalls) @@ -205,7 +205,9 @@ function recordButton() { videoDisplay.srcObject = stream; // set webcam stream as input for the video display videoDisplay.controls = false; // hide the video controls durin recording, because they are confusing mediaRecorder.start(); // start recording - timeoutstopper = setInterval(countdown, 1000) //stop the recording after "videotime" Seconds + timeleft = videotime; + countdownTimer = setInterval(countdown, 1000) //stop the recording after "videotime" Seconds + console.log("video bitrate = ",mediaRecorder.videoBitsPerSecond); @@ -230,7 +232,7 @@ function recordButton() { function stopRecording() { mediaRecorder.stop(); // stop recording videoDisplay.classList.remove("videomirror"); // don't mirror the videodisplay anymore - + clearInterval(countdownTimer); console.log("recording stops"); // enable the deletebutton again @@ -248,9 +250,8 @@ function timerStop() { function countdown() { if(timeleft <= 0){ - timerStop(); countdownText.textContent = ""; - timeleft = videotime + timerStop(); clearInterval(countdownTimer); return; } diff --git a/slaeforms/templates/p1infos.html b/slaeforms/templates/p1infos.html index 97577a3..9fb368e 100644 --- a/slaeforms/templates/p1infos.html +++ b/slaeforms/templates/p1infos.html @@ -3,5 +3,6 @@

Im Folgenden werden ihnen Videos gezeigt, die sie in den Kategorien „Natürlichkeit“, „Verständlichkeit“ und „grammatikalischer Korrektheit“ bewerten sollen.

Dafür können sie auf einer Skala mit 7 Punkten bewerten, wobei der Punkt ganz links für „sehr schlecht“, der Punkt in der Mitte für „neutral“, und der Punkt ganz rechts für „sehr schlecht“ steht.

Dann können sie weiteres Feedback als Text oder als Video geben. Das Video können sie direkt im Browser aufnehmen. Beachten sie, dass sie dazu eine Webcam benötigen und der Webseite erlauben müssen diese zu benutzen. Wenn sie auf den Kamera Knopf drücken, wird ihr Browser sie nach der Berechtigung fragen.

+

Wenn sie Feedback per Video geben, kann es je nach dem wie schnell ihre Internetverbindung ist, einige Sekunden dauern die nächste Seite aufzurufen, weil das Video erst hochgeladen werden muss.

Genaue Informationen darüber wie wir die Videos verarbeiten finden sie in unserer Datenschutzerklärung.

\ No newline at end of file diff --git a/slaeforms/templates/standard_template.html b/slaeforms/templates/standard_template.html index 58527dd..6f19498 100644 --- a/slaeforms/templates/standard_template.html +++ b/slaeforms/templates/standard_template.html @@ -308,7 +308,7 @@ step={{question["step"]}} -

+

diff --git a/slaeforms/userstudy1.json b/slaeforms/userstudy1.json index bbfbe6b..bd3d5ac 100644 --- a/slaeforms/userstudy1.json +++ b/slaeforms/userstudy1.json @@ -435,7 +435,7 @@ }, "question5": { "type": "videoinput", - "text": "Hier können sie per Video Feedback geben", + "text": "Hier können sie per Video Feedback geben (max. 70 Sekunden)", "name": "video_feedback", "required": "false" } @@ -616,7 +616,7 @@ }, "question6": { "type": "videoinput", - "text": "Hier können sie per Video Feedback geben", + "text": "Hier können sie per Video Feedback geben (max. 70 Sekunden)", "name": "video_feedback", "required": "false" } @@ -808,7 +808,7 @@ }, "question6": { "type": "videoinput", - "text": "Hier können sie per Video Feedback geben", + "text": "Hier können sie per Video Feedback geben (max. 70 Sekunden)", "name": "video_feedback", "required": "false" }