Wowza HTML 5 Only Portal Adaptive Bit Rate Live Stream

Follow

Streaming live in adaptive bit rate no trans-coding required.

Live broadcast that needs live trans-coding can be achieved with a dedicated server.

Streams can be delivered to Mobile using Wirecast or Flash Media Live encoder with AAC (free for MAC).

http://www.adobe.com/products/flash-media-encoder.html

http://www.telestream.net/wirecast/

Influxis may need to add an additional cross-domain.xml to your directory if you would like to use this method!!!

 

Step 1.

Create 3 live streams names in your portal using the live tab.

For this example we will create stream name live1, live2 and live3.

Step 2.

You will first want to set ftp up for your account and place the following 2 files to create in your HTTPContent folder.

You can copy the code in a text editor after changing the rtmpid and desired bit rates and save file as live.smil and place it in your HTTPContent folder.

 

<smil>
<head>

<!-- HTML 5 Ver1 Use "rtmp://rtmpid.live.cloud.influxis.com/rtmpid/_definst " Remove this line!!  -->
<meta base="rtmp://rtmpid.cloud.influxis.com/rtmpid_live/_definst_"/>
</head>
<body>
<switch>
<video src="mp4:live1" system-bitrate="1596000"/>
<video src="mp4:live2" system-bitrate="596000"/>
<video src="mp4:live3" system-bitrate="296000"/>
</switch>
</body>
</smil>

 

The player. You may want to sign up for the free Jw Player and change the following text to match your player.

You can sign up for free here. http://www.jwplayer.com/sign-up/

Change this>>>>>7CR3ti08EeKX8yIACp8kUw

 

 

<html>
<head>
<script src="http://jwpsrv.com/library/7CR3ti08EeKX8yIACp8kUw.js"></script>
<script type="text/javascript">

<!-- HTML ver1 use "http://rtmpid.cloud.influxis.com/rtmpid/_definst_/smil:live.smil/playlist.m3u8" Remove this Comment -- >

var file = "http://rtmpid.cloud.influxis.com/rtmpid_live/_definst_/smil:live.smil/playlist.m3u8";
if ((navigator.userAgent.indexOf('Android 2') != -1) ||
(navigator.userAgent.indexOf('BlackBerry') != -1) ||
(navigator.userAgent.indexOf('Android 4.3') != -1) ||
(navigator.userAgent.indexOf('Android 3') != -1)) {

document.write("<video width= '");
document.write( + "'")
document.write("height='");
document.write( + "'");
document.write("poster preload='true' controls>");
document.write("<source src=" + file + ">");
}
</script>
</head>
<body>
<center>
<div id='my-video'></div>

<script type='text/javascript'>

jwplayer('my-video').setup({
playlist: [{
image: "http://your_image/images/yourimage.jpg",
sources: [{

<!-- HTML5 ver1 "http://rtmpid.live.cloud.influxis.com/httpcontent/live.smil" remove this line!! -->

file: "http://rtmpid-html5.cloud.influxis.com/httpcontent/live.smil",

},
{

<!-- HTML5 ver1 "http://rtmpid.live.cloud.influxis.com/rtmpid/_definst_/live2/playlist.m3u8l" remove this line!! -->
file: "http://rtmpid.cloud.influxis.com/rtmpid_live/_definst_/live2/playlist.m3u8", label: "SD"
},
{

<!-- HTML5 ver1 "http://rtmpid.live,cloud.influxis.com/rtmpid/_definst_/live3/playlist.m3u8" remove this line!! -->
file: "http://rtmpid.cloud.influxis.com/rtmpid_live/_definst_/live3/playlist.m3u8", label: "low"
}]
}],
height: "100%",
width: "100%",
'controls': 'true',
'title': '',
autostart: 'true'
});
</script>
</center>
</html>

 

Save the player HTML.Example (live.html).

You can now navigate to your player with the following example URL;

HTML5 version1 

http://rtmpid.cloud.influxis.com/httpcontent/live.html

HTML5 version2

http://rtmpid-html5.cloud.influxis.com/httpcontent/live.html

Or to embed in your site.

<iframe width="320" height="240" scrolling="no" src="http://rtmpid-html5.cloud.influxis.com/httpcontent/live.html"></iframe>

 

Step 3.

Open FMLE and use the following paths to broadcast your stream.

Stream Settings for FMLE

HTML 5 version 1 FMS URL: rtmp://rtmpid.live.cloud.influxis.com/rtmpid/_definst_

FMS URL: rtmp://rtmpid.cloud.influxis.com/rtmpid_live/_definst_

Stream:live%i

%i represents 1,2 and 3.

You can reference the following image for reference.

 

 

Next open the wrench next to Format and change the key frame to 2 seconds.

 

Step 4.

Start publishing and enjoy.

If you want the stream recorded for playback later you will want to check the record box for live1 stream which is your highest bit rate streamed.

This can be later converted to additional bit rates.

 

 

Have more questions? Submit a request

Comments

Powered by Zendesk