【问题标题】: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();
        });
    }
    

    【讨论】:

      猜你喜欢
      • 2021-05-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-02-26
      • 2016-09-05
      • 2021-01-15
      • 1970-01-01
      相关资源
      最近更新 更多