Limiting the recording time

JavaScript
1

This record-video script works successfully. How can I limit the recording time once the ‘Start’ button is selected?

<script>
            const video = document.querySelector('video')
            const startvideo = document.querySelector('.start')
            const stopvideo = document.querySelector('.stop')
            const upload = document.querySelector('.upload')
            const initRecorder = stream => {
            const recorder = new MediaRecorder(stream)
            let blob
              video.srcObject = stream
              startvideo.removeAttribute('disabled')
              video.addEventListener('loadedmetadata', () => {
              video.play()
              })
              recorder.addEventListener('dataavailable', ({ data }) => {
              video.srcObject = null
              video.src = URL.createObjectURL(data)
              // Create a blob from the data for upload
              blob = new Blob([data], { type: 'video/webm' })
              })

              startvideo.addEventListener('click', () => {
              stopvideo.removeAttribute('disabled')

              show()
              reset()
              start()
              recorder.start()
	 // Get the video element with id="myVideo"
	document.getElementsByTagName("span")[0].removeAttribute("class")
	document.getElementsByTagName("span")[0].setAttribute("class", "colorred")
	//document.getElementById("demo").innerHTML ="Recording...."
			})

	stopvideo.addEventListener('click', () => {
              upload.removeAttribute('disabled')
              recorder.stop()
              stop()
		document.getElementsByTagName("span")[0].removeAttribute("class")
		document.getElementsByTagName("span")[0].setAttribute("class", "colorgreen")
				
              video.setAttribute("controls","controls")
						})

		// Upload the video blob as form data ............................
              upload.addEventListener('click', () => {
              uploadBlob(blob)
            })
          }

           ///////////////////////////////////////////////////
		  	//Reset the Camera
		  	function resetCamera(){
		  	location.reload();
		  	 }
/////////////////////////////////////////////////////////

		 //   uploading functionality ....

......................................................................................

Any guidance is appreciated

2

Can you use a setTimeout method to stop recording, and show an appropriate message that the recording has been automatically stopped?

By assigning setTimeout to a variable, you can also cancel it when the user manually stops recording too.

3

Thanks for your reply.

The script currently uses this, that works successfully:

 <button class="start" disabled>Start <br/>Recording</button>
 <button class="stop" disabled>Stop <br/>Recording</button>

So, to add timeout, something like this?

<button class="start" disabled onclick= "setTimeout(recLimit,
60000)">Start<br/>Recording</button>
<button class="stop" disabled onclick="clearTimeout(recLimit)">Stop<br/>Recording</button>


<script>
function recLimit() {
}
</script>

any additional guidance will be welcomed

4

Please don’t use inline event handlers. Those are a thing from the days of IE6 and aren’t suitable to use today.

More reliable techniques are obtained by using scripting to add an event listener to the element instead.

 <button class="start" disabled>Start <br/>Recording</button>
 <button class="stop" disabled>Stop <br/>Recording</button>

The event handlers are just a basic function, that accept the event handler.

function startClickHandler(evt) {
    ...
}
function stopClickHandler(evt) {
    ...
}
document.querySelector(".start").addEventListener(startClickHandler);
document.querySelector(".stop").addEventListener(stopClickHandler);

Inside of the click handlers is where you then put the code. It’s best if the handlers aren’t full of code, so calling out to a separately named function is the best practice.

var recordTimeout;

function stopClickHandler(evt) {
    clearTimeout(recordTimeout);
}
function startClickHandler(evt) {
    stopClickHandler();
    recordTimeout = setTimeout(recLimit);
}

The reason for stopping the click handler inside of the start click handler, is for when people doubleclick the button, or click it multiple times. That way you won’t end up with having multiple timeouts being defined.

1 Like
5

Thanks again for your reply.

As I didn’t write this script I don’t know where to place your suggested code. And doesn’t the initial file I posted already have some event Listener code?

Any additional guidance is appreciated.

6

It’s best to avoid inline javascript, which includes inline event handlers.

Here’s a thread from 8 years ago where they were saying how bad it was bad then, let alone now.

Don’t use `onclick=“…” code.

1 Like
7

Thanks again for your replies.

I have added this on the page:

<script>
var recordTimeout;

function stopClickHandler(evt) {
    clearTimeout(recordTimeout);
}
function startClickHandler(evt) {
    stopClickHandler();
    recordTimeout = setTimeout(recLimit,60000);
}

document.querySelector(".start").addEventListener(startClickHandler);
document.querySelector(".stop").addEventListener(stopClickHandler);
</script>

after this:

 <button class="start" disabled>Start <br/>Recording</button>
 <button class="stop" disabled>Stop <br/>Recording</button>
 <button class="upload" disabled>Upload <br/>Recording</button>
 <button class="reset" onclick="resetCamera()">Reset <br/>Camera</button>

and before the code displayed above in the initial posting 1d #1

yet, the recording doesn’t time out after 60 seconds.
Any additional guidnace is appreciated.

8

It is the recLimit function that is supposed to stop the recording. What have you done about that function?

You might also want to rename it to something more appropriate.

9

Thanks again for your message.

I believe your reply meant this, but it did not end the recording:

<script>
var recordTimeout;

function stopClickHandler(evt) {
    clearTimeout(recordTimeout);
}

var recLimit;

function startClickHandler(evt) {
    stopClickHandler();
    recordTimeout = setTimeout(recLimit,60000);
}
document.querySelector(".start").addEventListener(startClickHandler);
document.querySelector(".stop").addEventListener(stopClickHandler);
</script>

any additional assistance is appreciated

10

I believe what Paul is saying here is that this bit of code:

recordTimeout = setTimeout(recLimit,60000);

means, in words, set a timeout after 60000 ms, which on completion calls a function called recLimit().

So, you need to write a function called recLimit() somewhere in your code, and that function will call whatever mechanism you have to stop the recording. It will probably use similar code to that which you run when the “stop” button is pressed, and maybe show an indication that the recording was stopped for a reason, so the user is aware of it.

What you’ve done in your code is create the timeout, but point it to a function that does not exist. So you should be getting an error somewhere.

For testing, your function could just pop up an alert() window so you can see it is being called. Once you see that, you can remove the alert() and add the code to actually stop the recording.

1 Like
11

Thanks for your reply.

I’ve tried this but it doesn’t stop the recording:

<script>
var recordTimeout;

function stopClickHandler(evt) {
    clearTimeout(recordTimeout);
}

function startClickHandler(evt) {
    stopClickHandler();
    recordTimeout = setTimeout(recLimit,3000);
}

var recLimit;

  function recLimit() {
  	stopvideo.addEventListener('click', () => {
    recorder.stop()
   stop()
  }
}

document.querySelector(".start").addEventListener(startClickHandler);
document.querySelector(".stop").addEventListener(stopClickHandler);
</script>

Any additional guidance is appreciated

12

What is the stopvideo variable? How is that defined?

Never mind, from earlier code it’s seen to be:
const stopvideo = document.querySelector('.stop')

You just need to click that stopvideo button in the recLimit function. No event listener code should be used in there at all.

13

Thanks again for your message.

I have tried this without success:

<script>
var recordTimeout;

function stopClickHandler(evt) {
    clearTimeout(recordTimeout);
}

function startClickHandler(evt) {
    stopClickHandler();
    recordTimeout = setTimeout(recLimit,3000);
}

var recLimit;

  function recLimit() {
.stop();
  }

document.querySelector(".start").addEventListener(startClickHandler);
document.querySelector(".stop").addEventListener(stopClickHandler);
</script>

any additional guidance is welcomed

14

Yes - the trouble looks to be in this section here.

  function recLimit() {
.stop();
  }
15

Thanks for your reply.
Yes, I assumed it was in that section.
I’m unsure what do there.

Any additional assistance is appreciated

16

Do you know how to stop the recording from happening?

17

Only by clicking the stop button

18

How would the code gain a reference to the stop button?
Can you see anywhere in the code that it might have already done so already?

19

Thanks again for your reply.

<button class="stop" disabled>Stop <br/>Recording</button>

20

Yes, that is the HTML button. Do you see anywhere in the JavaScript code that gains a reference to that button?