前端 mediaRecorder 录制视频源代码实例,和本地播放器无法定位进度条问题分析和解决

问题

mediaRecorder 本质上录制的是webm
当我们使用getUserMedia、MediaRecorder等API生成的webm视频时,会发现最终的webm是无法拖动进度条的

解决方案
一、计算视频长度,分配给blob
这种方法的核心就是,在start开始录制时,记录一个开始时间,然后在stop停止录制后,把当前时间与记录的开始时间相减,在把时间赋值给blob来解决这个问题。源代码

主要代码

 MediaUtils.getUserMedia(true, true, function (err, stream) {
        if (err) {
            throw err;
            alert("请检查摄像头!", function () { });
        } else {
            // 通过 MediaRecorder 记录获取到的媒体流
            var options = {
                audioBitsPerSecond: 128000,
                videoBitsPerSecond: 2500000,
                mimeType: "video/webm;codecs=vp8,opus"//webm类型一定要加codecs=vp8,opus,否则会导致录制时候时而可以用时而不能用
            }
            mediaRecorder = new MediaRecorder(stream, options);
            mediaStream = stream;
            var chunks = [];//通道
            video.srcObject = stream;
            video.play();
            videosContainer.appendChild(video);
            mediaRecorder.ondataavailable = function (e) {
                mediaRecorder.blobs.push(e.data);
                chunks.push(e.data);
            };
            mediaRecorder.blobs = [];
            mediaRecorder.onstop = function (e) {
            var duration = new Date().getTime() - startTime;//停止录制时候 用当前时间减去开始录制的时间
                console.log(new Date().getTime())
                console.log(duration)
                var tmpBlob = new Blob(chunks, { 'type': mediaRecorder.mimeType });
                //调用设置时长代码。该函数基于fix-webm-duration.js
                ysFixWebmDuration(tmpBlob, duration, function (fixedBlob) {
                    recorderFile = fixedBlob
                   console.log(recorderFile)
                });
                chunks.length = 0;
                if (null != stopRecordCallback) {
                    stopRecordCallback();
                }
                $('#openCamera').text('保存');
            };
            $('#openCamera').text('开始录制');
        }
    });

改善后的问题

原有问题:进度条不显示,无法定位进度条,没有总时长,但windows自带的本地播放器可完整播放
改进后:下载的视频通过右键打开方式选择谷歌浏览器,或者windows商店下载的 视频播放器HD或vLc 都可完整播放,可定位进度条,有总时长,可定位进度条。但出现自带的浏览器视频播放不完整
原因:mediaRecorder 录制视频 内置是webm格式,本地播放器对webm不适配
两种方案可选:
1,坚持原有的,视频正常播放,(不管什么播放器进度条都显示不了,无法定位进度条,没有总时长显示,)
2,改进后的,指导用户用谷歌浏览器播放或者到windows商店下载视频播放器HD或vLc 播放,但是存在自带播放器会出现播放不完整的问题

最后提示一个需要注意的问题

前端 mediaRecorder 录制视频源代码实例,和本地播放器无法定位进度条问题分析和解决_第1张图片

你可能感兴趣的:(js,javascript,jquery,html5)