问题标签 [media-source]

我正在寻找一种将视频从 NodeJS 服务器流式传输到客户端的解决方案，然后将它们与 MediaStream API 合并。

关键是我不知道流媒体是如何工作的。

我必须如何通过 HTTP 协议发送视频块？我看到状态代码 206 是“部分内容”。我认为块生成大量 206 代码，最后一个块生成 200 代码，如下所示：

这是正确的？

服务器端

我发现了很多使用文件路径生成块的示例，但是我有一个带有视频二进制文件的缓冲区，我如何生成块？

客户端

我看到没有关于 MediaSource API 的完善文档。在我在网上找到的示例中使用了webkitsourceopenorsourceopen事件，但我不明白它们何时被调用。

有人可以向我解释更多有关流式视频的信息，甚至可以解决我对服务器和客户端代码的疑虑吗？

非常感谢！:)

我的应用程序从 ServerSentEvent (SSE) 接收一些视频块，并且使用 MediaStream API，它应该将它们附加到缓冲区中并将它们可视化为 HTML5 视频标签。问题是 MediaSource API，当程序尝试将块附加到 mediaStream 缓冲区时，它会停止工作。

当程序尝试附加第一个块时会出现错误。

这是客户端代码：

这是完整的错误日志：

当应用程序尝试执行sourceBuffer.appendBuffer(new Uint8Array(e.target.result));.
我真的无法理解这个错误的出现方式。代码真的很像这个例子的代码

我编写了一个 VideoBuffer 类来加载 webm 视频片段。每个片段在作为视频元素中的 blob 或直接在单独的浏览器选项卡中打开时单独工作，但在将它们附加到源缓冲区时我似乎无法使其工作。

没有抛出错误或异常，MediaSource 的就绪状态被关闭并且 SourceBufferList 被清空。我在这个工作示例上基于我的代码，主要区别在于我将每个 xhr 响应附加到缓冲区，而不是附加来自 FileReader 的结果。

关于为什么这不起作用或我应该如何调试它的任何想法？

注意：上面的代码是用 browserify 加载的，这就是为什么它是一个 CommonJS 模块。

为那些喜欢和/或希望进行实验的人提供要点。

我几乎没有对 Media Souce Extension/API 进行调查，但我还没有找到覆盖特定缓冲区的方法。假设我观看了前 30 秒质量较低的视频，然后播放器切换到更高质量，所以 30-60 秒是 HQ。所以......当我回到 0-30 秒时，我会得到质量较低的视频（一个已经缓冲的视频），但我想以更高质量重新附加新请求的相同范围并观看。我在现有播放器（MSE 展示）上看到情况并非如此。

我猜MSE根据开始日期时间（我现在记不起名字）确定在哪里附加缓冲区？那么，是否可以覆盖 Media Source API 中的一些附加范围/缓冲区？

http://www.youtube.com/html5 indicates that Google Chrome is compliant with MediaSource Extensions & H.264.

I make a simple test checking that my video is supported by Chromium, using the <video id='player' autoplay='true'> <source src='/test.mp4' type='video/mp4' /> </video>

The video plays smoothly.

A second alternative that also works fine consists in loading through AJAX the byte chain and converting the buffer to a URI object. Then asigning such URI to the (video) source.src attribute.

Finally I try to load the same video through AJAX and inject it into a MediaSource Buffer. It fails with the error 4. (Source Not supported).

The code used is similar to:

I tried different mp4 files, generated either with ffmpeg/avconv or MP4Box. Not luck at this moment. A similar code works fine with VP8/WebM test files.

Thanks in advance for any help/hint or link!

Enrique

我在下面找到了一些东西：

根据：此链接

任何浏览器都支持 DASH 任何支持 W3C 媒体源扩展 (MSE) 的浏览器，今天是 Chrome 和 IE11

在这里

Firefox 21 包含 HTML5 WebM 视频的 DASH 实现，默认情况下是关闭的。它可以通过“ about:config”和“media.dash.enabled”首选项启用。Firefox 23 删除了对 HTML5 WebM 视频的 DASH 的支持

但我只能让它在 Chrome(23+) 中运行。你能告诉我所有支持DASH MPEG流式传输视频的浏览器吗？

安装最新的 Windows 7 更新并重新启动计算机后，Google Chrome 33 中的媒体源 API 无法正常工作。它在重新启动之前完美运行。

去这里时，我收到以下消息：媒体源 API 不可用。

Chrome 版本：版本 33.0.1750.149 m

我检查了 chrome://flags/ 并没有任何变化。

在那之后多次重新启动我的计算机并没有帮助。（几天前，当我收到相同的消息时，它曾经做过一次）。

当我从https://html5-demos.appspot.com/static/media-source.html下载所有文件时，媒体源 API 工作正常。但是，当我在第 137 行替换文件名时，chrome dev tools 给出了 Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

我没有对文件进行其他更改并将其上传到保管箱。@line 137 ` - var FILE = 'test.webm'; + var 文件 = 'b8756219.webm';

Chrome 版本 31.0.1650.63 Ubuntu 13.10 两者都是 webm 文件，但其中一个给出了错误。我错过了什么？`

After going through the online documentation, I have written the code mentioned below. Whenever it is a small sized file it works well. But with bigger files i am getting the Error: Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable. This is because the mediasource.readystate has changed to close. I am not able to figure out which statement changes readystate from close to open and then back to close. I logged the readystate value at all places. It changes to open inside the mediacallback method. What triggers this change ??

我有一个正在捕获的 MP4/H264 视频剪辑，因此它每 4 秒增长一次，并且它的元数据会动态刷新。由于这不是分段的 MP4，我不能使用 MediaSource API 来操作块。

我正在寻找一种在播放期间更新/刷新视频持续时间的方法，而无需重新加载整个剪辑。

简而言之，我正在寻找一种以更用户友好的方式执行以下操作的方法。

我想避免有 2 个视频标签并使用上述方法从一个切换到另一个。我也尝试过使用 popcorn.js，但没有任何运气。

使用 Chrome，而且……只有 chrome，所以不用担心其他浏览器。

任何建议将不胜感激！