meanwhile i created a working example i want to share to the question:
// Zugriff auf die Kamera und das Mikrofon anfordern
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then((stream) => {
const videoElement = document.querySelector("#liveVideo");
const playbackVideoElement = document.querySelector("#playbackVideo");
const startRecordingButton = document.querySelector("#startRecording");
const stopRecordingButton = document.querySelector("#stopRecording");
const playRecordingButton = document.querySelector("#playRecording");
let mediaRecorder;
let recordedChunks = [];
const maxBufferDuration = 2 * 60 * 1000; // 2 Minuten in Millisekunden
let chunkStartTimes = []; // Zeitstempel für die Chunks
// Live-Stream im Video-Element anzeigen
videoElement.srcObject = stream;
// Aufnahme starten
startRecordingButton.addEventListener("click", () => {
recordedChunks = []; // Zurücksetzen des Puffers
chunkStartTimes = []; // Zurücksetzen der Zeitstempel
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
const now = Date.now();
recordedChunks.push(event.data); // Chunk speichern
chunkStartTimes.push(now); // Zeitstempel speichern
// Puffer auf 2 Minuten begrenzen
while (chunkStartTimes.length > 0 && now - chunkStartTimes[0] > maxBufferDuration) {
recordedChunks.shift(); // Ältesten Chunk entfernen
chunkStartTimes.shift(); // Zeitstempel des ältesten Chunks entfernen
}
}
};
mediaRecorder.start(1000); // Daten alle 1000 ms erzeugen
console.log("Aufnahme gestartet");
});
// Aufnahme stoppen
stopRecordingButton.addEventListener("click", () => {
if (mediaRecorder && mediaRecorder.state !== "inactive") {
mediaRecorder.stop();
console.log("Aufnahme gestoppt");
}
});
// Aufgenommene Daten abspielen
playRecordingButton.addEventListener("click", () => {
if (recordedChunks.length > 0) {
const blob = new Blob(recordedChunks, { type: "video/webm" });
const url = URL.createObjectURL(blob);
playbackVideoElement.src = url;
playbackVideoElement.play();
console.log("Aufnahme wird abgespielt");
} else {
console.log("Keine Aufnahme zum Abspielen verfügbar");
}
});
})
.catch((error) => {
console.error("Fehler beim Zugriff auf die Kamera/Mikrofon:", error);
});