接收视频块并在浏览器中播放答案

【问题标题】：Receive chunks of video and play them in browser接收视频块并在浏览器中播放
【发布时间】：2017-03-14 23:08:45
【问题描述】：

基本想法：我正在创建一个应用程序。其中用户在输入字段（type="file"）中选择本地文件（mp4），然后将视频流式传输给其他用户。我正在考虑用javascript操作文件。并通过（datachannels webRTC）将其逐块发送给另一个用户，然后在另一端逐块播放。

我知道我可以使用 - MediaSource API“组装”这些块

问题：如何使用 javascript 将视频分割成块？我已经在谷歌上搜索了一段时间，但似乎找不到图书馆（也许我在谷歌上搜索了错误的关键字？）。

谢谢！

【问题讨论】：

标签： javascript stream video-streaming

【解决方案1】：

使用blob#slice分割视频

// simulate a file
blob = new Blob(['ab'])
chunk1 = blob.slice(0, 1)
chunk2 = blob.slice(1, 2)

console.log(blob.size)
console.log(chunk1.size)
console.log(chunk2.size)

【讨论】：

是的，但是它会分割视频文件（包括视频和音频）吗？
它将同时分割音频和视频
这很有趣.. 问：你听说过canvas captureStream吗？您如何看待这种方法（我知道浏览器兼容性不是很好）。谢谢！
而且，我不认为它也可以分块音频。捕获流。我会尝试你的方法。
哦，我太傻了。您正在使用媒体流而不是视频文件......那么音频和视频可能会分开（不确定）。但我知道 MediaRecorder api 会将音频 + 视频合并在一起。

【解决方案2】：

我认为您可能感兴趣的另一件事是文件流式传输......

要从 blob 中获取 ReadableStream，您可以使用骇人听闻的为什么这样做

stream = new Response(blob).body
reader = stream.getReader()
reader.read().then(chunk => spread(chunk))

另一个很酷的库，否则您可以使用 Screw-FileReader 流式传输 blob

【讨论】：

等等。这是一大块吗？还是整个 Blob？
这会将洞 blob 变成一个流，并且对于每个 read()，您将得到一个未知的块大小
嗯...但是如何将此流添加到 werbrtc？（pc.addStream（这里应该是一个流）。对不起，如果我问的是琐碎的问题。我仍在深入研究整个流媒体业务。
显然 addStream 已被弃用...应该改用 addTrack 吗？我不知道 webrtc 接受什么样的东西，对不起
addStream 没有被贬低（我们在当前的网络摄像头系统中使用它）。

【解决方案3】：

没有比使用WebTorrent 分享视频更棒的了得到你需要的一切...使用 WebRTC...

【讨论】：