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