问题标签 [media-source]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
14004 浏览

javascript - 无法让 MediaSource 在 chrome 中使用 mp4 格式

基于此处的示例

我下载了 webm 文件并编码为 mp4 文件,该文件将在本地播放,但我无法将其用作媒体源。

MP4Box 报告编解码器是,avc1.64000d,mp4a.40.2但将其添加到源缓冲区没有帮助。

这是问题的演示(我不希望它在 Firefox 中工作,因为尚不支持媒体源扩展)

这是我正在测试的代码:

0 投票
0 回答
3060 浏览

javascript - MediaSource SourceBuffer 在 2 次 appendBuffer 调用后关闭

我正在尝试将 webm 视频文件流式传输到客户端。

第一个块(大约 4466 字节长)“工作”(使用 appendBuffer),因为我可以看到<video>调整到视频分辨率的大小。

这是我第三次附加后得到的错误:

Uncaught InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.

的属性有这个错误SourceBufferbuffered

[Exception: DOMException]

这是客户端代码:

0 投票
1 回答
2241 浏览

javascript - 如何保持实时 MediaSource 视频流同步?

我有一个服务器应用程序,它呈现 30 FPS 视频流,然后将其实时编码和复用到WebM Byte Stream中。

在客户端,HTML5 页面向服务器打开一个 WebSocket,当连接被接受时,服务器开始生成流。发送标头后,每个后续 WebSocket 帧都包含一个 WebM SimpleBlock。每 15 帧出现一个关键帧,当这种情况发生时,将启动一个新的集群。

客户端还创建一个MediaSource,并在从 WS 接收到帧时,将内容附加到其活动缓冲区。附加第一<video>帧后立即开始播放。

一切都运作良好。我唯一的问题是网络抖动会导致播放位置在一段时间后偏离实际时间。我目前的解决方案是挂钩updateend事件,检查传入集群上的时间码和时间码之间的差异,video.currentTime并手动更新currentTime它是否超出可接受的范围。不幸的是,这会导致播放中出现明显的暂停和跳跃,这是相当不愉快的。

该解决方案也感觉有点奇怪:我确切地知道最新的关键帧在哪里,但我必须将它转换为一整秒(根据 W3C 规范),然后才能将它传递给currentTime,然后浏览器可能必须绕过并找到最近的关键帧。

我的问题是:有没有办法告诉媒体元素始终寻找可用的最新关键帧,或者保持播放时间与系统时钟时间同步?

0 投票
1 回答
986 浏览

javascript - Node.js 中两个子进程之间的管道?

我正在尝试使用带有 Node.js 的 FFmpeg 捕获视频,并通过 websockets 将其发送到浏览器以使用 MediaSource API 播放。到目前为止,我在 Firefox 中有效,但在 Chrome 中无法正确解码。显然,通过阅读这个问题,我需要使用 sample_muxer 程序来确保每个“集群”都以关键帧开始。

这是我正在使用的代码:

显然我没有正确地管道它,我不确定在包括论点的同时我会如何。感谢任何帮助使其正常工作。谢谢!

0 投票
1 回答
2949 浏览

javascript - 媒体源扩展:如何删除源缓冲区缓冲范围

是否sourceBuffer.remove()删除缓冲范围或整个源缓冲区?

如果是这样,两个预期的论点是什么?

0 投票
0 回答
535 浏览

google-chrome - Chrome 的 MediaSource 问题和 DVLOG

我尝试使用MediaSourceAPI 在 Chrome 中重建 H.264 编码视频的 MP4 流。

为了便于讨论,我制作了两个这样的流,当作为标签包含时,它们都可以正确src播放<video>。但是,当输入 时MediaSource,其中一个不起作用,而另一个起作用。查看chrome://media-internals,两个流都产生了一堆Skipping unrecognized top-level box: mdat(即使一个显然播放得很好,所以它不可能完全忽略它们)。

在任何情况下,无法播放的都会卡住kInitPrerolling而不会引发任何错误。我想深入了解这一点,但是事实证明这很困难,因为诊断消息在 Chromium 源代码中打印为DLOGs 和DVLOGs ,并且这些消息被排除在 Chrome 的调试版本之外。

有人可以:

  • 阐明为什么 Chrome 可能会拒绝播放流;或者
  • 给出一些关于如何从 Chrome 的 MediaSource 管道(最好在 OSX 上)查看 DVLOG 的说明。Chrome Canary 不会打印出 DVLOG,而 Chromium 版本说不支持 H.264,所以我假设标准的调试构建指令不会给我一个支持 H.264 的可执行文件。
0 投票
2 回答
1576 浏览

video-streaming - mp4box 中的 DASH .mpd 未在 Dash.js 播放器中播放

我已经使用 MP4Box 生成了一个 .mpd 文件,并使用 Dash.js 播放器播放生成但它没有播放。但是如果我使用链接中提供的详细信息创建播放器(http://msdn.microsoft.com/en- us/library/dn551368(v=vs.85).aspx)它正在播放。我已经按照上面提到的链接中给出的详细信息进行了操作,并且效果很好。但是当我在 dash.js 播放器中使用 .mpd 时,它不起作用。

请帮我解决这个问题。

请帮我解决这个问题。

0 投票
1 回答
1772 浏览

javascript - 媒体源缓冲区数据到哪里去了?

我正在将视频从实时源附加到源缓冲区,因此可能对源的长度没有限制。

源缓冲区中的数据在浏览器中的去向,是存储在内存中还是磁盘缓存文件中?

我应该担心缓冲区会变大吗?也许我应该定期从缓冲区中删除一些数据?

我不关心寻找,我只想看直播。

我运行此代码以查看缓冲区发生了什么

这是一个示例输出。

0 投票
2 回答
26660 浏览

javascript - MediaSource 错误:此 SourceBuffer 已从父媒体源中删除

我正在试验 Chrome 中可用的新 MediaSource API。

我正在尝试将二进制数据从 WebSocket 动态附加到视频媒体源。

https://html5-demos.appspot.com/static/media-source.html的示例开始,我的代码目前是:

我一直收到错误消息:InvalidStateError: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.在一个附加之后。看起来 MediaSource 在调用 后立即关闭buffer.appendData()

有什么方法可以优雅地做到这一点?

注意: chrome://media-internals/ 不返回任何有用的信息。

0 投票
2 回答
6413 浏览

javascript - 媒体源扩展不起作用

我正在尝试使用 MediaSource API 将单独的 WebM 视频附加到单个源。

我发现一个Github 项目正在尝试同样的事情,其中​​加载了一个 WebM 的播放列表,每个都附加为一个 SourceBuffer。但它最后一次提交是在一年前,因此与当前规范不同步。所以我将它分叉并更新到最新的 API 属性/方法,以及一些重组。许多现有代码直接取自规范的示例Eric Bidelman 的测试页面

但是,我无法让它按预期工作。我正在两个浏览器中进行测试,都在 Mac OS X 10.9.2 上:Chrome 35 stable(撰写本文时最新)和 Firefox 30 beta,其标志media.mediasource.enabled设置为trueabout:config(此功能要到FF 25,当前稳定为 24)。

这是我遇到的问题。

两种浏览器

我希望视频最终成为一个由 11 个 WebM(00.webm、01.webm、...、10.webm)组成的长视频。现在,每个浏览器只播放一段视频。

铬合金

非常不一致的行为。似乎不可能可靠地重现这些错误中的任何一个。

  • 有时视频是空白的,或者中间有一个高高的黑条,并且无法播放。
  • 有时视频会在 01.webm 的第一帧加载并暂停。
  • 有时,视频会播放几帧 02.webm 并暂停,只加载了前三个片段。
  • 播放按钮最初是灰色的。
  • 按下灰显的播放按钮会产生非常不一致的行为。有时,它会加载黑色、无法播放的视频。其他时候,它会播放第一段,然后,当你到最后,它会停止,当你再次按下播放/暂停时,它会加载下一段。即使这样,它有时也会跳过段并卡在 04.webm 上。无论如何,它永远不会播放最后一段,即使控制台会报告通过所有缓冲区。

老实说,每次都不同。我不能在这里一一列举。

已知警告:Chrome 目前没有实现sourceBuffer.mode,虽然我不知道这可能会产生什么影响。

火狐

  1. 只播放 00.webm。总运行时间为 0:08,即该视频的长度。
  2. 视频搜索不起作用。(这可能是预期的行为,因为在 onSeeking 事件处理程序中实际上没有发生任何事情。)
  3. 视频完成后无法重新启动。

我最初的理论是,这与mediaSource.sourceBuffers[0].timestampOffset = duration和有关duration = mediaSource.duration。但我似乎无法从mediaSource.durationexcept 中得到任何回报NaN,即使我正在附加新的段。

完全迷失在这里。指导非常感谢。

编辑:我取消了代码的持续时间部分的注释,并mse_webm_remuxerAaron Colwell 的媒体源扩展工具(感谢Adam Hart的提示)上运行了所有视频。瞧,Chrome 中不再有不可预测的故障!但是,唉,一旦媒体片段结束,它仍然会暂停,即使你按下播放,它有时也会卡在一个帧上。

在 Firefox Beta 中,它不会超过第一段,响应:

TypeError:分配给 SourceBuffer.timestampOffset 的值不是有限浮点值。

记录duration返回值NaN(但仅在 FF 中)。