142 lines
5.9 KiB
HTML
142 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<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')}}-->
|
|
<title>Testform</title>
|
|
<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<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>
|
|
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;
|
|
|
|
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 = "{{ url_for('static', filename='icons/camera-off-icon.png') }}"; //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 = "{{ url_for('static', filename='icons/camera-icon.png') }}"; //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");
|
|
}
|
|
|
|
mediaRecorder.addEventListener("dataavailable", (event) => {
|
|
videoRecorded.src = URL.createObjectURL(event.data);
|
|
recordedVideoBlob = event.data;
|
|
});
|
|
|
|
function recordButton() {
|
|
console.log("recordButton pressed");
|
|
if (!isRecording) {
|
|
console.log("recordButton pressed case isRecording = false");
|
|
deleteButton();
|
|
buttonDelete.setAttribute("disabled", "");
|
|
buttonDeleteIcon.classList.add("buttondisable");
|
|
|
|
mediaRecorder.start();
|
|
|
|
buttonRecordIcon.src = "{{ url_for('static', filename='icons/stop-icon.png') }}";
|
|
buttonRecordIcon.alt = 'record icon';
|
|
isRecording = true;
|
|
console.log('Recording started');
|
|
|
|
} else {
|
|
console.log("recordButton pressed case isRecording = true");
|
|
mediaRecorder.stop();
|
|
|
|
buttonRecordIcon.src = "{{ url_for('static', filename='icons/record-icon.png') }}";
|
|
buttonRecordIcon.alt = 'Stop Icon';
|
|
isRecording = false;
|
|
console.log('Recording stopped');
|
|
|
|
buttonDelete.removeAttribute("disabled");
|
|
buttonDeleteIcon.classList.remove("buttondisable");
|
|
}
|
|
}
|
|
function deleteButton() {
|
|
//todo delete data
|
|
|
|
buttonDelete.setAttribute("disabled", "");
|
|
buttonDeleteIcon.classList.add("buttondisable");
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |