前言
我正在使用 webRTC mediaRecorder api 在移动网络应用程序上录制视频。视频数据正在录制中,可以在设备上的视频播放器应用程序中下载和播放。
问题
问题是即使在最新版本的 chrome 中,记录的数据 blob 数组也无法在移动设备上播放:
window.URL.createObjectURL(); or window.webkitURL.createObjectURL()
我发现这篇文档指出 android 上的 chrome 存在一个错误。 Chrome Bug Report
我确实从谷歌找到了一些文档,甚至突出显示了这里的错误: Google devs mediaRecorder docs
问题
有没有人找到在 Android 上使用谷歌浏览器在视频元素中播放录制媒体的解决方法?
经过测试但失败的解决方案
测试 1:使用 blob 窗口 url 作为视频元素上的 src
<video src="[example blob url]>
测试 2:使用 blob 窗口 url 作为视频元素的源
<video>
<source type="video/webm" src="[example blob url]">
测试 3:使用 FileReader api 将 mediaRecorder blob 数组转换为 dataURI。
function getVideoDataUri(callBackFn)
{
var reader = new FileReader();
var fileMime = 'video/webm';
var blob = new Blob(this.blobs, {type: fileMime});
reader.onload = function(e)
{
if(typeof callBackFn === 'function')
{
callBackFn(reader.result);
}
};
reader.readAsDataURL(blob);
}
function callBack(dataUri)
{
/* do something with data */
console.log(dataUri);
}
getVideoDataUri(callBack);
最佳答案
看起来测试 3 就是答案。它有效,但视频在点击之前不会自动播放。我正在视频元素中播放录制的媒体。
关于javascript - Android 视频元素上的 Chrome 无法从 mediaRecorder blob 数据 url 播放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37734612/