JavaScript Help to start 'elapsed time' upon 'Record' in html5 player

[chrisj]

With this code the player's elapsed time starts upon selecting 'Display Camera View":

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

And the recording of the video doesn't start until 'Record Video' is selected.

But, I'd like the 'elapsed time' of the video player to start upon selecting 'Record Video' (not upon selecting "Display Camera View".
So, I've gotten as far as removing the controls altogether (see below).
But, I'm sure that isn't helping me with my goal of having the 'elapsed time' start upon selecting 'Record Video'.
Any help/suggestions are appreciated.

<button id="btn0" onclick="display()">Display Camera View</button>
<button id="btn1" onclick="startRecording()">Record Video</button>
<button id="btn2" onclick="endRecording()">Stop Recording</button>

//<video id="video" autoplay controls muted playsinline></video>
<video id="video" controlBar={false} autoplay muted playsinline></video>

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;
  }
}