Live Streaming Using Wowza EC2

Thank you very much for this post. Although I am currently using Wowza (on EC2) I have yet to set up the JW Player on the pages (just couldn't seem to get the RTMP stream to play properly with HTML5 fallback).

I would really appreciate hearing about how you create the countdown timer as well as the "replay" feature (using JW Player, javascript, and Wowza on EC2).

Also, a quick introduction to Cloudfront would be great -- I've heard about it but can't seem to get a 'common' regular-Joe description of exactly why I would want to use it.

Again, excellent post here -- please keep 'em coming!

Submitted by DLG on Thu, 2011-02-10 19:55.

Hello Jeroen,

I found a flaw with the Wordpress plugin. I'm using jQuery to load content dynamically like this:

$(".foobar").load("http://mysite.com/blog-post/", function() { etc, etc... });

The problem is that when the content from the page is returned, there is no player embedded. I believe this has something to do with the way the shortcode works.

NextGEN Gallery (if you've heard of it) is a very cool plugin that also uses shortcodes to inject content into posts. Content from this plugin does actually get returned with my ajax requests. There must be some small difference in the way JW Player plugin and NextGen Gallery Plugin handle their shortcodes.

Is it possible you might be able to find out what it is and implement this into the JW Player plugin so that the full html of the requested source is returned with ajax?

Thanks for the amazing video player!

Submitted by Joe Pea on Sun, 2011-02-13 03:36.

By the way, i emailed you so you can have my email address in case you need any help with it or more details, just look for my name...

Submitted by Joe Pea on Sun, 2011-02-13 03:42.

@DLG

HTML5 fallback + timing + Cloudfront will def. be in a followup post on this. For a general overview of Cloudfront, you could do a wikipedia search on "CDN". Cloudfront is the CDN offering from Amazon; at large its advantages are the same as other CDNs.

Submitted by JeroenW on Sun, 2011-02-13 08:36.

@Jeroenw

Thanks for the followup. I look forward to your future posts.

I am also VERY interested in also learning about your javascript 'replay' solution. I use FMLE to stream to Wowza (RTMP) live, use a flash application to control the recording of the stream to the server, but currently use one flash-based player for the 'live' stream and a different one for the 'replay' content. I would be very interested in getting rid of all those custom flash players and having a single player (JW Player with HTML5 fallback) for live, iOS, and replay -- it would allow me to get rid of three different 'pages' as I would only need one page/player to deliver all those streams.

It's hard to find good information for the JW Player/Wowza combo, as people on the Wowza forum tend to reference JW questions back here, and Wowza questions here tend to get referenced back to the Wowza forums. It would be nice if there was a forum category that specifically address JW/Wowza customers.

Submitted by DLG on Tue, 2011-02-15 08:19.

The javascript plugin is something I'll wrap up within a few weeks. It's an update of the current "livestream" plugin. I'm not sure whether it'll help for the "replay" though - but that might be something I have to check with Wowza. It should be possible to load a VOD after a certain timestamp, provided it is recorded and available on the server.

I know we're kinda going back and forth on things. We're in constant contact with Wowza though, and are trying to coordinate our support efforts and messaging. It's been a bit messy recently, because both Wowza Server (2.0 release) and JW Player (HTML5 support) have seen such huge updates.

Submitted by JeroenW on Wed, 2011-02-16 03:58.

@Jeroenw

Thanks for the update. I currently set my live streams in Wowza to record, and they are available immediately after I 'stop' the recording (through the VOD playback). The only real issue is that I currently direct users to a different page/player for the "replay".

My stream is the same time each week: 2:00 pm - 4:00 pm each Saturday. So being able to set the player to the RTMP/HTML5 live stream from 2:00 pm - 4:00 pm and then having it automatically change to the VOD stream at 4:00 pm (what you were describing) would work just perfect for me.

Can't wait to hear of your progress. Thanks for the reply.

Submitted by DLG on Wed, 2011-02-16 17:09.

OK, great. I'll make sure to have some sort of VOD failover date in the script as well.

Submitted by JeroenW on Fri, 2011-02-18 07:35.

Seems Live broadcasting using CloudFront is not supported yet.. Any Ideas to overcome this one?

Submitted by jasimmk on Thu, 2011-02-24 23:50.

Live RTMP streaming with Cloudfront is indeed not possible. It probably never will be. However, you can do HTTP adaptive streaming, where Cloudfront is used to distribute the HTTP segments from Wowza.

With the combo FMLE + Wowza EC2 + Cloudfront + JW Player, you can now do live HTTP streaming, to both iOS and Flash. It needs some work to setup though - that's why I was referring to an additional blogpost in the "next steps" section. I will write this post, but here's a quick overview:

*) You use FMLE / Wowza EC2 just like described here.
*) You connect your Wowza EC2 machine to Cloudfront (by setting the origin in CF).
*) You use the "adaptive" branch of JW Player to playback the Apple HTTP Live Streaming stream exported by Wowza, in both Flash and iOS.
*) Since this stream is basically a list of small TS videos, this caches great using the CloudFront HTTP caching mechanisms.

Submitted by JeroenWijering on Mon, 2011-02-28 04:48.

I just wrapped up a plugin that builds on top of this blog post. It allows you to schedule an event's start and end time, reconnect on stream drop and simultaneously stream to Flash + iOS. Here's the full download, including docs, text pages and source code:

http://developer.longtailvideo.com/trac/changeset/HEAD/plugins/livestream/js?old_path=%2F&format=zip

Any feedback is much welcomed!

Submitted by JeroenW on Wed, 2011-03-02 12:52.

great post. I am not sure if this is the correct forum to ask this question, but here goes. It is possible to configure JW player to play a certain video from the webserver by default and then automatic accept a livestream from wowza EC2 when ever it is available ?? if yes how?

Best regards
Christian

Submitted by Christian on Fri, 2011-03-04 10:48.

This is possible; I would simply do it the other way around:

*) Try to connect to the livestream.
*) If the livestream isn't there, the player will send an onError() event.
*) You then do a load() with the video you want to show.

The livestream plugin I offered for download above is basically doing the same, except that it will show a simple status message instead of a video. You should be able to change the code that's in there to do what you seek.

Submitted by JeroenW on Fri, 2011-03-04 11:42.

Thanks alot, I will try that.

Best regards,
Christian

Submitted by Christian on Fri, 2011-03-04 12:51.

Hi I was using the build in x.264 encoder with xsplit broadcaster and everything is working. However I wanted to try the new FMLE 3.2 and this was the error message: The extension provided in the filename is not supported by selected audio/video codec, changing the file extension to supported .f4v extension.

It does not like the.mp4 extension..?

Best regards,
Christian

Submitted by christian on Sun, 2011-03-06 13:54.

Sorry my bad. I had not unchecked the save to file. How is it possible to get the latency lower? I am using the wordpress plugin but if I set the buffer to 0 the live broadcast will not play.?? I have about 3 secounds delay and would like a secound or 2 if possible.

Best regards,
Christian

Submitted by christian on Sun, 2011-03-06 14:07.

3 seconds is already very low, and probably as good as it gets.

Submitted by JeroenW on Mon, 2011-03-07 04:32.

Thanks for your reply. Guess I have to live with the delay:-)

Last question: I have noticed that It takes 8-10 secounds for the player to connect to the stream and start playing. So if the player is set to start on load, it takes 8 secounds before my audience will see anything :-( Is it not possible for the player to connect faster? sorry if this is a stupid question, but I have already spend several hours searcing for the answer without luck.

Best regards,
Christian

Submitted by christian on Mon, 2011-03-07 15:00.

That I wouldn't know. Perhaps your server is slow, or you connect using RTMPT or RTMPE (both are slower than RMTP)? Also, make sure to have a short bufferlenght (the default is 1s, which is short enough).

Submitted by JeroenW on Tue, 2011-03-08 03:35.

I wanted to know if the jw player can run the live broadcast with a basic server. Is it necessary to buy wowza media server to run the broadcast. I use justin.tv for broadcast, If i buy this jw player will it work with the basic server i have?

Submitted by San on Wed, 2011-03-30 09:01.

You need to use a dedicated streaming server (Wowza, FMS). They both need fairly big boxes in terms of specs (CPU/Memory).

Submitted by JeroenW on Thu, 2011-03-31 04:30.

When will the new livestrema js plugin be available in the plugin section? and how would I then run it using the wordpress plugin? am very excited to try it out, but dont know how to run it using the wordpress plug in. Thanks

Submitted by Mary on Thu, 2011-03-31 10:15.

It'll be available "soon" (only testing remains). And we'll update the WordPress module to include support for the plugin.

Submitted by JeroenW on Tue, 2011-04-05 04:02.

Any updates on this plugin?

We are setting up live system now with RTMP Dynamic Streaming using FMLE 3.2 and Wowza 2.2.4

so far we have the streams live and they are transferring between the 3 speeds we are using :-)

Next want to add this plugin you are testing as well as get iDevice dynamic streaming with wowza. ( mode fall over too wowza smil file )

Link above to file no longer works :-(

Regards

-D

Submitted by Morphious on Wed, 2011-04-27 12:52.

Ah, the plugin isn't actually doing the iOS fallback, that was part of the 5.5 player. Here you can see an example of how to do RTMP+HTML5. Just replace the MP4 file with the M3U8 file and you have Flash+iOS compatibility!

http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/18530/

Submitted by JeroenW on Thu, 2011-04-28 01:27.

OK,understand that and I have the RTMP with dynamic and ios with smil as fall back and it works well :-) ( all from live stream ).

I just wanted to get some of the other functions listed above....

1. Try to connect to the live stream if it drops.
2. If the live stream isn't there, the player will send an onError() event.
3. You then do a load() with the video you want to show.

can you please post code on how to do these? Would be Very helpful :-)

-D

Submitted by Morphious on Thu, 2011-04-28 09:37.

Ah, yes, that would require the livestream plugin. For now, you can download the code/docs/tests here:

http://developer.longtailvideo.com/trac/browser/plugins

The plugin will go live in our repo, with a section in our support site. However, there's still some quirks with reconnecting to specific servers (e.g. live-edge Wowza or LiveStreamCast FMS). Those need to be ironed out.

Submitted by JeroenW on Fri, 2011-04-29 02:11.

ok, great, found it, tried to get it all to work.. But I have never done a plugin from source before, is there a how to on this somewhere ?

every time I placed in my plugins, it crashes :(

-D

Submitted by Morphious on Fri, 2011-04-29 18:56.

You should look at the /test/ subdirectory of the plugin. In there are a few basic HTML files that show how to load the plugin.

You don't have to do anything with the source code. Since it's javascript the plugin doesn't have to be compiled, you can simply copy livestream.js to your server.

Submitted by JeroenW on Mon, 2011-05-02 02:26.

ok sorry was gone a few days. OK., so here is what I have so fare. I have the time part working. and during that time period it tries to reconnect. of time it says it ended.

So next,

to set a date? it looks like it has part of the functionality in it... so in here <form onsubmit="return insert()"> set a date.

and in this part var startDate = new Date(); var endDate = new Date(); what needs to be added to make this work?

Sorry I really am not a programmer....

-D

Submitted by Morphious on Thu, 2011-05-05 18:43.

Did you check the /doc/ directory of the plugin link I forwarded? It contains a PDF that explains in detail how to setup the player with the livestream plugin. It looks like you are working with the code from the tests...

Submitted by JeroenW on Fri, 2011-05-06 03:34.

ok last one:-) in your example how to remove the top header bar ( not the close button though ), but keep it on the transparent one?

regards

-D

Submitted by Morphious on Fri, 2011-05-06 12:36.

opps wrong window:-)

OK, so I looked at the doc .pdf that is available. It is much more basic then the examples given....

Goal is to be able to have a page I put in a date for the live event and a time to start and stop.

I am Sure most other users would like to do the same. ( as to not have to go to other site and get a time stamp, then edit the page, ect.

The code in the daterange.html is almost there. Any assistance helping me to get to work would be Greatly appreciated!

-D

Submitted by Morphious on Fri, 2011-05-06 13:33.

can I get a little help please?

Submitted by Morphious on Mon, 2011-05-09 10:22.

The testing pages have that feature because it is required for testing. It's not part of the plugin though.

It's better if you look at e.g. jQuery if you're really looking into adding a date selector and such. That's really not my turf.

Submitted by JeroenW on Mon, 2011-05-09 11:06.

ok Col sure will do that , Thank you!

Submitted by Morphious on Mon, 2011-05-09 11:45.

Any way to get the FLA for the livestream.swf The width of the pic in it is very limited and does not stretch based on size of the payer.

Regards

-D

Submitted by Morphious on Mon, 2011-05-09 12:05.

All I wantto do is add my own BG image, one that is more purple ( to match my site ) and a width of 1920 ( instead of 800 ).. If I send it can you just add it to an SWF or provide me with a FLA , so I can add it on my end?

Regards

-D

Submitted by Morphious on Mon, 2011-05-09 16:52.

Assistance please.... really need to get the FLA for this please. ( unless I can send you my image and you can add to to one and send it back to me. It would be highly appreciated!

Submitted by Morphious on Wed, 2011-05-11 11:37.

Is there anyway that this player supports mobile devices (BlackBerry, Android, iPhone/iPad)? I see that you have a WP plugin but it doesn't seem to support mobile devices. Is there a workaround/solution?

Any help would be greatly appreciated!

Submitted by Nichole on Thu, 2011-05-12 00:13.

@Nichole - Our WP plugin does support these...

Submitted by Ethan LongTail on Thu, 2011-05-12 14:52.

Assistance please.... really need to get the FLA for this please. ( unless I can send you my image and you can add to to one and send it back to me. It would be highly appreciated!

Submitted by Morphious on Fri, 2011-05-13 15:48.

@Morphious - Have you ever head of the saying - "patience is a virtue"?

Submitted by Ethan LongTail on Fri, 2011-05-13 18:38.

@ Ethan - Thanks! How does this plugin support these devices please? Is there an article that I can read on how to set it up?

Also, whenever I enter the code JW player code listed in this article, it shows on my front end! Does anyone know how to fix this?

Submitted by Nichole on Sun, 2011-05-15 14:25.

@Nichole - You should contact us with a link to where it is not working - http://www.longtailvideo.com/support/contact-us

Regarding HTML5 support, here is a bit more information - http://www.longtailvideo.com/support/blog/15095/jw-player-53-html5-and-you

Submitted by Ethan LongTail on Sun, 2011-05-15 18:17.

Assistance please.... really need to get the livestream FLA for this please. ( unless I can send you my image and you can add to to one and send it back to me. It would be highly appreciated! Would like to get this live on my site, but the embedded image is too small width wise.

Submitted by Morphious on Tue, 2011-05-17 16:12.

There is no FLA for this plugin, the SWF is compiled directly from the actionscript code. The embedded image is compiled in as well. You can find it in the directory (back.png).

Submitted by JeroenW on Wed, 2011-05-18 09:57.

HI I hate to sound like a complete idiot on anything, But I have been trying to find a solution on how to compile this for the last day, is there is no FLA that means I cannot do it in Flash pro. So I tried to use Flex SDK mxmlc and compPC but I cannot get these to work. Do you have a page with a description how to do this or how you are doing this? What app are you using to compile and actual command? Sorry I am not a Flash guy!

Regards

-D

Submitted by Morphious on Thu, 2011-05-19 09:56.

You do need MXMLC indeed. Installing it is quite technical, not something I'd be able to help with.

Submitted by JeroenW on Fri, 2011-05-20 04:17.

Hi, I found a bug in the livestream script :-( I have it set up to count down to next live chat,.. and this works. ( we even added Days to it ) But it continuously ties to reconnect. every few seconds it tries, cannot find the stream then goes back to count down. I think it is not meant to reconnect to stream until it is an actual live event. How can I get this fixed?

Regards

-D

Submitted by Morphious on Thu, 2011-06-02 13:18.

I don't see that issue. Do you have an example?

Submitted by JeroenW on Fri, 2011-06-03 03:11.

Sure what is your email address?

Submitted by Morphious on Fri, 2011-06-03 08:37.

jeroen [at] longtailvideo

Submitted by JeroenWijering on Mon, 2011-06-06 02:50.

Any updates on when the new livestrema js plugin will be available in the plugin section?

Regards

Mary

Submitted by Mary on Sun, 2011-07-17 15:28.

Not yet...

Submitted by JeroenW on Mon, 2011-07-18 03:05.

Any update on when the livestream plugin will be available through the wordpress plugin? :-)

Best regards,
Mary

Submitted by Mary on Tue, 2011-09-13 06:48.

Anyone? reading this anymore?

Mary

Submitted by Mary on Mon, 2011-09-26 13:05.

We don't have plans for this yet.

Submitted by JeroenW on Tue, 2011-09-27 02:26.

Can I get the live streaming speed? I want to display to the administrator. Please help me to get that. Thanks

Submitted by Bud on Wed, 2011-10-26 02:09.

we are adobe live media encoder 3.2 to our local wowza server.

can you tell us how to give feed to wowza server from the AMLE 3.2?? for live streaming

Submitted by rakesh sikka on Sat, 2011-11-05 12:49.

Please see the wowza docs for those ...

Submitted by JeroenW on Tue, 2011-11-08 12:04.

It works! I'm a beginner and was able to navigate this tutorial. Thanks!

Now, how do I get the Flash-HTML-Download fallback to work on Amazon EC2?
THIS WORKS
<script type="text/javascript">
jwplayer('mediaplayer').setup({
'flashplayer': 'jwplayer/player.swf',
'id': 'playerID',
'width': '320',
'height': '240',
'file': 'Filename.mp4',
'streamer': 'rtmp://[amazon.EC2.address]/live'
});
</script>

THIS DOESN'T - - NO PLAYER BLACK SQUARE
<script type="text/javascript">
jwplayer('mediaplayer').setup({
'id': 'playerID',
'width': '320',
'height': '240',
'provider': 'rtmp',
'streamer': 'rtmp://[amazon.EC2.address]/live'
'file': 'Filename.mp4',
'modes': [
{type: 'flash', src: 'jwplayer/player.swf'},
{
type: 'html5',
config: {
'file': 'MCTVtest.mp4',
'provider': 'video'
}
},
{
type: 'download',
config: {
'file': 'MCTVtest.mp4',
'provider': 'video'
});
</script>

Submitted by RandyS on Wed, 2011-11-23 04:27.

Sorry, all filenames are the same in the tests. If you want I can send the links via email.

Submitted by RandyS on Wed, 2011-11-23 04:28.

Please email us - http://www.longtailvideo.com/support/contact-us

Submitted by Ethan LongTail on Wed, 2011-11-23 14:13.

kaki

Submitted by ininini on Wed, 2011-12-21 07:45.