Easiest way to limit video upload length with HTML5 capture="capture"

Question

I am building a site where users are able to capture pictures and video using their mobile phones. Everything works well in HTML5 and some javascript. But I would like to limit the max length of the videos without the users having to capture the video first, and after receiving a warning that the video is too long. This is the current video upload form I am using with success.

 <input type="file" accept="image/*;capture=camera" id="FileUpload" name="FileUpload" capture="capture">

Anyone with a solution/hack that would make the capture of the video automatically stop if it reaches more than 10 seconds?

As usual, thanks for the wisdom.

score 0 · Answer 1 · answered Dec 04 '18 at 19:55

I needed to do this too using MediaStream / MediaSource API's.

I ended up succumbing to using a countdown timer and stopping the recording upon the limit you want.

Quick ES6 + TypeScript example:

startRecording(): void {
    // ... record logic
    // ... countdown logic

    if (countdownTimer === maxSeconds) {
        this.stopRecording();
    }
}

stopRecording(): void {
    this.mediaRecorder.stop();
    this.isRecording = false;

    const blobPropertyBag: BlobPropertyBag = {
      type: 'video/webm'
    };
    this.fileBlob = new Blob(this.recordedBlobs, blobPropertyBag);

    this.stream.getTracks().forEach((track: MediaStreamTrack) => {
        track.stop();
    });
}

Easiest way to limit video upload length with HTML5 capture="capture"

1 Answers1