前端 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 播放,但是存在自带播放器会出现播放不完整的问题

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

在这里插入图片描述

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
前端调用app设备录制语音和播放语音的过程中,通常需要使用一些特定的API和技术。下面是一种常见的实现方式: 录制语音方面,可以使用HTML5的语音API或WebRTC技术。具体步骤如下: 1. 首先,需要检测设备是否支持录音功能。可以使用`navigator.mediaDevices.getUserMedia`方法获取访问用户媒体设备的权限。 2. 获取到用户媒体设备权限后,可以通过`MediaRecorder`类进行录音操作。可以使用`new MediaRecorder(stream)`来创建一个`MediaRecorder`对象,其中`stream`是通过`getUserMedia`获取到的媒体流对象。 3. 调用`MediaRecorder`对象的`start`方法开始录音,调用`stop`方法停止录音,并通过`ondataavailable`事件监听数据可用的事件。录音数据可以通过`ondataavailable`事件中的`data`属性获取,再进行后续的处理和存储。 播放语音方面,可以使用HTML5的音频API或者WebRTC技术。具体步骤如下: 1. 对于HTML5音频API,可以使用`Audio`类来创建一个音频对象,通过设置`src`属性为音频文件的URL,然后调用`play`方法开始播放音频。 2. 对于WebRTC技术,可以使用`<audio>`标签来渲染音频,并通过`createObjectURL`方法生音频文件的URL,然后设置给`<audio>`标签的`src`属性,即可实现音频的播放。 需要注意的是,以上方法的支持程度在不同的浏览器和设备上可能会有所差异,需要做好兼容性处理,同还需要注意用户浏览器的隐私设置,及向用户请求权限。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值