• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

chrisj

Coder
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.


HTML:
<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>

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

Top