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

Question

我正在寻找一种从连接到PC的网络摄像头或相机中拍摄并广播实时视频的方法。广播应该在HTML5页面上显示，使用 标签（支持RTP和RTSP，我想）。

查看流的用户不需要安装任何插件或视频播放器，例如QuickTime。

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

这将是我将作为HTML 5视频标记源的链接。

因此，我想知道是否可能，我可以用哪些选项来完成这样的事情。

- user702470

---

子集 https://dev59.com/_XI-5IYBdhLWcg3wqqXh - Ciro Santilli OurBigBook.com

Answer 1

这是可能的。但是，如果您希望获得跨浏览器支持，可能会遇到严重的问题。您可以这样做：为支持HTML5的浏览器提供HTML5视频，而针对不支持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>

还可以参考：HTML5中通过RTSP或RTP进行流媒体传输

。

- Karl Laurentius Roos

---

跨浏览器问题不会是一个问题，因为我只需要支持IE9。 我已经阅读了您发送给我的链接，但我并没有发现它在如何将我的流发送到服务器方面非常有用。您知道有没有一份逐步指南，展示如何记录流，将其发送到服务器，然后如何获取实时流的rtp路径（这将是视频标记中的src）？ - user702470

那么，您使用常规的H.264流应该没有任何问题。 - Karl Laurentius Roos

是的，我已经找到了大部分关于支持文件格式等方面的信息。但是我确实需要在服务器端寻求帮助：如何从我的网络摄像头流式传输到服务器，如何检索路径以在HTML 5视频标签中显示它。到目前为止，我所能找到的有关流媒体服务器的信息都是一些公司提供的Flash服务器流媒体服务（这不是我所需要的）。必须在视频标签中进行实时流媒体，而不使用Flash或QuickTime插件。 - user702470

Answer 2

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

- pg200890

Answer 3

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

- ciphor