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

CSS for Videopage fixed!

Browse Source
This commit is contained in:
Jan 2024-06-10 18:09:24 +02:00
parent 624ac2323b
commit 35f37fbd30
3 changed files with 56 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
slaeforms/static/styles.css
View File

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

60
slaeforms/static/videoscript.js
View File

@ -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
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");
@ -40,52 +42,54 @@ document.getElementById("question_form").addEventListener("submit", function (ev
});
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
// I probably want to change the bitrate: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/MediaRecorder
mimeType: "video/webm",
});
// 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,15 +105,18 @@ function recordButton() {
buttonRecordIcon.alt = 'record icon';
isRecording = true;
console.log('Recording started');
} else {
console.log("recordButton pressed case isRecording = true");
mediaRecorder.stop();
mediaRecorder.addEventListener("stop", () => {
console.log("recording stops, now change source");
videoDisplay.srcObject = null;
videoDisplay.src = URL.createObjectURL(mediaRecorder.data);
recordedVideoBlob = mediaRecorder.data;
// videoDisplay.srcObject = null;
if (recordedVideoBlob) {
videoDisplay.src = URL.createObjectURL(recordedVideoBlob);
videoDisplay.controls = true;
videoDisplay.pause();
}
buttonRecordIcon.src = ICON_PATHS.recordicon;
buttonRecordIcon.alt = 'Stop Icon';
@ -118,15 +125,14 @@ function recordButton() {
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");
}

2
slaeforms/templates/standard_template.html
View File

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