Question

我正在建立一个站点，用户可以在其中使用手机捕获图片和视频。一切都可以在HTML5和一些javascript中正常运行。但是，我想限制视频的最大长度，而无需用户先捕获视频，并且在收到警告说视频太长之后。成功使用。

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

拥有解决方案/黑客技术的人，如果视频播放时间超过10秒，就会自动停止拍摄？

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

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

使用HTML5 capture =“ capture”限制视频上传长度的最简单方法

1 个答案: