TheRealTimeWeb.com - Applications

FMS Bandwidth Tester App Works Again

Tue, 13 Dec 2011 14:32:00 +0100

I've just fixed the (now ancient) FMS bandwidth tester. It's based on some pretty old code by Adobe engineer Pritham Shetty and wasn't working since I rebranded the blog - well now it's functional again and I plan to connect it to a new server soon.

The neat thing about this FMS app is that it checks bandwidth both to and from the server - this is very useful if you build RTC based apps that utilise things such as webcam video or live audio.
If right now the speed results seem low then that's probably due to the very old machine I'm using to host the app... Believe it or not, the server is still the same one from back in 2005!

FMS bandwidth tester

Getting Started With node.js

Mon, 26 Sep 2011 21:46:00 +0100

I've been spending a little bit of time with node.js in the last few days and although I have not yet built anything meaningful with it I'm already quite impressed by it - despite it being JavaScript based :-)
In case you don't know what node.js is, let me give you a short intro (if you are familiar with FMS's AS1-based server side syntax then you'll quickly feel at home with node). Combine this with node's event based nature (everything in node runs asynchronously with extensive use of callbacks) and you can see how there is also some similarity with the events you may be used to from ActionScript3.
The fact that node is both asynchronous and single threaded means that every operation it runs is non-blocking, making the platform extremely scalable when it comes to handling large numbers of concurrent requests. LinkedIn for example have apparently had great results porting some of their apps from a Rails backend to node. Reportedly they went 'from running 15 servers with 15 instances (virtual servers) on each physical machine, to just four instances that can handle double the traffic'.

For me at least that sounded interesting, although I have to admit that I do not have any scaling or capacity issues using any other (thread based) server technology so far. Instead what attracts me to node is the similarities both in lamguage and syntax as well as in functionality (node is great for building real-time apps with add-ons such as socket.io).

The most-used example of a simple node.js app is probably this http server from the node.js homepage: var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, "127.0.0.1"); console.log('Server running at http://127.0.0.1:1337/'); It almost requires no explanation at all. Once started it will respond with 'Hello World' to every request. But as I said I have not actually got any code of my own to share right now, but wanted to point you to a great resource for getting started with node which is this page from smashingmag. It has a ton of links to other sites, all containing tips and tricks around node. I found nodebeginner.org particularly useful, but please judge for yourself.

Do you use node? Maybe in combination with a Flash based frontend (I think this would make for a great duo...)? Please leave a comment if you do (but don't hesitate to comment if you don't), and include some demo links if you can.

Multicast Chat Across Devices and Platforms

Mon, 04 Oct 2010 13:46:00 +0100

In preparation for my session at Streaming Media Europe in a couple of weeks I had a play with the IP multicast feature in Flash today. Tom Krcha posted an excellent example on his blog a few months ago which demos this feature very well.
It's worth pointing out that this code works in a LAN setup, not over the public internet. This also means that Cirrus (aka Stratus) is not required for the P2P introduction - Flash Player can handle this itself on a multicast enabled LAN. Therefore you can try this using the devices on your local network, but not with your friends elsewhere on the net.

I wanted to try Tom's example on my iPad and Nexus One. The phone was easy since it can run Flash Player 10.1 and Tom's example app worked fine there. But what about the iPad?
Since I have got an Apple iOS developer account I am able to use the iPhone packaging feature in Flash CS5 to build iPhone and iPad applications. All I needed to do was to port Tom's Flex example to Flash as using the Flex framework on a device is not the best thing to do - at least not until themobile-optimised Hero SDK ships.

This blog post is therefore just a record to say: it worked and it worked well. Porting took only half an hour, and I then spent another half hour fine tuning a few bits and pieces, nothing major. The photo shows the app running on my Windows 7 netbook, the Nexus One and the iPad. I also had it running on my iMac and in the Flash IDE.

Say what you want about Flash on devices, there's something very cool about getting your code to run so easily in so many places. And remember this app now not only spans devices but also platforms and even runtimes since the iPad app is practically AIR based.

You can download my Flash app including sources here, but note that you need an iOS developer account to compile and install it on an iDevice.

Securing Remoting Access To ColdFusion CFCs From Flex

Mon, 21 Jun 2010 14:01:00 +0100

Today I was working on a Flex application which uses a lot of Remoting calls to a bunch of ColdFusion CFC methods. I wondered what the most efficient way of securing these methods would be since they are effectively wide open to the world as they all (have to) specify access="remote". This means that anyone with a web browser can invoke the methods and they will even return nice error messages when certain parameters are missing.
One way of restricting access would be to run all Remoting calls through an intermediate page or CFC which handles authentication and access control and which in turn invokes the (now private) CFC methods. I found this a bit cumbersome and I also knew that there was a better way - I remembered the setCredentials method back from the AS2 days. You can see this described in greater detail by Brandon Purcell in his MAX session Securing Applications from 2003(!), but unfortunately it is not directly usable in today's Flex world.

While Brandon's example is great, and Ray Camden also has some details to add, neither example had all the pieces I needed, particularly an example of not just authenticating a Flex application properly with a CFC but also how to log out again (and to jump ahead, simply running a cflogout tag did not work...).

I ended up using a combination of what Ray did, plus roughly the logic Brandon deployed, and added a Flex example to show (like Ray) how to call a secured and an unsecured CFC method. In addtion I added a separate, explicit call to Flex's setRemoteCredentials() on the RemoteObject class in order to trigger the cflogin logic in ColdFusion's Application.cfc.

Unfortunately I cannot show you a working example, but I am providing the sources for the Flash Builder project and CF files. Note that my example is set up to run on localhost, and I also specified a compiler flag of -locale en_US -services "services-config.xml" in Flash Builder. My services-config file is also included.

Here's how I structured my example:

1) Application.cfc: this file contains an onRequestStart which gets invoked on every request to this application, including cfm pages as well as cfcs. It contains a cflogin tag which executes only if the user making the request has *not* yet been authenticated. Inside the cflogin tag is a cfif tag which logs the current user in as long as the necessary credentials are passed in - this happens by using setRemoteCredentials() on RemoteObject in Flex/ActionScript.

2) MyComponent.cfc: This file contains all the remote methods we call from Flex. One method (called 'normalMethod') can be called by any user (unauthenticated), another can only be called once logged in, and a third is used to log out (more details on that below).
Access control is provided by using the CFC's built-in roles attribute. An authenticated user is assigned a role of 'Client' and the 'secureMethod' in the CFC is locked down by specifying that role.

3) The Flex Application: this is slightly more complex than it needed to be for the purposes of this example, but hopefully it's not too confusing. Rather than trying to explain the classes in detail please feel free to post any questions you may have in the comments below.

Log Out Issues
In detail, what I was seeing was that I could still invoke the secure method from Flex after I had run the CFC's logout method and included cflogout tag. Switching directly to the browser - keeping the Flex app open in another tab - did NOT allow me to invoke the secure CFC method, so from that angle the cflogout tag appeared to had done its job.
To really 'kill' the user's session inside the Flex app itself I had to explicitly call setRemoteCredentials again from Flex passing invalid login credentials. I have a theory on what is happening: the logout method does do its job as described and the user is actually logged out, but only until he tries to invoke another CFC method via the Flex app. As soon as that happens, Flex will re-send the previously set credentials (username, password) and re-authenticate the user using the cflogin tag in Application.cfc. This can apparently be confirmed by invoking the CFC method directly using a web browser both after the logout method has been called and then again after another CFC method has been invoked via Flex. Calling it via the browser after invoking logout in Flex results in a failed request, but after the next call from Flex it succeeds in the browser. For that reason I recommend to send a setRemoteCredentials(null, null) if you don't want the Flex user to be able to call any further methods unless he re-authenciates (bascially logs in again via some sort of login form which re-runs setRemoteCredentials() using valid credentials.

I tried to find other ways for logging the user out and looking through some of the AS sources in Flex, it appeared that ro.channelSet.authenticated may be a good flag for deciding if a user is logged in or not, however it always returned false for me regardless of whether or not the user was logged on... I tried logging the user out via ro.channelSet.logout() as well as ro.logout() but neither function seemed to actually do anything. If you have any idea if and how this is used with Remoting please let me know.

So all in all, keeping the slight caveats above in mind, the combination of CFCs with role based ecurity applied and the setRemoteCredentials() method on the RemoteObject class in ActionScript work well and are easy to implement. Unfortunately the documentation in Flash Builder only covers part of the process, and the CF docs cover another part - the CF side. It takes some work to string both parts together, but once implemented the process works pretty well. Now that I got my head around it I am ready to hook this into my control panel application.
You can download all sources (Flex and CF) in form of a Flash Builder project file here - note that you should rename the downloaded FlexCredentials.zip to FlexCredentials.fxp as it is a Flash Builder project file.

Flickr Image Search using YQL and Flex

Tue, 02 Mar 2010 15:36:00 +0100

A few days ago I spotted a Twitter conversation between Simon Whatley and Christian Heilmann which brought YQL back into my mind. In case you don't know, YQL stands for Yahoo Query Language is 'an expressive SQL-like language that lets you query, filter, and join data across Web services'. In short, it's a sort of API to a lot of other APIs, and then some. It's also very easy to use since it's effectively just like SQL. For example you can use this example query to get details about a specific Vimeo video. But not only can you query web services using YQL, you can even scrape HTML pages which do not expose an API - very powerful stuff.

Flickr is one of the APIs that's also supported and I figured that it would be a great addition to one of my products, Scribblar, if a user could get easy access to all the images for a given keyword which are released under a Creative Commons license. Again this is very easy with YQL using a query such as this one.

I've created a simple Flex app which wraps the functionality provided by YQL and the Flickr API. You can check it out here. The source overview is here, and the downloadable zip here.

Radical Flash Chat - Video Chat Framework

Tue, 19 Jan 2010 23:26:00 +0100

I've just received an interesting email from Jaromir Sivic, a czech developer who sent me news about a project of his called 'Radical Flash Chat'.
While I haven't tried myself yet, Jaromir describes it as a framework that enables PHP and ASP.NET developers to build and manage their own Video Chats, Flash Chats and other multimedia videconferencing applications easily in a very short amount of time. The configuration screen certainly looks quite promising, listing both Wowza and Red5 as a Media server option. There's also an online demo that you can try (that's if it is online, which seems to be fairly intermittent).

I encourage you to try Jaromir's product and share your feedback with him, or indeed below in the comments.

I'm happy to post any news about similar projects or other news items, just drop me an email.

Flex Help Needed - Issues with Image Canvas

Tue, 22 Dec 2009 17:15:00 +0100

This is what happens when you stand on the shoulders of giants - you don't quite know what you are doing, at least in my case.
I've been working on a way to dynamically load images into a Flex app and set them as the tiled background of a Canvas component. Luckily I spotted creacog's work which I adapted a little bit for my needs. You can see the results here.

So far the image loading and displaying as a borderskin of the Canvas works, but as you can see when you drag the box around is that as soon as scrollbars appear the image is no longer rendered and the Canvas's background color it displayed instead.

I'd appreciate any tips on this. You can see the sources by right-clicking the app or directly from here (the .zip is here).

Feel free to use and reuse this code if you find it useful, and remember to credit creacog.co.uk who has done the hard work on this.

My First iPhone Game - Built with Flash!

Mon, 05 Oct 2009 21:11:00 +0100

The time has finally come to lift the lid on this. As you've probably all heard by now, Adobe today announced a brand new feature for the upcoming Flash Professional CS5: Export as iPhone app. Insane! Essentially what this feature will allow you to do is a cross-compilation from SWF to Objective-C - the resulting app is a totally legit iPhone/iPod Touch app which can be submitted to the Apple app Store. In my case that process has already happened, and the app has been approved!

I will post more details about the development process when things have calmed down a little, but for now I'm super exited to announce the immediate availability of my first application for iPhone and iPod Touch: my good old Just Letters game.
I figured this Flash game of mine which stems back from around 2005 would make an ideal candidate for a touch screen device, and I think I haven't been completely wrong with that assumption. Not only is Just Letters one of the first games built in Flash to ever hit the App Store but I have a feeling it is the very first game that use Flash Media Server to provide the real-time features.

In celebration of the launch I am distributing 10 free voucher codes for the US App Store (sorry, the vouchers do not work on App Stores outside the US). The game normally retails for $0.99. Just leave a comment below and I will pick a random 10 later today (leave your email too!).

Please help me spread the word about this game by blogging about it, tweeting or getting your grandma to buy a copy. Don't forget to review and rate it on the App Store too. please point people to the following age when you link to the game: http://www.muchosmedia.com/justletters (muchosmedia is my company, the 'official' developer behind the game).
Last but not least, if you need the game's icon or some screenshots then you can grab a small zip (1MB) from here. It also contains the game description in text format.

Thanks for your support!

My Trials with Flash Lite and FMS

Fri, 15 May 2009 11:43:00 +0100

I've had very little experience with Flash Lite to date, but right now I'm working on a project which requires a mobile element to it. Not satisfied with doing the sensible thing and playing it safe I thought it would be great to offer some real-time features on a mobile, either via AFCS or FMS.
So I set out to see what was possible, in particular I wanted to make sure that Remote SharedObjects (RSOs) and NetConnection methods were available in Flash Lite. Here's what I found.

I remembered that NetConnection and NetStream work fine in later versions of Flash Lite - Doug proved it to me. I can't remember when NetConnection was added, it didn't exist from the start but I was quickly told that RSOs are not supported (something which I haven't yet verified). Still I held out some hope that AFCS could be used in some way, but once again it seems that Flash Lite does not support RTMPS (which is what AFCS uses for security) and therefore that door was quickly closing too.

Even though there was talk on the forums that NetConnection.call was also unsupported I wanted to see it with my own eyes. I built some simple test cases and used the device emulator in Flash CS4 to run the applications. At first it seemed that nc.call was truly unsupported. Fortunately though I quickly noticed that my AS2 skills were not totally up to speed anymore and I had some scoping issues in my code - and after fixing them I was able to successfully call a remote FMS function from Flash Lite 3.1 and receive a return value. What's more, I also managed to successfully receive a client.call. This means that my plans are back on track, and I should be able to support data pushes over RTMP from FMS to Flash Lite 3.1 (and maybe earlier version - I haven't tried).

I haven't given up on RSOs either and will report back with my findings.

Did you build any real-time Flash Lite applications? I'd love to find out what others have achieved. Once my project is ready in a few months I will share more details.

Regular Expression to Validate URLs in ActionScript 3

Tue, 17 Feb 2009 11:24:00 +0100

I recently had a requirement for Scribblar (more on that site in another post) to verify if a domain name or page URL entered by a user is valid. Luckily ActionScript 3 features support for Regular Expressions, however my RegExp skills are non existent. So I reached out via Twitter to see if anyone could help. It took all of 10 minutes and a quick session on pastebin for Robert 'Da Man' Hall to sort the problem out for me. In order to preserve this nugget of knowledge for future generations, here it is.


var regex:RegExp = /^http(s)?:\/\/((\d+\.\d+\.\d+\.\d+)|(([\w-]+\.)+([a-z,A-Z][\w-]*)))(:[1-9][0-9]*)?(\/([\w-.\/:%+@&=]+[\w- .\/?:%+@&=]*)?)?(#(.*))?$/i;

Usage


var url:String = "http://www.google.com";
var regex:RegExp = /^http(s)?:\/\/((\d+\.\d+\.\d+\.\d+)|(([\w-]+\.)+([a-z,A-Z][\w-]*)))(:[1-9][0-9]*)?(\/([\w-.\/:%+@&=]+[\w- .\/?:%+@&=]*)?)?(#(.*))?$/i;
trace(regex.test(url)); // returns true if valid url is found

Thanks Robert!

PureMVC Skeleton App for FMS

Fri, 09 Jan 2009 16:04:00 +0100

It's a bit embarrassing to admit that it has taken me this long to post this app. I first spoke about it at my talk at MAX 2008 in Milan but then Christmas came and went and I got swamped with work... Apologies, but better late than never.

So what have we got here? My PureMVC Skeleton App is a simple Flex project that uses the PureMVC framework to give you a bit of a head start with your next FMS project. I'm by no means suggesting that this is the best way to build an FMS app but what I can say is that it works well for me. Not only that but since I've picked up PureMVC I have been able to build much larger projects than ever before, and the framework allows me to come back to an app months later and pick it up in no time at all. Everything has its place and it's easy to find your way around, and projects generally end up well maintained.
One thing I should point out is that the app itself has no UI - there's nothing to see when you compile it (hence the skeleton bit in its name). You will however see traces if you compile a debug project, or install Firebug for Firefox so you can see the Thunderbolt AS3 traces I tend to use extensively.

In order to connect to your own FMS application you first need to create it on FMS (mine is called pmvcskeleton) and then go into the ResourceBundleProxy and on line 42 add your corresponding RTMP string. I'm not sure if this is a good idea but I often use ResourceBundles for configuration options such as the RTMP string, I find it quite handy since they usually do not change so I just compile that in.

It helps if you are a bit familiar with FMS based applications and the MVC design pattern. For everything else check out the PureMVC website, it has tons of info and a lively community. Or why not sign up to my FlashMedia List, there's always a bunch of knowledgeable people there ready to help.

On this note I will leave you to it, take a look at the app and feel free to post a comment if anything isn't clear.

Massive thanks to Simon who gave me some excellent tips when I got stuck with certain PureMVC nags.

Download the project .zip here.

Media Player Development with Flash

Wed, 22 Oct 2008 16:42:00 +0100

Here's a Connect presentation that some of you may find useful. Kevin Towes presents on the history, concepts and development tasks of building a media player in Flash.
I think his presentation is particularly useful to less technical people who would like to understand a bit more about the Flash development process, and also get a feel for the challenges in building a video player - it turns out it's not as easy as some may think. And since this is what I have been doing a few times over it makes me look really clever.

Flex and ColdFusion Connection Tester

Wed, 16 Jul 2008 14:15:00 +0100

My friend Simon has just released a neat little Flex application that allows you to test and troubleshoot a simple RemoteObject connection between Flex and CF. It's mainly aimed at people who are new to Flex (or CF) but it will undoubtedly also come in handy for more experienced developers. In fact I think this would also make a great little AIR application.
Sources are provided and you can find all the necessary information here.

Coenraets' Map Rooms Ported to FMS, Wowza and Red5

Mon, 07 Jul 2008 18:29:00 +0100

I've spent a few hours over the last week or two on porting Christophe Coenraets' Map Rooms application to FMS, Wowza (and Red5 I think _ I haven't tested that one).

Map Rooms is a Flex application that uses the Google Maps API for Flash in order to provide collaboration features as well as a text chat. You can test drive the application for yourself here.
The original application is powered by BlazeDS, but since I am more familiar with FMS I decided to port it over. All source files are posted here (Zip file with sources is here) and I left some of the original BlazeDS code in there (commented out). The basic differences between Christophe's version and mine is the fact that my application first connects to FMS and then uses SharedObject onSyncs to provide the data sharing features.I've copied the following instructions from Christophe, hoping he doesn't mind.
1. Access http://coenraets.org/apps/gmaprooms/gmaprooms.html on two different machines or in two browser windows on the same machine.
2. Make sure you logon with two different user names and the same room name.
3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
5. The zoom level and the map type are also synchronized between users.
6. Click the "Whiteboard" button in one browser, pick a color to draw on the map (upper left corner), and start drawing.

I'm providing all sources for my ported application, but remember that you wil need to download the Google Maps ActionScript 3 API first and then add the swc file to the libs folder of your project. You also need to obtain a Google Maps API key and assign it to map.key in the initMap() function in MapArea.mxml. Lastly, you need to update line 29 of NCConnect.as to reflect your own FMS/Wowza/Red5 address.

The reason this application is compatible with FMS and Wowza (and I believe also with Red5) is because it uses no serverside ActionScript code. I've tested it on FMS2+3 and the latest Wowza Pro.
I've had some problems sending customs objects over the FMS NetConnection and I may have left some remnants of that in my code. For some reason I didn't manage to successfully send a ChatEvent over the NetConnection, yet WhiteboardEvent seems to work. The only difference between those two events seems to be that ChatEvent has another custom class nested within it (its data property is typed as ChatVO). I ended up sending just that data property (the ChatVO itself) over the wire but I needed to add registerClassAlias("ChatVOAlias", ChatVO ) and getClassByAlias("ChatVOAlias") to my code (in SOModel.as). Thanks to Dirk Eismann for the tip, I had never heard of those methods before...
It would be great to have more info and documentation on FMS3's custom class pass-through feature in order to establish what exactly can and can't be done - it may of course just be a bug in my code but whatever I tried the chat did not work as soon as I tried to send the complete ChatEvent...

More Webcasting Live From b.TWEEN08 Today

Fri, 20 Jun 2008 12:03:00 +0100

Just a quick heads up. There will be some more live webcasting throughout the day today, and we'll also be utilizing the chat a great deal. This was a well received feature yesterday and actually brought tears to my eyes with laughter at times.
The chat is projected up front on the stage and constantly used as a talkback channel to the speakers on stage - a great concept in my opinion.

b.TWEEN is turning out to be a great event. It's my first time in Manchester and which is a great city and a brilliant place for a venue. We're at the Museum of Science and Industry, so there's some cool old school tech to be seen, too. I'll head down to the powerhouse later and check out the steam engines...