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

将实时媒体(音频或/和视频)流式传输到网络浏览器已经成为可能，尽管迄今为止仍在取得进展。这是网络媒体的下一个重大事件，YouTube 等许多平台已经加入其中。

典型的实时媒体流场景是:

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

在每一步中，您都有几种可用的技术可能性。不过，我应该在这里提到，实时媒体流的道路是由专有技术铺就的。

• 音频/视频源:原始或轻度压缩的媒体格式，无法直接上传到互联网。您需要对其进行转码。您可能需要使用 PCI Express 卡或 USB/雷电设备等抓取设备才能将摄像头连接到计算机上。
• 转码:您有软件(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 视频标记。您可以将 RTSP 用于 Android < 4.1 和其他移动设备。

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