TheRealTimeWeb.com: Playing a live FMS stream using VideoDisplay in Flex2

Playing a live FMS stream using VideoDisplay in Flex2

Posted by Stefan Richter in Flex | 26 Comments

According to the Flex docs this is possible: "The VideoDisplay control lets you play an FLV file in a Flex application. It supports progressive download over HTTP, streaming from the Flash Media Server, and streaming from a Camera object."
But how do I attach a NetStream (which is playing my live stream) to the component for display? It seems to only have an attachCamera method and a source property, but no attachNetStream method.
It appears that this component manages it's own NetConnection and one has to feed it with a full RTMP string (which can point to a pre-recorded stream or a live stream):

view plain print about

1viddisp.source = "rtmp://myserver.com/app/live_stream_name";

The syntax above works for me if I have a live stream called 'live_stream_name' playing.
But this a bit sucky for my particular app which consists of a broadcaster and a receiver. Both parts manage their own NetConnection (the text chat I'm using needs an NC regardless of video) and the fact that the VidoDisplay component establishes its own connection results in errors (the NC's callbacks I use elsewhere are not found for the component's connection).
What's also confusing is that on the broadcasting side I can use the component just fine via attachCamera and then a separate attach to the NetStream. So the component works on one end but not the other (if that makes sense). There's probably a way of hacking it so that it can use your own NC but that seems to be overkill here.

It would be good if you could pass the component a reference to a playing NS instead of a full RTMP address. For now I'll have to roll back and use a plain Video object to make this work.

Tweet Follow @stefanrichter
Posted on January 17, 2007 at 6:32 PM. 21825 views. 26 comments. Print

TweetBacks

Comments

[Add Comment] [Subscribe to Comments]

#1 by Renaun Erickson on 1/17/07 - 7:06 PM

I end up using NetStream and the Video object with my own controls. It is a gap that some will need to fill, write a nice VideoPlayback/Display component.
#2 by Stefan on 1/17/07 - 8:06 PM

yeah I neded up going down the same route, works for me. I found the docs a bit misleading and the component kind of hard to grasp
#3 by Harry on 1/18/07 - 12:45 PM

VideoDisplay is a nice high level wrap-up of video functionality. However it should let users digg further down for better control by providing access to the (hidden?) underlying netstream object
#4 by [a /] on 2/14/07 - 11:04 AM

I've had a play with the Flex VideoPlayback component. You are correct it does have annoying limitations. For now its good ole NetStream and Video Class

a
#5 by Chris McDonough on 6/11/07 - 8:06 PM

It appears that the VideoDisplay replacement devised here http://www.cynergysystems.com/blogs/page/keunlee?e... might let us get around this (see the example used). I'm not sure why all the class sources needed to be copied wholesale from the mx.controls namespace to do this and I haven't tried it though.
#6 by a on 9/10/07 - 5:02 PM

Actually I was very very wrong. you CAN attach the Camera to a VideoDisplay and you CAN attach the NetStream to the VideoDisplay.

Here is a code snippet, for attaching a NetStream for rtmp streaming of an FMS or Red5 server. The code was written for a Flex application within the <mx:Script> tag

var vUi:UIComponent = new UIComponent()
var _v0:Video = new Video(640, 360);
vUi.addChild(_v0);
addChild(vUi);

var _s:NetStream = new NetStream(_nc);
_s.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);

_s.client = this;
         _v0.attachNetStream(_s);         _s.play("Transformers");

It works perfectly
#7 by a on 9/10/07 - 5:08 PM

Sorry wrong code above. This is the code you need. "vid" the id of a VideoDisplay object on stage

_cam = Camera.getCamera();
_cam.setMode(220, 165, 30); _cam.setKeyFrameInterval(60); _cam.setQuality(0,85);

vid.attachCamera(_cam);

The camera captuere
#8 by Jan Petzold on 10/26/07 - 10:24 PM

Still no clue regarding Flex and live streaming - anybody has a working example? Ondemand files work quite well, but no matter if I try using <mx:Script> or a VideoDisplay component - it just never works.
#9 by Stefan on 10/27/07 - 9:16 AM

you'd have to extend VideoDisplay or simply roll your own component using the Video object in Flex.
#10 by Jan Petzold on 10/27/07 - 2:30 PM

Stefan, thanks for your reply - I've already created a component, problem is, that it just never "displays" on the screen - no matter if I choose a live stream or ondemand stream as source. Do you have a working example for this? Thanks.
#11 by Stefan on 10/27/07 - 10:15 PM

Jan, nothign hand right now sorry. It may not display in Flexbuilder's design view but if done correctly will show the video once compiled and working.
#12 by Stephen on 12/6/07 - 8:31 PM

I saw a great example of streaming video in Flex. They build there own video object and so forth and it uses Red5 server (free FMS). Check it out:

http://www.rockonflash.com/blog/?p=12
#13 by DanO on 3/1/08 - 12:17 AM

First, I've also spent countless hours of frustration messing with the VideoDisplay component in an attempt to get it to display a live stream off flash com server. I read all the posts on this page and still it seems there is no solution for this besides "rolling your own component". Unfortunately, I'm not an expert AS developer and doing such thing would take quite a while even if I was. I'm looking for a quicker and easier solution. Anybody have any other ideas?
#14 by Joeflash on 3/31/08 - 7:49 AM

One alternative is to bring the FLVPlayback component into flex with a custom skin: http://www.flashcomguru.com/index.cfm/2007/7/18/fl...
#15 by Chad on 11/14/08 - 1:28 AM

well I got the live streams to work as expected dynamically using a VideoDisplay object and passing in full RTMP uri's... now my problem is the fact that I can't pass it a NetStream and now my client numbers are going through the roof.

Used to be 1 connection could stream 3 streams over that one NC... now if you're using this component!

Looks like I'm going to have to extend and override this thing and hopefully find where they get to the nitty gritty under lying videoPlayer component and pass off the NetConnection object.

::sigh::
#16 by Maurizio on 2/3/09 - 5:42 PM

Can you, Chad, post the solution you found to use the VideoDisplay object to play a live stream?
I'm publishing a video from my camera from a Red5 server (thanks to the publisher demo) and I don't know which rtmp URI to pass as a source to the videoplayer.
#17 by Jon Raynor on 3/18/09 - 3:06 PM

I haven't had any luck with Flex 3 with FMS media server 3.5.

I can get the streaming part to work as I look at the FMS admin console I can see that streams that are created, but I cannot get them to display...

Anyone having any luck.

All, I am trying to do is to publish and stream and view it.
#18 by Max G on 5/14/09 - 6:28 PM

Jon,

I'm seeing exactly the same problem with Flex 3 and FMS 3.5. Upload from a live camera to server appears to be working fine and event the playback seems to work, at least I get the right sequence of events, see the number of upload/download bytes incrementing in the admin console..

But then my playback VideoDisplay simply freezes at the very first frame and that's about it. No playback for live streams.

Did you manage to figure out what's wrong?
#19 by simczik on 6/27/09 - 5:04 PM

Hi, I have a little problem. I want to make a simple ap playin' FLV videos located on the HDD. This ap will have 1 VideoDisplay and few buttons changing the FLV files displayed in the component. I thought it would be done buy changing the VideoDisplay.source but it doesn't work :-(

Can u help me?

Let's say u have VideoDisplay, Button1, Button2. VideoDisplay doesn't have any source. When u click on the Button1 or Button2 the VideoDisplay recieve an URL to the file1 (by button1) or file2(by button2) and start playin' the video.
#20 by Ken Street on 7/7/09 - 6:02 PM

I am pleased I found this blog because we were struggling with trying to link a video conference in stream to a second VideoDisplay control in Flex 3. The out stream worked fine but as previous comments state there is no simple way to attach the NetStream from the FMS server. We reverted to the normal Video control for the input side leaving the output still on the VideoDisplay control and now have the following code:
mic = Microphone.getMicrophone();
mic.addEventListener(StatusEvent.STATUS, this.onInputStatus);
camera = Camera.getCamera();
camera.addEventListener(StatusEvent.STATUS, this.onInputStatus);

mic.setUseEchoSuppression(true);
mic.setSilenceLevel(0, 2000);
mic.rate = 11;
camera.setKeyFrameInterval(15);
camera.setMode(240,180,15,false);
camera.setMotionLevel(35,3000);
camera.setQuality(40000/8,0);

videoS2 = new Video(179, 179);
videoCanvas.rawChildren.addChild(videoS2);
videoS2.x = 0;
videoS2.y = 200;
videoCanvas.invalidateDisplayList();

videoDisplay1.attachCamera(camera);
outstream = new NetStream(nc);
outstream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
instream = new NetStream(nc);
instream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

outstream.attachAudio(mic);
outstream.attachCamera(camera);
outstream.publish("uid" + appUserDetailsID);

videoS2.attachNetStream(instream);
instream.play("uid" + userSelect[0]);

AND it works! BUT the videoS2 display which shows the in video stream is only some 4 pixels square - why when it is set to 179 square? ANY help suggestions would be much appreciated!!
#21 by Ken Street on 7/10/09 - 1:55 PM

Fixed it. The fact that the new Video object was set at 179x179 was not acted upon but the display worked when these two lines were added after setting the video x,y co-ordinates:
videoS2.height = 179;
videoS2.width = 179;
#22 by Robert on 8/14/09 - 3:41 AM

Weird how there seems to be this gaping hole in the Flex and actionscript Video component. When you're forced to use one (the Video component) by CDN's who have their own prescriptions for NetConnection (like adding parameters), it seems almost impossible to make it play a live stream from the CDN's FMS. I've been trying for a few days now to make it work to no avail. FLVPlayback has the "isLive" property that makes it somewhat easier. But, again, if you need access to the NetConnection object for customization, it seems you're out of luck. Same goes for Flex's VideoDisplay component. My CDN requires the addition of a couple of parameters to the NetConnection call and the passing of the live stream name to the ns.play() call. So far I can't figure out how to make that happen in Flex 3. If I figure it out I'll post the answer.
#23 by Stefan Richter on 8/14/09 - 9:13 AM

Robert, are you using Limelight? Getting access to the NC object can be a pain in that case where you have to call server side methods to start the stream. I have some hackish code that does it, I'll put up a blog post about it now (give me half an hour).
#24 by Robert on 8/14/09 - 1:53 PM

Not using Limelight. Internap. Although maybe I'll check out Limelight.

VOD seems so easy - get a NetConnection, pass it to your NetStream instance, attach the NetStream, play it, and attach it to your Video object. Seems to be no simple way, though, to tell the process that this is "live".

I've got 6 players now on my machine that will play a live stream. Not a one of them will let me at the NetConnection object to add the parameters my CDN needs. They just don't seem to expose it. I must be missing something simple.

I'll look forward to your post. If I figure out a solution I'll post as well.
#25 by Stefan Richter on 8/14/09 - 1:56 PM

the post is now up on the homepage
http://www.flashcomguru.com/index.cfm/2009/8/14/fl...
#26 by twiggy on 8/18/10 - 5:08 AM

If anyone comes along and reads this I think the missing link with VideoDisplay and a live stream is the live attribute on it.

You have to set this to true or it won't work...no error message or anything, just doesn't work.

So

create a mx:VideoDisplay item with live="true".

Then later in code you can set the source ="rtmp://localhost/someapp/mylivestream" and that should do it.

I'm also calling play() on the VideoDisplay which might not be doing anything...but you never know.