问题标签 [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 回答
2734 浏览

javascript - 无法通过 websocket 将视频流式传输到 Firefox

我已经通过 websocket 编写了一些代码流视频,因此sourcebuffer可以在 Chrome 和 Edge 中使用。

但是,当我在 Firefox 中运行它时,视频永远不会播放,只会显示一个旋转的轮子动画。当我检查<video>统计信息时,它读取HAVE_METADATA为就绪状态和NETWORK_LOADING网络状态。

代码如下所示:

0 投票
0 回答
690 浏览

javascript - 是否可以使用媒体源扩展来仅提取音频流?

我想尝试使用html5而不是flash实现通过http从客户端传输音频流到服务器。现在我正在收集信息。我希望我的解决方案适用于歌剧、火狐、野生动物园、铬和这个......即。问题出在这个..即。

据我了解,我需要 Web Audio Api。根据https://html5test.com/compare/browser/ie-11.html IE11 不支持 Web Audio Api。但是,根据相同的链接,也不支持媒体源扩展 (MSE)。但是,在这里https://msdn.microsoft.com/en-us/library/dn594470(v=vs.85).aspx我读到:

Internet Explorer 11 通过 HTML5 媒体源扩展 (MSE) 引入了对 MPEG-DASH 媒体流的支持。MSE 扩展了您可以为媒体流动态更改的视频和 音频元素,而无需使用插件。这为您提供了自适应媒体流、实时流、拼接视频和视频编辑等功能。

重要 Windows 7 上的 IE11 不支持此功能。

那么,是否可以使用 Media Source Extensions 仅提取音频流以将其发送到服务器以使用 javascript 和 html5 制作跨浏览器解决方案?

0 投票
1 回答
3118 浏览

ios - iOS 上的 HTML5 MSE

我正在尝试使用 Chrome Mobile 让 hls.js 在 iOS 上运行,但我注意到 Chrome Mobile 不支持 MediaSourceExtensions,这绝对是必要的!

iOS 是否以任何方式支持 MSE?(Chrome Mobile、Firefox Mobile..?)如果没有,是否有计划实施?

0 投票
0 回答
71 浏览

javascript - 我可以创建一个不是视频/音频类型的增长文件源 URL 吗?

我读过这篇文章,但这是一个视频的解决方案。现在,我想创建一个非视频/音频 sourceBuffer url。我不知道如何实现它。我认为也许 mediasource 不支持。

0 投票
1 回答
433 浏览

javascript - 将 PCM 数据附加到 MediaSource

所以我有一个使用 Google 的Shaka 播放器播放视频的网络应用程序。它使用MediaSource API 流式传输音频和视频片段。

我想对我的音轨的原始 PCM 数据进行一些音频处理。我看到它以 .mp4 格式获取音频片段,然后以 ArrayBuffer 的形式将它们附加到 SourceBuffer,然后将其附加到 MediaSource 并播放。有什么方法可以劫持这个流程,将数据解码为 PCM,进行一些处理,然后将处理后的 PCM 管道返回到 SourceBuffer?我看到有AudioContext.decodeAudioData API 用于将片段从 .mp4 获取到 PCM,但这会返回一个AudioBufferSourceNode和 AudioBuffer,它们不能附加到我的常规 SourceBuffer 中。有没有办法解决这个问题?

我想我可以将我的 PCM 数据重新编码回 .mp4,但这似乎是一种巨大的浪费。

0 投票
0 回答
613 浏览

javascript - SourceBuffer 缓冲不更新长度

在下面的代码中,console.log(sb.buffered) 给了我一个长度为 0 的 TimeRanges 对象。这是为什么呢?我检查了 xhr.response 是什么,它是一个大约 58000 字节长度的 ArrayBuffer。

0 投票
1 回答
104 浏览

javascript - HTML5 MediaSource Extension 'updateend' 事件如何报告时间?

我正在使用 HTML5 VideoSource 扩展,我需要知道“updateend”事件是如何报告时间的。当我将事件记录到 Chrome 控制台时,我得到以下数据:

在此处输入图像描述

如屏幕截图所示,有一个 timeStamp 值报告为 timeStamp。我目前无法确定它的正面或反面,需要知道它是毫秒、微秒还是纳秒?另外,如何将其转换为秒,以便将视频播放器播放的时间与事件触发的时间进行比较?

0 投票
1 回答
3305 浏览

javascript - Chrome:播放正在通过 fetch/XHR 下载的视频

我想要实现的是让 Chrome 将视频文件作为数据加载(通过 Fetch API、XHR 等)并<video>在它仍在下载的同时使用它来播放它,而无需对同一 URL 发出两个单独的请求,也无需等到该文件已完全下载。

ReadableStream从 Fetch API ( )中获取 a 很容易response.body,但我找不到将其输入video元素的方法。我发现我需要一个blob可以使用MediaSource对象创建的 URL。但是,SourceBuffer#appendStream听起来正是需要的方法在 Chrome 中没有实现,因此我无法将流直接连接到MediaSource对象。

我可能可以分块读取流,从中创建Uint8Arrays 并使用SourceBuffer#appendBuffer,但这意味着播放不会立即开始,除非块大小非常小。此外,感觉就像手动做所有这些 API 应该能够开箱即用的事情。如果没有其他解决方案,而我走这条路,我应该注意什么?

是否有其他方法可以为 a 创建 blob URL ReadableStream?或者有没有办法提出fetch<video>分享请求?有这么多新的 API,我很容易错过一些东西。

0 投票
1 回答
149 浏览

mpeg-dash - 创建我自己的现场破折号播放器

我正在尝试创建自己的代码以使用媒体源播放实时 MPEG-DASH,我成功获取数据但无法在播放器中显示。

此代码在使用非实时源时有效,但不适用于实时代码。我错过了什么?

0 投票
1 回答
690 浏览

javascript - 通过 websocket 将 mp4 直播视频内容流式传输到 mediasource 元素

我有许多与流式传输(通过 websockets)有关的问题,将 h264 视频广播到 mp4 容器内的 MediaSource 元素:

  • 我需要ftyp吗?如果我这样做,我是否需要它与 Uint8Array 位于相同的 Uint8Array 中moov
  • 我是否需要单独发送每个 mp4 盒,或者我可以希望sourceBuffer.appendBuffer(data)将它们整理出来吗?
  • 我需要发送moofmdat一起发送还是应该在不同的呼叫中发送sourceBuffer.appendBuffer(data)
  • 我是否需要任何其他类型的框,专门用于指示时间戳?
  • 我是否需要向 MediaSource 元素指示何时开始播放附加的数据块?
  • 我是否必须设置任何与持续时间/时间戳偏移相关的东西?
  • moov在尝试制作直播时,我应该注意框中的任何关键点吗?