How to use VLC live streams with HTML5 video?

Question

I tried HTTP Ogg/Theora and works alright with Chrome but not with Firefox 7.

VLC Configuration:

For testing, I've been streaming the desktop using the following vlc command line configuration:

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:

<video id="video" src="http://my_host_name:8181/desktop" type="video/ogg; codecs=theora" autoplay="autoplay"/>

Any ideas?

Answer 1

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.

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.

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.

The main issues I found were:

1 - Page loading: If you load your page from your file system as opposed to from a web server, the video will not be displayed (any video, vlc or file).

To fix it, just make sure you are loading your content from a web server.

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.

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:

# 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".

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.

So, I guess that for now Flash and RTMP based solutions are still the way to go.