Search code examples
htmlred5rtmfp

Read red5 live stream with HTML5

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

Solution

  • 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.