Not show the time/seconds until ‘record’ starts on html5 player

[Anonymous]

This code allows the page vistor to click a ‘display’ button to show the camera view on the page, but not start the video recording (they can select a seperate ‘record’ button to start recording). However, the timer/seconds start upon selecting ‘display’ the camera view. I’d like help with having the time/seconds not start until ‘record’ button is clicked. Any help/guidance is appreciated. Here’s the code:

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

let video = document.getElementById("video");
var displaying = false;
var recording = false;
async function display() {
  stream = await navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
  });
  video.srcObject = stream;
  displaying = true;
}
function startRecording() {
  if(displaying){
    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);
      }
    };
    mediaRecorder.onstop = doPreview;
    // Let's receive 1 second blobs
    mediaRecorder.start(1000);
    recording = true;
  }
}

function endRecording() {
  if(recording){
    // Let's stop capture and recording
    mediaRecorder.stop();
    stream.getTracks().forEach((track) => track.stop());
    recording = false;
  }
}

function doPreview() {
  if (!blobs.length) {
    return;
  }
  // Let's concatenate blobs to preview the recorded content
  blob = new Blob(blobs, { type: mediaRecorder.mimeType });
  video.srcObject = null;
  video.src = URL.createObjectURL(
    blob,
  );
}

 

[Anonymous]

The video player is simply the video element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
Here's the corresponding html:

<video id="video" autoplay controls muted playsInline></video>

<button id="display" onclick="display()">Camera View</button>
<button id="start" onclick="startRecording()">Start Recording</button>
<button id="stop" onclick="endRecording()">Stop Recording</button>

It was suggested that I need to remove the video controls from the video first and then add them back when the recording starts. But I don't know how to do that.

any help is appreciated.