How to record webcam in browser and store video on same page?

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!