Clustering with Red5

July 28th, 2011 by Paul Gregoire

Once your service out grows its original space, you will most likely look at adding clustering capabilities. While clustering an application may seem daunting, it can be done in a fairly simple manner at first. Whilst at Infrared5, I have created several clustered applications using the methods which will be supplied below and now may be added to your skillset.

For this example you will need the following software (IDE’s not listed):

Herein we will go over clustering a simple chat application; both the client and server code in this example consist of only two to three source files respectively. Code blocks may not contain all of the code or comments to keep the sections short and focused.

Server-side (Java)

The first piece of code we need is the Red5 application adapter, it is used by the server to control the lifecycle of your application. In many cases, the base classes may be configured via Spring so that you don’t even need to write your own for simple applications; as an example, the SOSample demo that comes with the server doesn’t have any code for an application adapter. For this application we will override two lifecycle methods to handle the starting and stopping of the application. When the application starts, we need to start our cluster client class and join the cluster. On stop we disconnect from the cluster and perform any clean up necessary.

We must also add any methods which will be called by the client, which in this case would be one that accepts a sender name and some text.

Pretty easy looking isn’t it? Being a standard Java method, it could accept these values from anywhere that has access to the method such as a servlet. Next up, on the server-side is the code to send and receive messages on the cluster. This “ChatRegistry” extends the ReceiverAdapter provided by JGroups and is implemented in the most minimal way I could think of.

You may have noticed we’ll be using UDP for this example, I have found that this is the easiest way to setup JGroups and keep all the nodes communicating on a local network.

Last but not least for the server application we have our model class to hold a creation time, sender name, and the chat text itself.

The Actionscript twin for this model will be shown in the next section.

Client-side (ActionScript)

I used FlashBuilder to whip-up a quick chat client, so don’t bash my code too hard. For the example clients I created a Flex Project with MXML and one AS3 class file. In the MXML script block besides the connection handling, we need a method for sending and another to receive.

Be aware that the NetConnection.call in the send function must match the signature on the server’s application adapter.
The final class needed on the client is our model, which in Actionscript is a lot less “wordy” than in Java.

I have not included the configuration files and some other things in this post to prevent confusion, but rest assured they are in the source archives at the end.

Running

The quickest way to get up-and-running is to grab the server zip and deploy it to two servers or vmware virtual machines. Everything you need to run the client and server is in the zip.  After Red5 has started up, look at your console and you should see a line indicating that your application is in the cluster.

Please note that If you are using OSX you may need to add “-Djava.net.preferIPv4Stack=true” to your start-up script due to a bug in JGroups IPv6 handling.

Open browsers on each instance and navigate to http://localhost:5080/chatr/chatr.html

Once loaded, enter a name and click connect. After you have two servers running and clients connected to them, your output should look similar to this when chatting.

So now you know how easy this can be, go forth and create some cool stuff!!

Downloads

Full application with Red5 server (ready-to-run): http://bit.ly/pIoVBi

Client source: http://dl.dropbox.com/u/7316897/red5/chatrclient-src.zip

Server source: http://dl.dropbox.com/u/7316897/red5/chatr-src.zip

, , , , ,

Working with Native JSON in Flash Player 11

July 21st, 2011 by Todd Anderson

With the recent public release of the next candidates for the Flash Player and AIR runtimes, I wanted to check out one of the features that I had been waiting to see as part of the player for some time. No, not Molehill. Native JSON support! Boring, right? Maybe i’ll address Stage3D (née Molehill) in another article, but initially I am actually more curious to check out the native JSON support.

If you are unfamiliar with JSON, it is lightweight, interchangeable format that is human-readable and has a familiar structure that allows for ease in parsing and generating data. You can read more about it at http://www.json.org.

History… sorta

For applications targeting the Flash Platform, there was a time when you would typically go grab the as3corelib library and use the JSON class to encode or decode JSON data – actually, the time is still now, or until these runtimes are out of candidacy. Though the JSON class from the as3corelib library works well and was a welcome addition to the community, it sits outside of the player globals and is implemented in ActionScript. That’s not to say it is necessarily slow, but – because of its implementation – it is inherently slower than having native support of JSON within the player.

Future… kinda

With the advent of native JSON support in the Flash Player 11 and AIR 3 runtimes, we now are afforded serialization and deserialization at a faster speed as well as an API that matches that of the JavaScript implementation.

JSON API

You can head over to the online docs and check out the JSON API for a deeper explanation, but the JSON class basically has two static methods:

If coming from working with the JSON class from as3corelib, these will most likely look different than the methods you are used to. That’s alright, they do relatively the same thing and, depending on the level of control you want, it may just be a matter of the methods being named differently. I do want to go over what has been made available in these methods in moving toward the use of the native JSON class, however, as they can be quite interesting and possibly useful depending on the design of your application.

JSON.stringify()

The JSON.stringify() method does essentially what you may be familiar with as JSON.encode() from the as3corelib – put object in, get string out. However, the global JSON class of FP11 now has a couple more parameters that can be used to your advantage when turning that object into a JSON string.

The replacer parameter can be supplied as a list of String or Number that correspond to the key-value pairs which you want to serialize to a JSON string. It can also be supplied as a Function delegate that will be invoked upon each key-value pair that allows you to handle the data directly in either modifying the value being generated or – in the case of returning undefined – removing it from serialization.

Here is a quick example of how you can assign a replacer delegate and remove a value from being serialized to the generated JSON string:

That gives you a little peek at the potential that a replacer has when generating JSON, but you can imagine that it could be valuable for, say, hashing passwords and such on the client side before being sent over the wire.

The other parameter in JSON.stringify() – space – can be a String or Number and is used in prettifying the generated JSON string by providing whitespace and readability. Using the previous example, if we provided the value of 4 as the argument for spacer, the trace output would no longer be on one line and look more like this:

Pretty!

JSON.parse()

Let’s take a look at the parse method. Again, if coming from as3corelib JSON, it will probably just be a change of calling:

[FP 11 global: JSON]

instead of:

[as3corelib: JSON]

However, there is a reviver parameter on the parse() method which can be of use if you wish to handle working with the key-value pairs during the parse operation of the value object. The signature of the Function supplied as the reviver should have two parameters defined – key and value – and should return the modified value in order to be stored in the object.

Here is a quick example of using the parse() method with a reviver that turns each string value to upper case:

One thing to note here is that if you return undefined from the reviver delegate, you can actually remove the property and its value from the generated object, which is useful but also is something to look out for if things seem to be going wrong. Another thing to note here is that the last key-value pair passed through this reviver delegate is the actual object itself – keep that in mind when using a reviver and make sure to check that you are not modifying the whole object you are parsing.

Going a step further

Now this new API is well and good and we could be on our way sending and receiving JSON data and punch our time card and grab a beer, but there may come a time where you actually want to have more of a workflow in streamlining the generation and parsing of this data using real model objects in your project rather than generic Objects.

Now it is true that as long as the property values held on a custom object are those that are supported in the JSON format – string, number, boolean, array and null – that you could supply the custom object to the JSON.stringify() method and it will properly generate the JSON object for you. Going the other way – parsing – however, is not going to inherently create or write to that custom object that you may have previously serialized; it will just generate a generic object. Of course there is nothing stopping you from traversing the properties on that object and setting them on a new custom instance, but this is an opportunity in which we might want to think about how we can go about creating a design in which we can easily map back to custom objects. Things I like to think about and bore people with. Don’t fall asleep on me.

To get an idea of what i am talking about, say we have a Person class which serves as a model for a person in the context of our application. It has your basic properties on it which are standard value types – like name, company, etc from previous examples. We can certainly generate a JSON string and pass that around like so:

Now, in our perfect world, that would trace [object Person], wherein the JSON parser was knowledgable to map the object to a Person. There is that reviver parameter on JSON.parse() but that won’t help us much in mapping back to a custom instance as it only handles the key-value pairs and not the object as a whole.

One solution is to serialize the classname down with the generated JSON object, so that when it is received on the client, we can inflate a custom instance based on the associated class. So, if you can imagine, the models you will use in your application all extend a base model that handles setting this classname that is accessible and writable to a JSON object, eg:

In this base model class, there is a model accessor which is the qualified classname of the subclass. It also exposes a description accessor which allows easy access to the list of read-write properties on the subclass. It is marked as transient to denote that it should not be considered enumerable when generating the associated JSON object.

Now that we have our base model, any subclasses will be serialized with a model property representing the qualified clas name which can be used to inflate the custom object upon parse. Modifying the Person class used in a previous example, the class now looks like this:

We just have to remember to call super() in the constructor or ensure that the _clazz property value is that of the subclass. From here, all that is left is using that model property to instantiate a new instance and fill the available property values from the parsed JSON object received. Here is a quick working example:

In the parseToModel() method in this example, we see how the read-only model property is passed in the flash.utils.getDefinitionByName() function to inflate a new instance of the associated model – Person – that was previously serialized to a JSON object.

One thing to remember is that a reference to the class in which you want to use to inflate a new instance of must be compiled into the SWF, otherwise you will get Runtime Errors. There are a couple ways in which you can ensure that the reference is included, and I will leave that up to you to explore.

View and download the example

That is just one solution in implementing the ability to map JSON objects back to custom instances, but I am sure there are many more and I would like to hear your thoughts on them in the comments.

Conclusion

Native JSON support to the runtimes is a much welcomed addition and I am very happy to see it finally become a reality, and it is good to see – in my opinion – an API that matches that of the one on the JavaScript side. Hopefully I covered some of what can be accomplished with it and how it can benefit you in any current or future projects. Go grab the beta players, and the playerglobal SWC and have some fun!

, , ,

The Evolution of Infrared5

June 21st, 2011 by Keith Peters

I joined Infrared5 back in November 2007. Those were very different times. We were a hard core Flash shop, focusing on Red5 Server based applications and Papervision3D. The iPhone had been out for less than six months and only Apple could write apps for it. The iPod Touch was just a few weeks old. Nobody had heard of Android. Tablets were just a failed venture by Microsoft that most people had forgotten about a few years before. Nobody was particularly excited about HTML (5 or otherwise) or JavaScript. If there was any perceived threat to Flash at the time, it might have been Silverlight, but nobody was particularly worried about that.

Now, the landscape is very different. I’m not going to say Flash is dead. I don’t think it is. I don’t even think that it is dying, per se. What is happening though, is that there are so many other cool and interesting things out there now, that Flash has lost its place in the spotlight for many developers. Also, I think that Flash initially had a very low learning curve and very little barrier to entry. A lot of Flash developers grew up as Flash did, learned real programming, object orientation, design patterns, best practices, etc., and were then able to branch out to other languages and platforms.

I have to say, that Infrared5 has not only rolled with the changes very well, but has completely embraced the change. I think virtually all of our front end developers are now seasoned iOS developers. Several have embraced Android development as well. We have Windows Phone 7 knowledge (mostly me), and our 3D platform has moved from Papervision to Unity. We’re doing HTML5 stuff as well as Flash and Flex sites, iPad apps, kiosk applications. Many of our projects even span multiple platforms – a Flex 4 app with an HTML5 public facing site, Flash or Unity 3D games with a companion iPhone app via Brass Monkey.

The company’s tag line is “Yeah, we can build that.” I’d say we’ve lived up to that.

In closing, I ran across this quote the other day that I really loved. It comes from a free on line book, “Learn Python the Hard Way”, by Zed A. Shaw, which you can find here: http://learnpythonthehardway.org/ . In the last section called “Advice From An Old Programmer”, he says:

“What I discovered after this journey of learning is that the languages did not matter, it’s what you do with them. Actually, I always knew that, but I’d get distracted by the languages and forget it periodically. Now I never forget it, and neither should you.

Which programming language you learn and use does not matter. Do not get sucked into the religion surrounding programming languages as that will only blind you to their true purpose of being your tool for doing interesting things.

Programming as an intellectual activity is the only art form that allows you to create interactive art. You can create projects that other people can play with, and you can talk to them indirectly. No other art form is quite this interactive. Movies flow to the audience in one direction. Paintings do not move. Code goes both ways.”

The full quote is here: http://learnpythonthehardway.org/book/advice.html

, , , , , , ,

Infrared5 Joins ng Connect Program

January 5th, 2011 by Mike Oldham

Infrared5 Joins ng Connect Program to Enable High Definition Video Streaming Over Broadband Wireless Networks – Collaborates on Innovative Solution Concept for Retail, Travel, Tourism Industries

Boston, MA, January 5, 2011 – Infrared5™, a leader in web and mobile software development services, announced today that they have joined the ng Connect Program, a multi industry initiative founded by Alcatel-Lucent to drive innovation in services using next generation broadband technologies such as the Long Term Evolution (LTE).

Under the auspices of the ng Connect Program, Infrared5 was hired by lead collaborator MediaTile with support from Alcatel-Lucent to develop software components for the Virtual Concierge, a new solution concept announced today.  This next generation pedestal-type digital 2-way video interactive platform will transform the retail, travel, and tourism industries. MediaTile contracted Infrared5 to develop a combination of open source and proprietary technologies,  to enable high definition video to be streamed over a 4G/LTE network as part of the MediaCast Video Presence system. This infrastructure enables 2-way video chat from any location enabling customers to speak directly to a concierge that could be located anywhere else in the world and have an instant conversation remotely. The kiosk can operate over any broadband wireless network, specifically 4G/LTE, and therefore the device can literally be plugged in and run from anywhere.

Infrared5, MediaTile and Alcatel-Lucent will showcase the Virtual Concierge at the Alcatel-Lucent booth #35469 in the South Hall at the Consumer Electronics Show in Las Vegas from January 6-9, 2011.

“This has been one of the most challenging yet rewarding projects that we’ve worked on at Infrared5, and has really made the most of our skills as multi-media programmers. All of the knowledge that we’ve learned over the years, developing open source projects like Red5 Server, and other customer work, have culminated in our efforts with the Virtual Concierge,” said Chris Allen, CEO of Infrared5.  “Working with Alcatel-Lucent and other members within the ng Connect Program has made us realize the market opportunity for us with next generation wireless networks. The Virtual Concierge is a prime example of this.”

“The ng Connect Program and Infrared5 have a shared vision for taking advantage of next generation networks for video streaming, including high definition video streaming that Infrared5 excels in. Working with Infrared5 to develop the Virtual Concierge is just the beginning of our work together on transforming how people connect by taking advantage of 4G/LTE networks, as well as the future of new next generation networks,” said Steve West, Vice President of Emerging Technology and Media at Alcatel-Lucent, a founding member of the ng Connect Program.

About Infrared5

Infrared5 is a consulting firm that specializes in developing cutting-edge experiences for the Flash Platform, Unity 3D and the iPhone. With its all-star team of designers and developers, Infrared5 has excelled at building sites, games, components, virtual worlds and RIAs for companies like NBC Universal, LucasFilm, Adobe, Wrigley’s and Ribbit. Infrared5 is also well known for their leadership role and expertise on the open source projects, Red5 and Papervision3D.

About the ng Connect Program

The ng Connect Program is a multi-industry organization committed to the development and rapid deployment of the next generation of broadband services based on Long Term Evolution (LTE) and other ultra high bandwidth technologies. Founded in 2009, the ng Connect Program is supported by leading network, consumer electronics, application and content providers including 4DK, Alcatel-Lucent, Atlantic Records, BlogRadio, Brass Monkey, BUZZMEDIA, chumby, Connect2Media, CoolSign, Creative Technology Ltd., Desktone, Ecrio, Inc., EON Reality, FISHLABS, GameStreamer, Inc., Gemalto, Genetec, HFMUS, HP, IMS, Infrared5, Intamac Systems Ltd., IVOX, K12, Inc., Kabillion, Kyocera Communications Inc., LearningMate, LiveCast, MediaTile, mental images, Mobideo, Movial, NCR Corporation, Netsweeper, Neusoft Corporation, Nuance Communications, Optical Crime Prevention, Inc., QNX, R360, RebelVox LLC., Samsung, SIGNEXX, Skymeter Corporation, STRATACACHE, [TC]2, TelePresence Tech, Total Immersion, Toyota Motor Sales USA, Inc., TuneWiki, V-Gate, Vidyo, VisionMAX Solutions Inc., Wcities.com, and Words & Numbers. For more information on the ng Connect Program, please visit: www.ngconnect.org. Follow us on Twitter at: http://twitter.com/ngConnect.

Editorial Contacts

Chris Allen, Infrared5                    Tel: +1 617-470-8815               chris@infrared5.com

Pamela Preston, ng Connect         Tel: +1 212-616-6001               ppreston@breakawaycom.com

Alicia Mickelsen, ng Connect         Tel: +1 212-616-6002               amick@breakawaycom.com

, , ,

7 Key Ingredients for Designing Addictive Games

August 27th, 2010 by Chris Allen

As we are a small company, we often wear many hats here at Infrared5. While I’m the CEO, I often play the role of Software Architect, Salesman, IT Support Person and even Dishwasher from time to time. Another role that I end up doing, or at least assisting in, is that of a Game Designer. Game Design is an art form unto itself, and involves the ability to know intuitively what’s going to be fun, and perhaps more important, figure out what’s addictive. I’ve been giving a lot of thought to the addiction of games lately, as I find it a very interesting subject, and is at the core of making the best games possible for our customers.
Read the rest of this entry »

,

Red5 – Past, Present & Future

August 19th, 2010 by Dominick Accattato

Red5 is not Infrared5. Many have confused the two or assume it is one entity. Infrared5 was started by some of the original Red5 team, and does focus many services on Red5 development. However, that is where it ends.

Red5 is an open source media server that delivers live video/audio/data to a client application. In most cases that client happens to be the Flash Player, however there isn’t anything stopping a keen developer from streaming to other endpoints, i.e. Java, Silverlight, HTML5. Since the server is licensed under the LGPL, companies have the liberty to use Red5 in proprietary products. The main restriction placed on Red5 is that any modification to the original source code must be donated back to the project. This ensures that the project continues to thrive with patches and helps us deliver a more stable product to the community.
Read the rest of this entry »

, , , , ,

Screaming with Ozzy

July 7th, 2010 by Mike Oldham

We recently collaborated with Sony Music to develop an engaging and unique experience to promote Ozzy Osbourne’s latest album Scream. The application challenges users to belt out there best scream using their webcam. The front-end was built using Flash and the Flex framework, and relied on Red5 for recording videos from a webcam and submitting the videos via the YouTube API. The most popular videos on the YouTube channel are prominently featured in a 3D wall on the website. This was yet another interesting project to build and test in the office. You’d think a team of engineers would be a little more introverted, guess again.
Read the rest of this entry »

, , , , , ,

Brass Monkey Interview with Boston Innovation’s Kyle Psaty

July 7th, 2010 by Mike Oldham

Big thanks to Kyle for coming out and putting together this great video! Check out BostonInnovation for more information on local start-ups.
Read the rest of this entry »

, , , , , , ,

The Future of UX – The Convergence of Mobile and Web

June 25th, 2010 by Chris Allen

The convergence of mobile and the web is a topic that we’ve been giving a lot of thought to lately here at Infrared5.That is in part because we do development both for RIAs and games in the web browser, as well as for smart-phone devices like iPhone, iPad and Android, but of course this is also because we’ve created a new SDK to allow developers to control an experience residing in a browser using their mobile device. For those that haven’t seen it yet, it’s called Brass Monkey.
Read the rest of this entry »

, , , ,

Flex 4

June 7th, 2010 by Mike Oldham

Intro:

Simply put, Todd is a Flex and AIR guru. He has written three books on the topic – most recently the Flex 4 Cookbook (in stores now!). Todd has been working with Flex since its early days and he’s always ready to take on extremely complex projects. When he’s not coding, he collects and digitizes old vinyl and enjoys riding his bike to work. We finally cornered Todd earlier this month to ask him some questions about the Flex 4 release and his thoughts on the future of the technology.

Read the rest of this entry »

, ,

Next Entries »