直播到浏览器

Posted 2023-05-08

【中文标题】直播到浏览器

【英文标题】：Live Streaming to Browser

【发布时间】：2014-06-14 11:12:44

【问题描述】：

我有点不知所措。

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

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

live source -> ffmpeg -> POST [webm] -> node.js -> GET [webm] -> video 标签

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

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

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

【参考方案1】：

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

一个典型的直播流媒体场景是：

音频/视频源 > 转码 > 流式传输 > 播放器

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

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

MPEG DASH 快速推出，它可以与 HTML5 视频一起使用。有一个JS lib 支持直播。我已经对其进行了测试，它可以工作，尽管我可能还没有将它用于生产案例场景，因为它仍然有点笨拙（按需支持更好）并且目前浏览器支持范围很窄（截至 2013 年 8 月 30 日、Desktop Chrome、Desktop Internet Explorer 11 和 Mobile Chrome Beta for Android 是唯一支持的浏览器）。

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

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

您可以使用 Red5（免费/开源 - 但最近没有太多活动）来代替 Wowza。您还可以查看nginx RTMP module，它在 RTMP 之上支持 HLS 和 MPEG DASH。

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

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