如何在 HTML5 中流式传输实时视频？答案

【问题标题】：How to stream live video in HTML5?如何在 HTML5 中流式传输实时视频？
【发布时间】：2011-04-11 15:48:03
【问题描述】：

我正在寻找一种方法来播放从植根于 PC 的网络摄像头或摄像头拍摄的实时视频。广播应该使用标签显示在 HTML5 页面中（支持 rtp，我认为是 rtsp）。

观看流媒体的用户不必安装任何插件或视频播放器，例如 QuickTime。

我需要视频为 mp4 格式，例如：rtsp://www.mywebsite/streaming/video.mp4

这将是我作为 html 5 视频标签的 src 放置的链接。

所以我想知道这是否可能，我有哪些选择来做这些事情。

【问题讨论】：

子集stackoverflow.com/questions/1735933/…

标签： html streaming mp4 rtsp rtp

【解决方案1】：

这是可能的。但是，如果您正在寻找跨浏览器支持，您将遇到重大问题。您可以做的是向支持它的浏览器提供 HTML5 视频，然后为不支持它的浏览器提供 QuickTime。

<video src="stream.mp4">

    <!-- Don't support <video> -->
    <object>
        <param name="src" value="video.mp4" />
             <param name="autoplay" value="true" />
             <param name="type" value="video/quicktime" height="256" width="320" />
                  <embed src="video.mp4" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" />
    </object>

</video>

另见：Streaming via RTSP or RTP in HTML5

【讨论】：

跨浏览器问题不会有问题，因为我只需要支持IE9。我已经阅读了您发送给我的链接，但我发现它对于如何将我的流发送到服务器并不是很有用。你知道一个分步指南，它展示了如何录制流，将其发送到服务器，然后如何获取直播流的 rtp 路径（这将是我在视频标签中的 src）
那么您应该不会对常规 H.264 流有任何问题。
是的，我已经找到了大部分关于支持的文件格式的信息和类似的东西。但我确实需要服务器端的帮助：如何从我的网络摄像头流式传输到服务器，如何检索路径以在 html 5 视频标签中显示它。到目前为止，我在流媒体服务器上所能找到的只是一些在 Flash 服务器流媒体上提供流媒体的公司（这不是我需要的）它必须是视频标签中的实时流，而不使用 Flash 或 QuickTime 插件

【解决方案2】：

我认为现在不可能“欺骗”HTML5 浏览器将实时视频流封装为“.mp4”文件。我相信 HTML5 在不久的将来会考虑支持实时视频。你能做的就是等待。 :)

【讨论】：

【解决方案3】：

为了获得最大的兼容性，我们的视频工作流程如下所示，在 MP4 容器中制作一个使用 H.264 基线视频和 AAC“低复杂度”音频的版本，并在 Ogg 容器中制作另一个使用 WebM (VP8 + Vorbis) 或 Theora 视频和 Vorbis 音频的版本。我认为这种组合可以解决您的问题，并且可以在大多数浏览器上播放。您应该至少需要两个版本的视频才能在所有浏览器中播放。

【讨论】：