I have a simple program where a user records themselves (via their webcam) and that video is stored on the same HTML page. Can anyone let me know how I can go about adding to what I have below to record and save the video?
#HTML
<button id="speak_button"></button> #click to start video
<div id="circle"><p id="submit_button">Submit</p></div> #click to end video
<video" id="video" width="180" height="140" autoplay muted></video> #where webcam is
<video id="second_video" width="180" height="140" controls></video> #where I want recorded video to be
#JAVASCRIPT
<script>
let video = document.getElementById("video");
let mediaRecorder;
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function(stream){
video.srcObject = stream;
video.play();
mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm"});
mediaRecorder.ondatavailable = function(event) {
if (event.data.size > 0) {
const reader = new window.FileReader();
reader.readAsDataURL(event.data);
reader.onloadend = function() {
let base64 = reader.result.split('base64,')[1];
let recording = document.getElementById('second_video');
recording.src = "data:video/webm;base64," + base64;
recording.type = "video/webm";
recording.play();
};
};
};
});
document.getElementById("speak_button").addEventListener("click", function() {
mediaRecorder.start();
stream.record();
});
document.getElementById("submit_button").addEventListener("click", function() {
mediaRecorder.stop();
stream.stop();
var superBuffer = new Blob(recordedChunks);
document.getElementById("second_video") = window.URL.createObjectURL(superBuffer);
});
</script>
Thanks!
HTML CODE
<main id="container">
<video id="gum" playsinline autoplay muted></video>
<video id="recorded" playsinline loop></video>
<section>
<button id="start">Start camera</button>
<button id="record" disabled>Record</button>
<button id="play" disabled>Play</button>
</section>
</main>
<script src="main.js"></script>
main.js code
let mediaRecorder;
let recordedBlobs;
const errorMsgElement = document.querySelector("span#errorMsg");
const recordedVideo = document.querySelector("video#recorded");
const recordButton = document.querySelector("button#record");
const playButton = document.querySelector("button#play");
recordButton.addEventListener("click", () => {
if (recordButton.textContent === "Record") return startRecording();
stopRecording();
recordButton.textContent = "Record";
playButton.disabled = false;
});
playButton.addEventListener("click", () => {
const superBuffer = new Blob(recordedBlobs, { type: "video/webm" });
recordedVideo.src = null;
recordedVideo.srcObject = null;
recordedVideo.src = window.URL.createObjectURL(superBuffer);
recordedVideo.controls = true;
recordedVideo.play();
});
function handleDataAvailable(event) {
if (event.data && event.data.size > 0) recordedBlobs.push(event.data);
}
function startRecording() {
recordedBlobs = [];
let options = { mimeType: "video/webm;codecs=vp9,opus" };
try {
mediaRecorder = new MediaRecorder(window.stream, options);
} catch (e) {
console.error("Exception while creating MediaRecorder:", e);
errorMsgElement.innerHTML = `Exception while creating MediaRecorder: ${JSON.stringify(
e
)}`;
return;
}
recordButton.textContent = "Stop Recording";
playButton.disabled = true;
mediaRecorder.onstop = (event) => console.log(event);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
console.log("MediaRecorder started", mediaRecorder);
}
function stopRecording() {
mediaRecorder.stop();
}
document.querySelector("button#start").addEventListener("click", async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
});
recordButton.disabled = false;
window.stream = stream;
const gumVideo = document.querySelector("video#gum");
gumVideo.srcObject = stream;
} catch (e) {
console.error("navigator.getUserMedia error:", e);
errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
}
});