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

JavaScript
1

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,
  );
}
2

What benefit is there in having the time progress when not recording?

3

Thanks for your reply. Regarding ‘what benefit is there in having the time progress when not recording’, there is no benefit, it confuses the person recording the video, that’s why I’m asking how to have the time/seconds not start until ‘record’ button is clicked…

4

Good one. Can you please give us enough so that we can duplicate your current situation? HTML code to go with the JS would be really helpful.

5

Many thanks for your kind reply. I hope I didn’t sound disrespectful. I appreciate any help. Here’s the html:

<!DOCTYPE html>
<html id="html">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="title" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="../css/main.css">
<video id="video" autoplay controls muted playsInline></video>
<button id="display" onclick="display()">Display Camera</button>
<button id="start" onclick="startRecording()">Start Recording</button>
<button id="stop" onclick="endRecording()">Stop Recording</button>
<button id="uploadFile" onclick="uploadFile()">Upload Video</button>
</body>
</html>
6

I’ve put together a codePen to help people explore this issue with you. https://codepen.io/pmw57/pen/LYWwOZj

7

Thank you Paul. As you can see the timer starts upon selecting ‘display camera’. I look forward to resolving that

8

Someone else will have to explore this issue as I don’t have a camera.

I suggest not showing the video screen until you actually start to record. Before then, you might want to use image capture API to grab a frame instead, and use setInterval to show them at a low framerate.

9

Thanks for your reply.
Regarding ‘not showing the video screen’, I want to keep showing the screen,
maybe adding some js code related to display() timer and maybe have it pause until startRecording() ?

any help is welcomed

10

Does that capability exist? I don’t think that it exists.

11

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

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.