标签：javascript html5 blob video html5-video
我有一个Blob数组(二进制数据,真的 – 我可以表达它然而效率最高.我现在使用Blob但可能是Uint8Array或者更好的东西).每个Blob包含1秒的音频/视频数据.每秒生成一个新的Blob并附加到我的数组.因此代码大致如此：
var arrayOfBlobs = [];
setInterval(function() {
arrayOfBlobs.append(nextChunk());
}, 1000);
我的目标是将此音频/视频数据流式传输到HTML5元素.我知道可以生成和播放Blob URL,如下所示：
var src = URL.createObjectURL(arrayOfBlobs[0]);
var video = document.getElementsByTagName("video")[0];
video.src = src;
当然,这仅播放视频的前1秒.我还假设我可以简单地连接当前在我的数组中的所有Blob以某种方式播放超过一秒：
// Something like this (untested)
var concatenatedBlob = new Blob(arrayOfBlobs);
var src = ...
然而,这仍将最终耗尽数据.由于Blob是不可变的,我不知道如何继续附加数据.
我确信这应该是可能的,因为YouTube和许多其他视频流服务都使用Blob URL进行视频播放.他们是如何做到的呢？
解决方法:
解
经过一些重要的谷歌搜索后,我设法找到了拼图中缺失的部分：MediaSource
这个过程实际上是这样的：
>创建MediaSource
>从MediaSource创建对象URL
>将视频的src设置为对象URL
>在sourceopen事件上,创建一个SourceBuffer
>使用SourceBuffer.appendBuffer()将所有块添加到视频中
这样,您可以在不更改对象URL的情况下继续添加新的视频位.
注意事项
> SourceBuffer对象对编解码器非常挑剔.这些必须被声明,并且必须准确,否则将无效
>您一次只能将一个blob的视频数据附加到SourceBuffer,并且在第一个Blob完成(异步)处理之前,您不能追加第二个blob
>如果你在没有调用.remove()的情况下向SourceBuffer添加太多数据,那么你最终将耗尽RAM并且视频将停止播放.我的笔记本电脑在1小时左右就达到了这个极限
示例代码
根据您的设置,其中一些可能是不必要的(特别是在我们拥有SourceBuffer然后使用updateend缓慢附加我们的队列之前构建视频数据队列的部分).如果您能够等到创建SourceBuffer以开始抓取视频数据,那么您的代码看起来会更好.
<html>
<head>
</head>
<body>
<video id="video"></video>
<script>
// As before, I'm regularly grabbing blobs of video data
// The implementation of "nextChunk" could be various things:
// - reading from a MediaRecorder
// - reading from an XMLHttpRequest
// - reading from a local webcam
// - generating the files on the fly in JavaScript
// - etc
var arrayOfBlobs = [];
setInterval(function() {
arrayOfBlobs.append(nextChunk());
// NEW: Try to flush our queue of video data to the video element
appendToSourceBuffer();
}, 1000);
// 1. Create a `MediaSource`
var mediaSource = new MediaSource();
// 2. Create an object URL from the `MediaSource`
var url = URL.createObjectURL(mediaSource);
// 3. Set the video's `src` to the object URL
var video = document.getElementById("video");
video.src = url;
// 4. On the `sourceopen` event, create a `SourceBuffer`
var sourceBuffer = null;
mediaSource.addEventListener("sourceopen", function()
{
// NOTE: Browsers are VERY picky about the codec being EXACTLY
// right here. Make sure you know which codecs you're using!
sourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs=\"opus,vp8\"");
// If we requested any video data prior to setting up the SourceBuffer,
// we want to make sure we only append one blob at a time
sourceBuffer.addEventListener("updateend", appendToSourceBuffer);
});
// 5. Use `SourceBuffer.appendBuffer()` to add all of your chunks to the video
function appendToSourceBuffer()
{
if (
mediaSource.readyState === "open" &&
sourceBuffer &&
sourceBuffer.updating === false
)
{
sourceBuffer.appendBuffer(arrayOfBlobs.shift());
}
// Limit the total buffer size to 20 minutes
// This way we don't run out of RAM
if (
video.buffered.length &&
video.buffered.end(0) - video.buffered.start(0) > 1200
)
{
sourceBuffer.remove(0, video.buffered.end(0) - 1200)
}
}
</script>
</body>
</html>
作为额外的奖励,这会自动为您提供实时流的DVR功能,因为您在缓冲区中保留了20分钟的视频数据(您可以通过简单地使用video.currentTime = …进行搜索)
标签：javascript,html5,blob,video,html5-video 来源： https://codeday.me/bug/20190828/1747412.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。