Read red5 live stream with HTML5

Question

How can I read a Red5 (RTMFP) stream using HTML5?

Answer 1

RTMFP and HTML5(WebRTC or Websocket) protocols are supported in WCS4

So you can publish RTMFP stream to the server and play this stream using Chrome(WebRTC), Firefox(WebRTC) or iOS Safari browser(Websocket).

Red5 does not support RTMFP.

RTMFP is a peer-to-peer designed protocol, however server can be used like RTMFP peer, therefore it would be simple client-server connection Flash-Server like RTMP.

Answer 2

Red5 supports different kinds of streaming*, so I don't know which kind of streaming you mean:

• Streaming Video (FLV, F4V, MP4)
• Streaming Audio (MP3, F4A, M4A)
• Recording Client Streams (FLV only)

*source: Red5 on Google Code.

You probably want to use the HTML5 Video Tag and/or the HTML5 Audio Tag to 'play' the stream. Therefor you will need to do some conversion.

Audio streaming

New technique, lot's of browsers and no universal codec support yet.

See browsers + codec's it supports*:

• FireFox 3.6+
  • Ogg Vorbis
  • Wav
• Safari 5+
  • MP3
  • WAV
• Chrome 6
  • Ogg Vorbis
  • MP3
• Opera 10.5+
  • Ogg Vorbis
  • WAV
• Internet Explorer 9 (beta)
  • MP3
  • WAV

*source: Native Audio in the browser.

Video streaming

Currently there's a discussion going on about the HTML5 Video Codec, between Ogg Theora and H.264. So make a conversion to one of those formats. I would recommend H.264 because it looks like Red5 will implement H.264 support in the future.

As with audio as with video.. New technique, lot's of browsers and no universal codec support yet. See for list: HTML5 Video on Wikipedia.

After conversion

The easiest way to check for support of the video and audio tags is to dynamically create one or both with scripting and check for the existence of a function:

var hasVideo = !!(document.createElement('video').canPlayType);

This simple code line will dynamically create a video element and check for the existence of the canPlayType() function. By using the !! operator, the result is converted to a Boolean value, which indicates whether or not a video object could be created.

Alternatively

You can serve 2 streams with a Flash Fallback:

<video src="video.ogg">
  <object data="videoplayer.swf" type="application/x-shockwave-flash">
    <param name="movie" value="video.swf"/>
  </object>
</video>

The video tag is used by default, if not supported the browser will use the flashplayer.

---

Edit:

I now see that Red5 supports H.264 (Live Stream Publishing). Read here how to use the HTML5 video tag with the H.264 codec

You also might wanna have a look at: Adobe's Video Player Widget.

Answer 3

A short answer: you can't. The browsers will not support streams over RTMP (RTMFP), RTP or UDP. Your stream must be sent over HTTP to be accessible (in fact you have to emulate a static file on the server).

Also WebM deserves a few words. In May 2010 Google announced a royalty-free codec for HTML5 viceo purposes. As of now, the latest versions of alternative browsers (Mozilla, Opera, Chrome) has the ability to play it. Only the big ones who have invested good bucks to H.264 resist.

Now days a couple of media servers support WebM. I guess the first was Flumotion to implement it. I also have my own GPL software for live-streaming WebM called stream.m. It is a very early release but if you want to give it a try I'm not stopping anyone. :)