问题标签 [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 投票
1 回答
2883 浏览

video-streaming - 当用户寻找另一个时间时,计算 HTML5 视频流中的 .m4s 段文件后缀

我使用 Mp4Box 为长 MP4 视频创建了固定长度的片段。Mp4Box 创建一个元信息文件mv_init.mp4和片段,如mv_1.m4s, mv_2.m4s, ... 我使用 HTML5 Media Source Extensions 流式传输视频并且流式传输工作正常。

问题是我无法利用 HTML5 播放器的时间搜索功能。当用户使用搜索栏寻找另一个时间点时,我需要为此获取正确的段文件 ( mv_{number}.m4s) currentTime

例如:

  • 视频时长:2小时
  • 分段大小:10 秒
  • 用户寻求时间:25分钟

25 分钟 = 25 × 60 秒 = 1500 秒。由于每个段为 10 秒,我需要段号 1500 / 10 = 150。所需的段文件是mv_150.m4s.

计算显然看起来是正确的,但是 HTML5 播放器在继续流式传输之前会下载更多文件mv_150.m4s

如何正确计算段文件数,使查找后流式传输流畅,无需下载任何额外文件?

为了创建 MP4 视频的片段,我使用了以下命令:

0 投票
1 回答
820 浏览

javascript - 媒体源扩展视频崩溃(内存泄漏)

我尝试使用媒体源扩展(MSE)API 通过 websocket 播放实时流媒体。一切正常,除了浏览器会崩溃大约一天。我还发现内存总是会增加。下面是我的片段。我想我附加了太多数据,以至于内存总是会增加,这会导致 Chrome 出现异常行为。是否可以通过 MSE API 释放 MSE/视频缓冲区以防止内存泄漏?

操作系统:Windows 7 SP1 64 位 Windows 10 64 位



0 投票
1 回答
4370 浏览

html5-video - 使用媒体源扩展逐帧解码

我一直在研究 Internet 上的媒体源扩展示例,但还没有完全找到一种方法来使它们适应我的需求。

我正在寻找本地缓存的 MP4/WebM 视频(具有 100% 关键帧和 1:1 的簇/原子与关键帧的比率)并以非顺序方式解码/显示它们(即第 10、400、2、100 帧等),并能够以 0-60fps 的速率按需渲染这些非连续帧。使用 currentTime 属性的简单非 MSE 方法由于设置此属性和显示帧的延迟而失败。

我意识到这完全超出了视频播放的正常预期,但我的应用程序需要这种类型的非连续高速播放。理想情况下,我可以使用 h264 来实现 GPU 加速,但我意识到可能有一些特定于平台的 GPU 缓冲区需要处理,尽管零帧缓冲区似乎应该是可能的(参见此处)。我希望 MSE 可以完成这种非连续的高帧率低延迟播放,但我知道我要求很多。

问题:

  1. appendBuffer 会接受由单个关键帧组成的单个 WebM 集群/MP4 Atom,并且还能够以高频率(60fps)解码吗?

  2. 您认为我在浏览器中尝试做的事情是可能的吗?

任何帮助、见解或代码建议/示例将不胜感激。

谢谢!

2016 年 4 月 5 日更新

我能够让 MSE 主要在 Firefox、Edge 和 Chrome 中处理单帧 MP4 片段。但是,Chrome 似乎遇到了上面链接的帧缓冲区问题,我还没有找到一种方法来预处理 MP4 以调用这种“低延迟”模式。如果可以使用 MP4Box 等现有工具创建这样的文件,任何人都有任何线索吗?

Firefox 和 Edge 立即解码/显示单个帧,延迟非常小,但是一旦我将此视频加载到 Three.js WebGL 项目中(没有视频输出,没有错误),当然会出现问题。我暂时忽略了这一点,因为我更愿意在 Chrome 上运行,因为我也将针对 Android。

0 投票
1 回答
1942 浏览

mpeg-dash - 如何制作自己的简单 MPEG DASH 播放器?

我想知道是否有人已经尝试制作自己的简单 DASH 播放器(并且可能有一些示例/源代码)但没有在 GITHUB 上使用 dash.js 存储库,如果可能的话,有任何关于如何开始创建的见解和提示/写作过程?

0 投票
1 回答
407 浏览

javascript - 尝试使用 MSE 播放 webm 时出错,未附加块,视频停止

我想在这个 webm 中播放持续时间大于 5 秒(1.32 分钟)的 webm

我一直在尝试修改这个例子,当我运行它时,块没有附加并且视频在某个时候停止,我收到了这个错误:

InvalidStateError:试图使用一个不可用或不再可用的对象 sourceBuffer.appendBuffer(new Uint8Array(e.target.result));

有人可以澄清一下吗?

0 投票
1 回答
1078 浏览

javascript - 是否可以在 HTML5 MSE 中的视频轨道之间切换?

我正在使用 HTML5媒体源扩展 (MSE)使用DASH流式传输视频。我使用MP4Box从一个包含两个视频轨道的 MP4 文件创建了我的媒体片段。所以我所拥有的是一个带有moov->sidx盒子和多个moof->mdat包含两个视频轨道的媒体段的初始化段。如果我将它们推送到sourceBufferwithappendBuffer函数,MSE 将解码并仅显示第一个视频轨道(我假设来自第二个视频轨道的数据只是被丢弃)。

以下是我的代码中的相关部分:

所以我的问题是,是否可以控制 sourceBuffer 以使客户端可以选择要解码的轨道?我想将视频轨道拆分为不同的适配集(创建单独的 mp4 文件,每个文件都有一个视频轨道)可能是一种解决方案,但我对这种方法不感兴趣。

谢谢你们。

0 投票
1 回答
1422 浏览

javascript - MediaSource appendBuffer 在不同的位置

我正在尝试使用 MediaSource 播放两个单独的流(音频和视频)。我已经成功地以任意大小的顺序附加了它们的缓冲区(通过 XHR 检索的 ArrayBuffer 类型):

  • 大小相等的 XXX 字节块
  • 随机大小的 XXX 字节块
  • 将 XXX 秒的块转换为字节

视频和音频完美同步播放,所有范围都正确翻译。对于这些测试,我使用我收藏的 YouTube 编码视频、webm 格式和 vp9 编解码器。

然而,问题出现在寻找播放器的场景中,在该场景中,玩家在加载的段之前被寻找,我想从该点或该点之后的附近加载它们,而这个新段与任何先前附加的缓冲区没有顺序。

我尝试了一个明显的想法,即简单地假设 MediaSource 会识别应该附加新缓冲区的段位置,所以我的尝试只是获取与所寻找的时间间隔相关的流数据并将其附加到缓冲区,但它没有工作并发生以下错误:

我一直在尝试为此找到解决方案,尝试过timestampOffsetappendWindowStart无济于事appendWindowEnd

我在文档中找不到如何将缓冲区附加到顺序以外的位置,我将不胜感激任何帮助,如果可能的话,对过程本身进行一个小的解释。

0 投票
0 回答
720 浏览

javascript - MediaSource 随机停止视频

我正在做一个我想做的项目

我让它工作,但是几秒钟后它随机停止。

我知道 WebRTC,但在我正在研究的项目中,它基于一个环境,该环境是不支持 WebRTC 的嵌入式 Chrome 版本。

服务器:

客户:

0 投票
1 回答
997 浏览

webm - WebM 流的媒体源扩展 appendBuffer 以随机顺序排列

我正在尝试从多个来源并行下载视频。但是,当不遵循视频文件的顺序时,MSE appendBuffer 方法总是失败。

我想以随机顺序附加部分并“尽快”播放视频。我正在探索 SourceBuffer 模式属性以及 timestampOffset。这些都没有帮助。

我想知道对于这样的任务,我拥有的源 webm 文件是否可能是“不支持的格式”(顺序方法工作正常)。

源视频文件

感谢您的任何建议。

更新: 我试图分析众所周知的示例视频文件,我发现可能会乱序附加部分内容。似乎有必要遵循集群字节范围

0 投票
1 回答
912 浏览

webrtc - 显示带有媒体流扩展 (MSE) 的 getUserMediaStream 实时视频

我正在尝试使用 getUserMedia 显示从网络摄像头获取的 MediaStream,并使用任何可能播放的机制将其中继到远程对等点(作为实验)。我没有直接使用 webRTC,因为我想控制原始数据。

我遇到的问题是我的视频元素没有显示任何内容,并且我没有收到任何错误。我在 Elementary OS(基于 Ubuntu 14.04 的 linux 操作系统)上使用 Chrome 版本 51.0.2704.103(64 位)。

作为旁注,如果我将所有 blob 记录到一个数组中,然后创建一个新 blob 并将视频的 src 元素设置为 URL.createObjectUrl(blob),它会正确显示视频。

这是我尝试完成此操作的代码(减去中继,我只是想在本地播放):

这是我在 chrome://media-internal 中获得的信息:

还有日志:

更新:我尝试将数据发送到节点并使用 ffmpeg (fluent-ffmpeg) 将其保存到 webm 文件中,我可以在 VLC 中正确查看该文件。

更新 2:从节点流回来后,我得到以下信息:Media segment did not contain any video coded frames, mismatching initialization segment. Therefore, MSE coded frame processing may not interoperably detect discontinuities in appended media. . 在做了一些研究之后,似乎必须对 webm 文件进行分段才能工作,但是我还没有找到一种方法来为实时流执行此操作(使用 ffmpeg 或其他工具)。这里有什么想法吗?