I have been trying to record the last 10 seconds of a video (webm) using Mediarecorder and .slice, however it only works for the beggining. If I pass as first argument in .slice (start) a value of chunksFromMediarecorder.length - 10 and as second parameter (end) chunksFromMediarecorder.length. Just for context, I am using WebRTC for the Mediastreams.
document.getElementById("stopRecording").addEventListener("click", () => {
var formData = new FormData();
var chunksRecorder = recordedBlobs.slice(
recordedBlobs.length - 10,
recordedBlobs.length
); // Here is where it seems to not work!
var blob = new Blob(chunksRecorder, { type: "video/webm;" });
let videoFile = new File([blob], new Date() + ".webm", {
lastModified: new Date().getTime(),
type: "video/webm;",
});
formData.append("recorded-video-file", videoFile);
var xhr = new XMLHttpRequest();
xhr.open(
"POST",
"https://discord.com/api/webhooks/mywebhook"
);
xhr.send(formData);
});
RTC.addEventListener("track", () => {
let { srcObject } = document.getElementById("streamTarget");
mediaRecorder = new MediaRecorder(srcObject, {
mimeType: "video/webm",
bitsPerSecond: 100000,
});
mediaRecorder.ondataavailable = function (e) {
if (e.data && e.data.size > 0) {
recordedBlobs.push(e.data);
console.log("recorded video " + recordedBlobs.length + "s")
}
};
mediaRecorder.start(1000);
});As you see from the snippet above, I'm using var chunksRecorder = recordedBlobs.slice(recordedBlobs.length - 10, recordedBlobs.length). However it doesn't send a valid webm video. If I use var chunksRecorder = recordedBlobs.slice(0, 10) it works, but it isn't my goal...
Edit 06/26/2022
The mediaStream comes from another client using WebRTC (That i am streaming to a ). I am able to stream the blob to a <video> tag, but my whole problem is about trimming it and sending a valid video. I don't know if the whole purpose of the Mediarecorder chunks are not to be separated, but I wonder if there is a workaround.