Radiant Media Player

Using RTSP/RTP as a fallback to HLS for mobile video streaming

Last updated on March 22, 2016


Introduction

RTSP/RTP streaming is a combined streaming protocol that is frequently available on streaming media servers. RSTP is a protocol used to control streaming media servers. RTSP uses TCP (with default port 554) to maintain end-to-end connection between the client and the server. The media data is however transported with RTP which is a UDP-based protocol. The main difference between TCP and UDP is that TCP includes a network packet retransmission mechanism (when packets are lost) while with UDP packets are sent to the client without any mean to verify that the client actually received those packets. This effectively reduces network overhead but with the risk of packet loss. RTP over UDP is widely used in the broadcast industry. More information on RTSP/RTP can be found here.

Most video/audio streaming to mobile devices today can be done with HLS (iOS and Android 4+) plus optionally MPEG-DASH (for latest Chrome for Android). However there could be some use cases where one could want to reach older or specific devices where RTSP/RTP video/audio streaming could be a valid option - especially for live event.

This blog article will review how to use RTSP/RTP streaming as a fallback to HLS for streaming on mobile devices with Radiant Media Player. This approach could be ported to work with any other web-based media player.


Device support

RTSP/RTP video/audio streaming is only supported on some mobile devices. Adobe Flash does not support RTSP/RTP streaming. Modern Desktop browsers do not support RTSP/RTP streaming natively neither. While it is technically possible to play RTSP/RTP streaming on Desktop with plugins like VLC or QuickTime the general public will probably not have the know-how to install/configure them.

RTSP/RTP video/audio streaming support on mobile devices:

  • Android: most Android devices support RTSP/RTP streaming (from Android 2+ to current Android versions 6+)
  • Most Nokia, Samsung, BlackBerry, Sony Ericsson devices with non-Android OS should support RTSP/RTP streaming as long as they support video/audio streaming
  • iOS and Windows Phone do not support RTSP/RTP streaming - on iOS we can use HLS, latest Windows Phone versions (8.1+) have MPEG-DASH support

RTSP/RTP streaming recommendation

  • Use a low to medium framerate: 12 to 24 frames per second maximum
  • Use a low bitrate when targeting mobile devices: a good range of bitrates would be between 64 and 384 kbps
  • Use H264 baseline profile with AAC audio encoding: other formats/profiles may not be supported on the targeted device
  • Do not use RTSP/RTP interleaved (RTP over TCP) when targeting mobile devices: Android does not support it

The set up

While we could use a user agent detection approach to feed RTSP/RTP to specific devices we have chosen a feature detection approach which could provide more consistent results across a fragmented mobile landscape.

It is to be noted that while we could feed an RTSP/RTP URL to an HTML5 video tag this could confuse some browsers/devices and that is why we opt to feed the RTSP/RTP URL to a clickable link (<a> tag). Depending on the device resources the browser will either attempt to play the stream in-browser or try to find an app within the device that could playback the RTSP/RTP stream.

The following player code is a starting to point to add RTSP/RTP support for live video streaming to your player. Note that with this code we use RTSP/RTP as a fallback to HLS. It can also be applied for on-demand video, though it is to be noted that depending on your use case MP4 progressive download with HTML5 video may be a better option for on-demand video.

HTML layout:

<!DOCTYPE html>
<html>
  <head>
    <title>Radiant Media Player with RTSP/RTP fallback</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  </head>
  <body>
    <script src="https://cdn.radiantmediatechs.com/rmp/v3/latest/js/rmp.min.js"></script>
    <div id="rmpPlayer"></div>
    <script src="js/test-rtsp.js"></script>
  </body>
</html>

test-rtsp.js content:

(function(document, window) {
  'use strict';
  // Our RTSP/RTP link - credit to Wowza: https://www.wowza.com/html/mobile.html
  // This is a test RTSP/RTP feed - use your own when required
  var rtspLink = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov';
  var playerContainer = document.getElementById('rmpPlayer');
  // Our JavaScript function to display the RTSP/RTP fallback
  var _runRTSP = function(rtspLink) {
    var link = document.createElement('a');
    link.href = rtspLink;
    link.innerHTML = 'On Mobile you can watch this video by clicking here';
    playerContainer.appendChild(link);
  };
  // Our JavaScript function to run Radiant Media Player
  var _runPlayer = function() {
    var bitrates = {
      // these URLs may not be up 24/7 - use your own if they become inactive
      hls: 'https://streamingrmp-1479.kxcdn.com/testlive/smil:live.smil/playlist.m3u8'
    };
    var settings = {
      licenseKey: 'your-license-key',
      bitrates: bitrates,
      delayToFade: 3000,
      width: 640,
      height: 360,
      skin: 's3',
      isLive: true,
      poster: 'http://www.radiantmedialyzer.net/images/poster-rmp-showcase.jpg'
    };
    var elementID = 'rmpPlayer';
    var rmp = new RadiantMP(elementID);
    rmp.init(settings);
  };
  var rmpEnv = window.rmpEnv;
 // rmpEnv is a JavaScript object provided by Radiant Media Player 
 // It holds features and device information
 // See https://github.com/arnaudleyder/radiant-medialyzer for more info
  if (!rmpEnv) {
    _runRTSP(rtspLink);
  }
  // If we have HLS to HTML5 video support we go for it
  if (rmpEnv.okHls || rmpEnv.okHlsJS) {
    _runPlayer();
  } else {
    // If HLS is not supported we need to detect Flash support first
    // We do this with swfobject: https://github.com/swfobject/swfobject
    var script = document.createElement('script');
    script.src = '//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js';
    script.addEventListener('load', function() {
    // If we have Flash support then we use it if not we fallback to RTSP/RTP
      if (window.swfobject && window.swfobject.hasFlashPlayerVersion("11.5")) {
        _runPlayer();
      } else {
        _runRTSP(rtspLink);
      }
    });
    script.addEventListener('error', function() {
      _runRTSP(rtspLink);
    });
    document.head.appendChild(script);
  }
})(document, window);
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.