javascript - 直播到浏览器

Question

我有点不知所措了。

我想将直播视频流式传输到网络浏览器。

目前我使用 ffmpeg 将 directshow 直播源作为 webm 流传输到 node.js，然后将流转发到来自 <video> 的 http 请求。元素。到目前为止一切正常。

直播源 -> ffmpeg -> POST [webm] -> node.js -> GET [webm] -> 视频标签

我的问题是源时钟和网络客户端时钟彼此不完全匹配(不足为奇)。对于视频，这不是问题，时不时丢掉或复制一帧并不明显。但是，对于音频，这是另一个问题。据我所知，到目前为止，Chrome(或任何其他浏览器)不会执行任何形式的音频重采样补偿(例如来自 ffmpeg 的 swr_set_compensation)来补偿这种不匹配。相反，当播放缓冲区的样本用完时，我会听到非常明显的音频失真(响亮的哔哔声)。

我的问题是是否可以在网络浏览器中正确播放(使用音频)实时源？

我还没有尝试使用 silverlight 或 flash 进行播放。这可能会更好吗？

Answer 1

将实时媒体(音频或/和视频)流式传输到 Web 浏览器已经有几年的历史了，尽管直到今天它仍在取得进展。这是网络媒体的下一件大事，Youtube 等许多平台已经加入。

典型的直播媒体流场景是:

音频/视频源 > 转码 > 流媒体 > 播放器

在每个步骤中，您都可以使用多种技术可能性。然而，我应该在这里提到，实时媒体流的道路是由专有技术铺就的。

• 音频/视频提要:原始或极轻压缩的媒体格式，不能直接上传到互联网。您需要对其进行转码。您可能需要使用抓取设备(如 PCI Express 卡或 USB/thunderbolt 设备)才能将摄像头连接到计算机上。
• 转码:您拥有软件(ffmpeg、Flash 媒体实时编码器、Wirecast)或硬件解决方案(streamingmedia.com 有大量关于该主题的信息，例如 here)。 H264/AAC 是当前的媒体专业标准，流通常被转码为多种格式(比特率)以适应不同的网络条件。
• 流式传输:您很可能需要定位多个设备来传送您的直播。并非所有设备都支持相同的流媒体协议(protocol)。 HLS 适用于 Apple 设备和 Android > 4.1。 HDS 或 RTMP 在 Flash 中工作，在 Silverlight 中流畅流式传输。您无法使用一种协议(protocol)访问所有设备，因此在这种情况下，您需要像 Wowza 或 Red5 这样的流媒体服务器。流媒体服务器将转码后的直播流作为输入，并为跨设备传输做好准备，同时维持大量并发连接(如今超过一千个连接并不少见)。它还可以添加 DVR 或 DRM 等功能。到今天为止，工作围绕 HTTP 自适应比特率传输展开。大公司为全局交付添加 CDN 支持。
• 播放器:使用自定义布局、隐藏式字幕、广告、聊天模块等各种选项显示您的直播。到目前为止，Flash 在桌面上的实时媒体流方面一直处于市场领先地位。您可以在支持 HLS 的 iOS 和 Android 上使用 HTML5 视频。

MPEG DASH 即将推出，它可以实时处理 HTML5 视频。有一个 JS lib支持直播。我已经对其进行了测试并且它可以工作，尽管我可能还没有将它用于生产案例场景，因为它仍然有点笨拙(按需支持更好)并且目前浏览器支持范围很窄(截至 2013 年 8 月 30 日) 、桌面版 Chrome、桌面版 Internet Explorer 11 和适用于 Android 的移动版 Chrome Beta 是唯一受支持的浏览器)。

我不能对您的解决方案发表太多评论，因为我没有使用 node.js 进行流式传输，但这听起来很有趣。我将使用与您的案例相关的典型解决方案:

设备 > ffmpeg (H264/AAC) > Wowza > 混合播放器 (Flash + HTML5)。

您可以使用 Red5 而不是 Wowza(免费/开源 - 但最近事件不多)。您还可以查看 Nginx RTMP module在 RTMP 之上支持 HLS 和 MPEG DASH。

对于闪存，我使用 Strobe来自 Adob​​e，它支持实时流式传输并且易于设置，并且回退到不支持 Flash 的 HTML5。我用 SWFObject lib 来检测 flash 支持并将 HLS URL 提供给移动设备的 HTML5 视频标签。您可以在 Android < 4.1 和其他移动设备上使用 RTSP。

我应该提到的另一件事是实时通信。对于视频/音频 session ，您可以查看 WebRTC。这两篇文章应该能让您走上正轨。 Here和 here . WebRTC 非常适合一对多、一对一、少对少。如果您需要支持更多并发连接，您可以查看 Licode或 tokbox .