Html 如何在 HTML5 视频中使用 VLC 直播流?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7917905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use VLC live streams with HTML5 video?
提问by Bruno Santos
I tried HTTP Ogg/Theora and works alright with Chrome but not with Firefox 7.
我尝试了 HTTP Ogg/Theora 并在 Chrome 上正常工作,但在 Firefox 7 上却没有。
VLC Configuration:
VLC 配置:
For testing, I've been streaming the desktop using the following vlc command line configuration:
为了测试,我一直在使用以下 vlc 命令行配置流式传输桌面:
vlc.exe screen:// :screen-fps=30 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=800,height=600,acodec=none}:http{mux=ogg,dst=:8181/desktop} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep
vlc.exe screen:// :screen-fps=30 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=800,height=600,acodec=none}: http{mux=ogg,dst=:8181/desktop} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep
HTML5 video tag configuration:
HTML5 视频标签配置:
<video id="video" src="http://my_host_name:8181/desktop" type="video/ogg; codecs=theora" autoplay="autoplay"/>
Any ideas?
有任何想法吗?
回答by Bruno Santos
I struggled with this for a while and I was able to verify that Ogg/Theora work just fine in Firefox 7, Nightly 10 and Opera Next.
我为此苦苦挣扎了一段时间,并且能够验证 Ogg/Theora 在 Firefox 7、Nightly 10 和 Opera Next 中运行良好。
Everything is now also working on Google Chrome. The issue I had with Chrome was that the latest version of Chrome in XP no longer needs the '--enable-webgl' instruction passed in the command line. The only command line entry required in XP is '--ignore-gpu-blacklist' since GPUs are blacklisted in XP.
现在一切都在谷歌浏览器上运行。我对 Chrome 的问题是 XP 中最新版本的 Chrome 不再需要在命令行中传递的“--enable-webgl”指令。XP 中唯一需要的命令行条目是“--ignore-gpu-blacklist”,因为 GPU 在 XP 中被列入黑名单。
In addition, I was able to verify that Chrome works just fine with Web-m/VP8/Vorbis streams. Opera and Firefox are yet to support it.
此外,我能够验证 Chrome 与 Web-m/VP8/Vorbis 流一起工作正常。Opera 和 Firefox 尚未支持它。
The main issues I found were:
我发现的主要问题是:
1 - Page loading:If you load your page from your file system as opposed to from a web browser, the video will not be displayed (any video, vlc or file).
1 - 页面加载:如果您从文件系统而不是从 Web 浏览器加载页面,则不会显示视频(任何视频、vlc 或文件)。
To fix it, just make sure you are loading your content from a web server.
要修复它,只需确保您正在从 Web 服务器加载您的内容。
2 - Live/Real Time Streaming:VLC was used and in order to make it work I had to navigate around WebGL/HTML5 Video security restrictions. It happens that video streams that do not originate from the same web server and web context or sub-context it will not be played due to security restrictions.
2 - 实时/实时流:使用了VLC,为了使其工作,我必须绕过 WebGL/HTML5 视频安全限制。碰巧,由于安全限制,不会播放并非来自同一 Web 服务器和 Web 上下文或子上下文的视频流。
To fix this, just front your application server with an Apache web server and configure your VLC stream to be under a web sub-context from your loaded web pages. For example, in Apache 2.2 enable mod proxy and add the following lines to your httpd.conf file:
要解决此问题,只需将 Apache Web 服务器置于您的应用程序服务器之前,并将您的 VLC 流配置为位于您加载的网页的 Web 子上下文下。例如,在 Apache 2.2 中启用 mod proxy 并将以下行添加到您的 httpd.conf 文件中:
# Mod_proxy Module
ProxyReceiveBufferSize 16384
ProxyRequests On
ProxyVia On
ProxyPreserveHost On
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
# VLC server stream
ProxyPass /desktop/video/stream.ogg http://vlc_streaming_host:8181/desktop.ogg
ProxyPassReverse /desktop/video/stream.ogg http://vlc_streaming_host:8181/desktop.ogg
# If content is on another server (JBoss, Spring, etc...) then uncomment next lines
#ProxyPass /desktop http://server_content_host:8080/streamer
#ProxyPassReverse /desktop http://server_content_host:8080/streamer
If you're also using Apache to store you content, then, and based on the example above, just place your html page(s) under a directory named "desktop".
如果您还使用 Apache 来存储您的内容,那么根据上面的示例,只需将您的 html 页面放在名为“桌面”的目录下。
Conclusion so far:Even though the HTML5 video specs provide room for streams, so far my conclusion is that HTML5 video is not nearly ready for live streaming. In my experiments the video tag would always buffer and I could not find a way to have it disabled and, this ends-up causing a lag of at least 5 to 8 seconds behind.
目前的结论:尽管 HTML5 视频规范为流媒体提供了空间,但到目前为止我的结论是 HTML5 视频还没有准备好进行直播。在我的实验中,视频标签总是会缓冲,我找不到禁用它的方法,这最终导致至少 5 到 8 秒的滞后。
So, I guess that for now Flash and RTMP based solutions are still the way to go.
所以,我猜现在基于 Flash 和 RTMP 的解决方案仍然是要走的路。