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

node.js - 如何在nodejs中流式传输视频

我对视频流真的很陌生,这让我很困惑

前端:Video.js

这个视频我有两条路线

第一条路线

第二条路线

我使用 fluent-ffmpeg 流式传输视频,上面的代码在它的示例中

提供第一条路线时,它会请求 /stream/video._id 路线,但是当我点击网络上的播放按钮时,什么也没发生,请帮助我理解视频流!

谢谢

0 投票
2 回答
2284 浏览

android - 媒体源扩展 (MSE) - 适用于 Android 的 Chrome

据我所知,Media Source Extensions 应该在最新版本的 Chrome for Android 中实现。在Chromium Dashboard上,也有迹象表明这应该可以工作。然而,在实践中它似乎不起作用(或者至少不能使用桌面版 Chrome 中使用的相同 API 来工作)。

我似乎无法让它工作,具体来说,在带有 KitKat 和最新版本的 Chrome for Android 的 Android 手机(三星 Galaxy S4)上运行此示例会导致空白(黑色)视频 - 看起来 webm 文件正在播放(如果我用带有声音的 webm 文件替换源,我可以听到音频),但是没有视频显示。

这是否意味着 Android 版 Chrome 实际上还不支持 MSE?有没有人知道的例子表明它实际上应该起作用?

0 投票
0 回答
388 浏览

javascript - 重用源缓冲区中的字节(MediaSource Extensions)

我正在使用 MSE(MediaSource Extensions API)将字节附加到缓冲区(我正在实现 DASH)。似乎 MSE API 提供的源缓冲区并没有公开正在缓冲的实际字节。

因此,在将字节提供给缓冲区之后:

如果我想重用这些字节 - 我需要从 bytes 变量中获取它们。但这是一个糟糕的解决方案,因为这意味着有双倍的内存占用——每个字节变量一个,每个源缓冲区一个。

通过使用 start 和 end 方法迭代 range 变量,可以很容易地获得缓冲范围:

是否也有可能以某种方式获取缓冲区缓存的实际字节,以便我可以重用它们?

0 投票
0 回答
2223 浏览

html - 通过套接字将视频流式传输到 html5 视频标签

您好,我一直在尝试通过 socket.io 套接字将 webm 视频直接流式传输到 html5 视频标签。客户端和服务器代码如下:

服务器:

客户:

当我尝试运行此代码时,似乎流的第一块附加到了 sourceBuffer,我可以看到我试图播放的视频文件的第一帧(标题和 url),但就是这样。似乎只有第一次调用 appendBuffer 有效。我在某处读到了一些关于播放视频所需的初始化段的内容,但我也看到了一个不使用此初始化段的工作示例,所以我有点困惑。(链接到示例)谁能澄清我是否真的需要这个初始段?如果我这样做,我怎样才能检索这个段的字节范围?或者如果我不需要这个段,我的代码有什么问题?谢谢你。

今天尝试多一点,我发现如果我使用来自http://html5-demos.appspot.com/static/media-source.html的相同文件,此代码实际上可以工作。当我尝试使用来自 http://www.webmfiles.org/demo-files的文件时,代码不起作用。我不知道为什么。

0 投票
1 回答
3658 浏览

javascript - 使用媒体源扩展 API 时视频“卡住”

使用 Media Source API 让我自己的实现工作起来几乎没有运气。

我只是决定看看一个工作示例是否可以在本地正常工作,所以我复制并粘贴了示例中的源代码:http: //html5-demos.appspot.com/static/media-source.html

来源:查看源:http ://html5-demos.appspot.com/static/media-source.html

我没有“test.webm”视频,所以我可以使用自己的 .webm 视频文件。我正在使用的测试文件是 .webm 视频文件 14.6m

结果是它的工作方式并不完全相同。检查控制台我可以看到有一些错误,所以我添加了一个队列来收集视频块,同时来自媒体源的 sourceBuffer 正在更新。

这有助于修复错误,我可以看到播放器上完全加载了视频,但问题是视频永远不会开始播放。它只是一个黑屏,显示视频的时长。

如果我手动将其移动到 1 秒的起点,它将一直播放到最后。我假设这意味着实现工作正常。在黑屏时检查视频的 video.paused 布尔值也会返回错误。目前不确定这是否只是 html 视频的问题。

这是我对示例脚本的更新:


编辑:希望帮助可能遇到此问题的其他人,让我添加解决方案/结果。

事实证明,这是我尝试使用的原始 .webm 视频文件的关键帧问题。似乎 MSE API 非常挑剔,即使它是它需要的确切文件格式。我最终从以下网址下载了 .webm 视频: http ://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5

我计划现在继续使用这些其他文件格式。

0 投票
1 回答
3974 浏览

video - 将媒体源扩展与原始视频帧一起使用

我正在尝试将 H264 视频从服务器实时流式传输到浏览器。H264 流没有包装在 MP4 容器中,而是以原始 H264 帧的形式(通过 Web 套接字)找到它通往浏览器的方式。

问题是:是否可以使用原始帧而不是 MP4 或 WebM 等文件容器来提供媒体源扩展?

MPEG-DASH 等 mp4 解决方案在低延迟、多视频同步和其他我需要实现的元素方面没有给我所需的灵活性。

0 投票
1 回答
2377 浏览

javascript - 如何生成 webm 视频的初始化段以与 Media Source API 一起使用

我正在构建一个使用 MediaRecoder API 将重新编码视频从网络摄像头拆分并将所有部分上传到服务器的小型应用程序。
我看到使用 Media Source API,我需要播放第一部分,然后播放任何其他部分。

根据http://www.w3.org/TR/media-source/#examples我需要文件开头的“初始化段”。

如何在 JS 中生成 WebM 的“初始化段”,以便我可以播放我选择的任何部分。有没有任何库?(我对WebM字节流格式一无所知)

0 投票
1 回答
393 浏览

video-streaming - 未使用 MediaSource 和 webRTC 流媒体删除媒体播放器

我正在尝试使用接收端的 mediasource API 将多个媒体文件(按顺序)从一个 webRTC 设备流式传输到另一个设备。这些文件是在页面上的相同视频源元素上接收和播放的,但每次我流式传输一个新文件(或再次播放相同的文件)时,播放器会显示在 Google chrome://media-internals/ 但其他播放器从先前的传输中也仍然显示。

我担心的是,当为新流(来自 webRTC)分配新媒体源时,资源已分配但未释放(或者更可能我没有正确执行某些操作)。

关于如何显式释放或远程分配和播放的媒体源有什么想法吗?

0 投票
1 回答
847 浏览

video - 使用数据通道 + 媒体源扩展 API 发送本地视频

我一直在玩 WebRTC peerconnections,但似乎我正在扩展 peerconnections 和 p2p 视频的可能性(至少现在是这样)

现在,我一直在研究 Media Source Extensions API,可能会创建一个替代解决方法。

上周左右一直在使用 MSE API,到目前为止能够使本地 .webm 视频文件正常工作 - 即将视频文件分块并将其显示在 html 视频元素上。

接下来,我尝试让节点服务器将视频分块并将其发送到客户端,然后客户端使用 MSE API 显示视频(MSE 应该如何使用的实际示例)

现在我想知道是否可以通过 p2p 数据通道从 html 视频元素发送本地视频,然后使用 MSE API 在接收器客户端上拼接视频。这几乎是在重新创建 WebRTC 对等连接现在已经在做的事情

只是想知道是否有人尝试过这个,因为我怀疑人们是否会正常使用这些 API。不管怎样,我很快就会尝试这个:]

0 投票
1 回答
6594 浏览

javascript - MediaSource:未捕获的 InvalidStateError:无法在“SourceBuffer”上执行“appendBuffer”:此 SourceBuffer 已被删除

我正在尝试使用第一个演示 MediaSource 进行尝试,但我无法播放视频。我使用的来源是一个 webm 视频“big-buck-bunny_trailer.webm”。我不断收到“Uncaught InvalidStateError: Failed to perform 'endOfStream' on 'MediaSource': The 'updating' attribute is true on a or more this MediaSource's SourceBuffers.”。我也处理了 sourcebuffer 更新标志,但它似乎仍然不起作用。