使用 HTML5 capture="capture" 限制视频上传长度的最简单方法答案

【问题标题】：Easiest way to limit video upload length with HTML5 capture="capture"使用 HTML5 capture="capture" 限制视频上传长度的最简单方法
【发布时间】：2019-01-31 21:58:41
【问题描述】：

我正在建立一个网站，用户可以在其中使用手机拍摄图片和视频。一切都在 HTML5 和一些 javascript 中运行良好。但是我想限制视频的最大长度用户不必先捕获视频，并且在收到视频太长的警告后。这是我目前的视频上传表单使用成功。

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

任何人都有解决方案/黑客可以使视频的捕获在超过 10 秒时自动停止？

像往常一样，感谢您的智慧。

【问题讨论】：

标签： html video limit capture

【解决方案1】：

我也需要使用 MediaStream / MediaSource API 来执行此操作。

我最终屈服于使用countdown timer 并根据您想要的限制停止录制。

快速 ES6 + TypeScript 示例：

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();
    });
}

【讨论】：