Question

前言

我使用webRTC mediaRecorder api在移动网络应用上录制视频。视频数据正在录制，可以在设备上的视频播放器应用程序中下载和播放。

问题

问题是，即使在使用以下版本的最新版本中，录制的数据blob阵列也无法在Chrome中在移动设备上播放：

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就是答案。它有效但视频在点击之前不会自动播放。我正在播放视频元素中的录制媒体。

Answer 2

由于我的推荐而无法发表评论，但我认为您现在想要修复，请参阅chrome bug report。

感谢分享您的测试3，节省了我的一天！

Android视频元素上的Chrome无法播放mediaRecorder blob数据网址

2 个答案: