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

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

    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>`

    maybe adding some js code where at display() timer is paused until startRecording() ?

    any help is appreciated.

      Being as this is a PHP forum, probably not the best place to look for JavaScript and other front-end help. 🤷 Maybe check its sister forum at https://www.webdeveloper.com/ ?

        Thanks, I have it posted there now. I looked around here and some js psoting in Misc. Help, so that's why I posted here...

        chrisj Yeah, there are certainly people with some JS skills here (mine are very rudimentary), but there seems to be a lot more JS activity there.

          Write a Reply...