Allow camera access - show camera view -- don’t start recording video

[chrisjchrisj]

This code below works successfully to capture/record/play video - after camera access permission is granted - when the start button is selected. I'm trying to add the functionality where (after camera access is allowed) the camera view appears, without recording starting automatically (And have the camera view displayed while recording).

Currently, the screen is black after camera access and while capture/recording. I was told that I need to "capture the stream from the video element and put it through the MediaRecorder object". I don't know how to do that. Any help is appreciated

 var video = document.querySelector("video");
let params = { audio: true, video: { facingMode: { exact: "environment" } } };

let blobs = [];
let stream, mediaRecorder, blob;

async function startRecording() {
stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: true,
});

mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
// Let's append blobs for now, we could also upload them to the network.
if (event.data) {
blobs.push(event.data);