javascript - Android 视频元素上的 Chrome 无法从 mediaRecorder blob 数据 url 播放

Question

前言

我正在使用 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); 

Answer 1

看起来测试 3 就是答案。它有效，但视频在点击之前不会自动播放。我正在视频元素中播放录制的媒体。