Documentation

Working With Wowza

Introduction

Radiant Media Player is an official Wowza Tech Alliance Player Partners.

Wowza Media Systems provides popular solutions to generate standard-compliant media streams that work well with Radiant Media Player.

In this article we will review how to use a Wowza-based streaming server (Wowza Streaming Engine) to display live, DVR or on-demand media content with Radiant Media Player. This article only outlines some of the possibilities of interaction between Radiant Media Player and Wowza.

If you want to use Wowza SecureToken version 2 with Radiant Media Player visit our blog post on the subject.

Required configuration

We support streaming from Wowza Streaming Engine version 4 and above. Previous versions of Wowza media software are untested and may or may not work depending on your project requirements.

Supported streaming protocols

Radiant Media Player supports the following streaming protocols from Wowza:

  • HLS
  • DASH

Refer to our compatibility table for more compatibility related information.

Typically a Wowza-based streaming URL will look like (HLS in this case):

http://[wowza-ip-address]/[application]/[application-instance]/[stream-name]/playlist.m3u8

This is described further on Wowza support pages here.

Create a Wowza application

First you will need to create an application in your Wowza Streaming Engine Manager be it live or on-demand according to your needs. In this newly created application select the playback types: DASH and HLS. Set up any additional configuration you might need and save your application.

Required CORS settings

  • For streaming with HLS or DASH to HTML5 video, all HLS and DASH resources must be delivered with CORS headers permitting GET requests. Please refer to this Wowza documentation page to enable CORS on your Wowza streaming server.
  • For Wowza 4 but with version below 4.4 you can still enable CORS on your Wowza server as follows:
    • In your application go to the properties tab, under the custom section (at bottom) click "edit"
    • In the following screen click on "Add Custom Property" - in the pop-up window that just opened enter:
    • For path select: /Root/Application/HTTPStreamer
    • For name enter: httpUserHTTPHeaders
    • For type select: string
    • For value enter: Access-Control-Allow-Origin:*|Access-Control-Allow-Credentials:true|Access-Control-Expose-Headers:Date|Access-Control-Allow-Methods:HEAD, GET, POST|Access-Control-Allow-Headers:Overwrite, Destination, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Range
    • Save your new custom property and restart your application. Your HLS and DASH streams should now have proper CORS settings.

Streaming recommendations

Make sure to adhere to our general recommendations for HLS streaming & DASH streaming. To better stream DASH content from Wowza it is recommended to use a recent version of Wowza Streaming Engine (4.5+).

On-demand video streaming (smil-based)

You can either use a HLS-everywhere approach or a DASH with HLS fallback to stream on-demand video content.

On-demand HLS-everywhere

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.19/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - HLS VOD in this example
const src = {
  hls: 'https://your-hls-url.m3u8'
};
// Player settings
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

On-demand DASH + HLS fallback

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.19/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - DASH VOD in this example
// Where DASH is not supported (iOS, older Android) HLS can be used as a fallback
const src = {
  dash: 'https://your-dash-url.mpd',
  hls: 'https://your-hls-url.m3u8'
};
// Player settings
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  dashFirst: true,
  width: 640,
  height: 360,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Live video streaming (Stream Name Groups or smil-based)

As with on-demand video content you can either use a HLS-everywhere approach or a DASH with HLS fallback to stream live video content.

Please refer to the following Wowza documentation to properly generate Stream Name Groups streams from Wowza.

Live HLS-everywhere

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.19/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - Live HLS in this example
const src = {
  hls: 'https://your-live-hls-url.m3u8'
};
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 360,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Live DASH + HLS fallback

<!-- Include Radiant Media Player JavaScript file in your <body> or <head> -->
<script src="https://cdn.radiantmediatechs.com/rmp/9.15.19/js/rmp.min.js"></script>
<!-- Player container element -->
<div id="rmp"></div>
<!-- Set up player configuration options -->
<script>
// Streaming source - live DASH in this example
// Where DASH is not supported (iOS, older Android) HLS can be used as a fallback
const src = {
  dash: 'https://your-live-dash-url.mpd',
  hls: 'https://your-live-hls-url.m3u8'
};
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  dashFirst: true,
  width: 640,
  height: 360,
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

Radiant Media Player

Support

Company

©2015-2024 Radiant Media Player. All Rights Reserved.