Build Periscope in 10 Minutes

November 30th, 2015 by Chris Allen

Create_header_2

With live streaming becoming increasingly prevalent in 2015, developers are focused on creating applications to address the public’s fascination with streaming media. Periscope is the prime example of such an application and the sheer size of Periscope’s user base and class-leading engagement metrics validate its dominance in the space.

But what does it take to build a live streaming and communication platform such as Periscope, with the capability to broadcast to one hundred thousand or even one million subscribers? What if I told you that you could build a live streaming application with Periscope-like functionality and scalability in just 10 minutes?

Before we created Red5 Pro it took some serious effort to build this kind of server-side infrastructure and tackle the high level of complexity to build a native Android and iOS video encoder/decoder that works with the server. We saw this trend of a new kind of mobile app that connects people in real-time, and we saw these early adopters cobble together inefficient software wasting tons of time and energy. We couldn’t allow this to happen anymore, so we decided to make it easy for developers. With Red5 Pro, you truly have the ability to build the guts of the next live streaming phenomenon in a matter of minutes, and here’s how:

Let’s first start with all the pieces, and what you would need to build if you were to do this from scratch.

The Fundamentals

1. Publish from the mobile client:

  • Access the camera

  • Encode the video

  • Encode microphone data

  • Negotiate a connection with a media server

  • Implement a low-latency streaming protocol for transport

  • Stream the data to the server

2. Intercept with a media server

  • Intercept the stream

  • Relay to other clients

      and/or

  • Re-stream to a CDN (adds latency)

  • Record the stream (optional)

3. Implement client side subscribing:

  • HLS in WebView (even more latency)

and/or

  • Setup connection with media server

  • Implement streaming protocol

  • Mix the audio and video

  • Decode video/audio

  • Render video and play the audio

 

*Note-this is actually a simplified list of all the tasks involved. Try doing this on multiple threads and getting it to perform well; it is complicated! It’s truly a rabbit hole that most developers don’t want to venture down. Given the awesome tools and libraries that exist for us developers, we thought that it was ridiculous that an easy-to-use and extensible live streaming platform just didn’t exist. That’s why we built Red5 Pro.

 

Red5 Pro to the Rescue

Let’s uncomplicate this. The Red5 Pro Streaming SDKs provide what we think is an intuitive and flexible API to remove the complexity while retaining tremendous control if you need it. Let’s take a look at the classes our SDKs provide. (note that they are the same on Android and iOS).

Graph

Let’s step through an example using these classes, piece by piece.

The Publisher

R5Configuration:

Red5Pro_tools

The first step is to create an R5Configuration. This class holds the various data used by your streaming app. It contains things like the address of your server, the ports used, protocols, etc. In this example we are connecting to a server running at 192.168.0.1 on port 8554 via the RTSP protocol. This Red5 Pro server has an app called “live” running on it, and that is what we want to connect to based on the context name. And finally we are setting the buffer time to half a second.

iOS

 

Android

 

R5Connection:

Red5Pro_links

Next, you create an R5Connection object, passing in your configuration. This establishes a connection to the Red5 Pro media server.

 

iOS

 

Android

 

 

R5Stream:

Red5Pro_stream

Now you create a stream object passing in the connection object you just created. Note that the R5Stream is also used for incoming streams, which we will get to in a bit.

 

iOS

 

 

Android

 

R5Camera:

Red5Pro_camera

Next we create a camera object and attach it to the R5Stream as a video source.

 

iOS

 

 

Android

 

 

R5Microphone:

Red5Pro_microphone

Then we create a microphone object and attach it to the stream as an audio source.

 

iOS

 

 

Android

 

 

R5VideoView:

 

Red5Pro_view

While it’s not a requirement to publish a live stream, we find it useful to provide a preview for the user of their video being streamed from the camera. This is how you set that up.

 

iOS

 

 

Android

 

R5Stream.publish():

Red5Pro_publish

Finally the last step for the publisher is to publish the stream using a unique name that the subscriber can subscribe to.

 

iOS

 

 

Android

 

The record type parameter tells the server the recording mode to use on the server. In this example we are setting it to live, meaning it won’t record the stream on the server.

 

Here are your other choices.

R5RecordTypeLive – Stream but do not record

R5RecordTypeRecord – Stream and record the file name. Replace existing save.

R5RecordTypeAppend – Stream and append the recording to any existing save.

If you compiled and ran this app with it configured to point to a running Red5 Pro server, you would be able to see it running in your browser. Open a browser window and navigate to –> http://your_red5_pro_server_ip:5080//live/streams.jsp to see a list of active streams. Click on the flash version to subscribe to your stream.

 

LiveStreaming.png

The Subscriber

Now that we’ve built the publisher we have established a live stream being published to the server. Yes, we did see the stream in Flash, but in order to consume that stream on mobile we need to build the subscriber client. Let’s dig into that now.

 

R5Configuration:

Red5Pro_tools

Just as before, we setup a configuration object holding the details of our connection and protocols.

 

iOS

 

 

Android

 

 

R5Stream:

Red5Pro_stream

Then, like in the publisher, we set up a stream by passing in the configuration into the constructor.

 

iOS

 

 

Android

 

R5VideoView:

Red5Pro_view

This is the step where things deviate just a little from the publisher. We still set up an R5View, but this time we want to use it to display the incoming stream

 

iOS

 

 

Android

 

 

R5Stream.play():

Red5Pro_play

Finally, we tell the stream to play by using the play method and passing in the unique stream name that the publisher is using.

 

iOS

 

Android

 

Voila, you can now build your own one-to-many live streaming experience, all within minutes with the help of Red5 Pro. What do you think, are there ways we could make this even easier? We love hearing feedback, so let us know in the comments or email us directly. Happy Coding!

, , , , ,

First Annual Intel Innovators Summit

November 5th, 2015 by Chris Allen

Intel Innovator Summit 2.JPG

 

I just got back from the Intel Innovators Summit in Santa Clara, CA where I serve as a current Intel Software Innovator. Intel brought together some of the top programmers, makers and creative technologists from around the world to show us some of the innovative things they are working on. While I can’t share many of the details of what was presented, to me, the most valuable aspect of the summit was having the fantastic opportunity to connect with so many talented developers in one space.

During the event, Intel split up the topics between RealSense and IoT. RealSense, for those who don’t know, is a platform built around 3D depth cameras. As mentioned above, due to an NDA I can’t share everything Intel is up to, but much of what they are doing has been released publicly, and there are public SDKs that anyone can download to start thinking with the devices. As a quick aside, here’s a link to a video that Infrared5 put together for a contest on perceptual computing (which is actually the basis of RealSense) as a catalyst for a truly immersive game play experience at the 2013 Intel Ultimate Coder Challenge. While the front-facing cameras on Windows PCs offer quite a few interesting options for Minority Report style input and games, I find the rear/world-facing r200 cameras on Android devices much more intriguing. The possibilities surrounding the combination of the devices with IoTs are enormous; Imagine unlocking doors just by a camera recognizing your face, or creating wearables that interact with the world with 3D data.

In retrospect, IoT was really the topic that got me excited at this event. Though I don’t consider myself a Maker, Infrared5 has engaged in a significant number of projects with internet connected sensors. Our customer SICK, for example, utilizes Red5 for live streaming of data coming from their sensors. I’m really excited to get my hands on an Intel Edison board after seeing firsthand how the device can seamlessly enable live streaming across a variety of products.

SparkFun_Edison_Boards-14

The fact that it’s so small–and relatively powerful– introduces all kinds of exciting use cases beyond mobile phones. Rest assured, we will be experimenting and sharing with you guys what we and the other Innovators do with Red5 Pro and these devices.

One of my favorite activities of the summit was the little contest Intel ran called the Spark Tank, which was undoubtedly inspired by the hit TV show Shark Tank. Intel kicked off the exercise by splitting the Innovators up into groups with the task of inventing a project which we then pitched to the judges. The judges consisted of the Intel Innovator program as well as executives from the company. I must say, all the teams came up with compelling experiences–everything from doors that scanned your face in order to allow entry to stuffed animals with medical sensors embedded within.

Our project consisted of a military application to improve communication within squads and leveraged the Red5 Pro platform with the Edison board. Each team had to do a skit or a spontaneous commercial for their product and present on the benefits of their concept. For ours, we ended up cutting out cardboard rifles and paper goggles and then taped together gesture/motion control MYO armbands that let you wirelessly control connected devices. It was rather dramatic, as we had our team get shot and die on stage. While we won the “Most Likely to Get the Blind into the Military” award, we clearly should have won funniest skit for the most serious topic.

Intel Innovator Summit 1.JPG

It’s fantastic to be a part of such a talented group of developers, and I’m honored to be able to represent Infrared5 in the Intel Innovators group. Kudos to Intel for having one of the best developer outreach programs out there! I’m excited about all the possible collaborations that will emerge from the Intel Innovator’s Summit, and of course, we can’t wait to see what these guys do with live streaming and Red5 Pro.

, , , ,

What We’ve Quietly Been Working On: Red5 Pro – Going Back to Our Roots

November 4th, 2015 by Chris Allen

red5pro_live_broadcast.png

 

The Times They Are A Changin’

As you might have noticed, we recently updated our website to better reflect our new direction at Infrared5. We are now focused on the Red5 Pro Server and SDKs for iOS and Android that enable developers to build experiences like Meerkat or FaceTime in a matter of minutes. Yes, you read that correctly – the ability to create mobile streaming applications in minutes. We originally started this company because of the tremendous reception and interest in the Red5 Open Source Media Server. For those that aren’t familiar with the project, our initial team, composed of John Grden, Paul Gregoire, Dominick Accattato and myself, worked with other developers around the world to reverse engineer the RTMP protocol and create an open source alternative to Macromedia’s Flash Communication Server. This project eventually became Red5. Two years later as the project grew, we noticed strong demand from developers who needed custom work and consulting on Red5 – so much so that we decided to quit our day jobs and start Infrared5. Over the years though, our focus drifted away from exclusively building live streaming solutions with Red5.

Games and Brass Monkey

Our developers at Infrared5 have always been interested in disrupting the present and pushing the boundaries with new technologies. One of these instances was the Unity game engine. Andy Zupko and John Grden really pushed us in this direction as early adopters of the platform. We built many great games on Unity including the Star Wars Trench Run, Hasbro’s Game of Life Zapped Edition, and most recently the augmented reality Force Trainer feature in the official Star Wars app. Even though we are no longer focused on games, our passion for game design and the unique experiences they enable really influence our product design. We want to make using Red5 Pro fun and enjoyable for developers, which in many respects isn’t far off from the goal of a good game.

b-pre-connect

During this time Rebecca led Infrared5 not just in games projects, but also on IoT and streaming projects that leveraged the open source Red5. Another project that Infrared5 invented and spun off was our smartphone-as-a-game (SAAG?) controller product, Brass Monkey. I moved over to lead that company as CEO in 2010, but eventually I came back to Infrared5 full time, as we weren’t able to effectively convince people to pay for smartphone controlled, browser-based games. Note though, we kept the technology, and it’s now part of Red5 Pro as the Second Screen SDK.

Going Back To Our Roots

After Steve Jobs announced the demise of Flash with the lack of support in iOS, and the eventual decay of support for Android, we came to the conclusion that we would solve the “Get off of Flash Problem” for live streaming mobile apps. We heard from a lot of our consulting clients that they wanted this, and instead of trying to build custom solutions over and over again, we decided Red5 needed an upgrade. Mobile SDKs for RTMP are mostly fragmented, hard to use, clunky and generally just a mess. We have now made it our mission to make building a live streaming app for iOS and Android efficient and intuitive. Whether it’s a one-to-many live broadcasting app like Periscope, a many-to-many conferencing app, or a one-to-one video chat application, we want to make it so incredibly simple that any developer can do it.

The Future: WebRTC, Second Screen, IoT

While migrating existing live streaming Flash apps to our new platform is super helpful, what we are most excited about is our vision for the myriad applications of the Red5 Pro technology.

An ever-increasing number of browsers are adding support for WebRTC; heck, even Microsoft Edge is getting there! We think this is clearly the future for in-browser streaming, and we are currently working on making Red5 Pro speak this protocol. We see the Red Pro Server as the underlying hub that is able to talk to all different streaming mobile apps and browser apps with minimal latency and outstanding performance.

However, the phones we carry in our pockets, the laptops sitting on our desks, and the tablets we browse while sitting on the couch are truly just the beginning. Other devices with cameras that can connect to the internet are the next big thing in live streaming. We are thrilled to make Red5 Pro integrate with all of these Internet of Things devices. The possibilities are endless: imagine fully immersing yourself in a live concert via your VR headset streamed live from a 3D camera at the venue, or enabling live video streaming among military troops over mesh networks going to their AR headsets. There are countless things for developers to build in this space, and we’re excited to see how we can power them through Red5 Pro.

Finally, we think that the second screen experiences like what we started with Brass Monkey have huge potential for changing the way people interact with technology. Not only can you as a developer turn phones into game controllers, but you can also create new banking software that enables your phone to interact with and take away information from a screen in bank branches of the future.

red5pro_secondscreen

…And There’s More!

Of course we can only think of so many scenarios of how our tech can be applied. The true innovation will be done by what you as a developer create with it. What would you build with Red5 Pro? Let us know in the comments. Much more coming your way soon!

, , , ,

Red5 Integration for Eclipse (Red5Plugin)

November 14th, 2013 by Dominick Accattato

When I started working with Red5 on a daily basis, I always wanted a better way to develop and run my Red5 applications locally. Mainly my intentions were around efficiency, but eclipse plugin development also appealed to me from a tooling perspective.

I believe it was back in 2009 when I first thought about adding Red5 development support to the Eclipse IDE. I spent about a week reading a few Eclipse development books until I felt comfortable enough to step into the Plugin perspective. From there, things progressed fairly quick although I didn’t really understand completely the best practices with generating projects and resources within that project. However, as with each open source project there is a limited amount of time in the day and it was working enough to release it to the community. I’m still not entirely happy that I chose to use Ant for the resource copying and would gladly take a look at refactoring that functionality.

My first release had support for generating not only the Red5 serverside application, but also the Flex client project. In addition, there was support for an array of open source Flash libraries including Jedai which was a Red5 application framework that encompassed both the serverside and clientside. On my second release of the plugin, I stripped Jedai as well as the other Flash library resources. I had found it was going to be a pain to manage the dependencies from within the plugin. That and we weren’t supporting Jedai anymore as an opensource framework.

Since this time, the Red5Plugin got pretty stale and I hadn’t paid much attention to it. In fact, it’s been quite a few years even though some members of the community asked for its source to be opened. It was always my goal to release the plugin, but I just needed time to clean up the code and make sure it compiled with newer versions of Eclipse. The good news is that I did in fact take the time over the past few days to clean up the project.

That said, I’ve updated some of the code to target newer versions of Eclipse. The latest update site can be found at the following URL:
http://www.red5.org/red5-ide-plugin/

In addition, and even more in line with the spirit of open source, I have placed the source code up on our Infrared5 Github account for the community to comb through. I am still very much interested in putting some TLC into the plugin and giving it some much deserved attention. I’ll think over the next few weeks about some new features and may discuss these over the project’s wiki page. In the mean time, feel free to clone the project and if you’re unfamiliar with Eclipse development, you may get the same amount of enjoyment that I got when I originally wrote the plugin. I’d love to hear from anyone who wishes to help out with some of the development and or documentation.

Go ahead and check out the new Open Source Red5 IDE
http://infrared5.github.io/red5plugin/

 

Red5 Media Server Workspace Setup Guide

November 11th, 2013 by Dominick Accattato

In the past year we’ve seen tremendous improvements in the Red5 open source project in terms of the way the code is structured and built. Previously to Red5 1.0.1, the build was performed using Ant along with dependency managed by the open source tool Ivy. However, we had seen interest growing to migrate over to Maven as our build management tool. As you may know, Maven uses convention over configuration. One side effect of using convention requires that the folder structure be modified. This is fine and it turns out that development is just as smooth with Maven as it was with Ant, given that you understand how to setup your workspace correctly. If you are a Red5 application developer, the following guide may be interesting to you, but it was really written for anyone who wishes to modify the Red5 project source code and work on the internals API’s with confidence. I categorize red5 developers into two groups:

  • Red5 Project Developers
    • Developers who check out the project source code.
    • Intend to modify the source and build custom distributions.
  • Red5 Application Developers
    • Developers who wish to build on top of the platform using the exposed red5 API’s.
    • These developers are typically developing web applications.

I’m definitely interested in writing up more documentation targeting Red5 Application Developers. However, these will come at a later date.

The main contents include:

  • SYNOPSIS
  • INSTALLING ECLIPSE
  • ECLIPSE PLUGIN SETUP
  • RED5 WORKSPACE SETUP
  • CREATE A RED5 APPLICATION
  • DEBUG APPLICATION ON SERVER

Without further delay, please check out the entire guide here.

Screen Shot 2013-11-11 at 3.01.10 PM

 

Red5 1.0.1 Released

January 15th, 2013 by Paul Gregoire

Red5 1.0.1 Released

Announcing the release of Red5 server version 1.0.1 Final.
This is primarily a bug-fix release, coming just a little over a month after the 1.0 release. The following 13 bugfixes are addressed in this release:

  • Admin application fixed
  • ClientBroadcastStream was modified to handle stream listeners more efficiently
  • Fixed RTMPS server freeze
  • Plugged memory leak in the RTMP protocol decoder
  • Fixed several minor issues with client streams
  • Addressed tight-loop issue bubbled up from Mina when file handles are exceeded
  • Fixed loading issue with persistent shared objects
  • Repaired some Maven related problems with our builds

A major change from 1.0 on the project side of things is our move from Ant and Ivy based builds to Maven.

The server documentation has also received some updates and has been regenerated in HTML
and PDF formats; granted there are still a lot of sections that need to be updated, but this is a start. The googlecode hosted wiki has also been started during this period since we lost faith in the older Trac system. The unfortunate thing about losing Trac is that we lost a lot of the content.

Red5 Binaries

Binaries have been created to fill most of our users needs; absent from the list is a dedicated OSX build. OSX and Linux users should grab the Tarball or build from source. The following links are now active: Windows Installer (Java 7) | Windows (Java 6) | ZIP | Tarball

How to add Red5 as a Maven dependency in your project

Add the red5 repository

Add a dependency entry for the server:

Also if you’re doing RTMP client work in your project, you’ll also have to add the client library entry:

For both the server and client libraries you must add the “-java6″ prefix to the “version” node if you are not using Java 7.

Building Red5 in Eclipse

A Maven plugin now comes pre-installed in some Eclipse releases, but if you are using an older version and need install instructions go here first: Maven plugin install

Last but not least, I created a quick screencast to show how to build the server in Eclipse now that we’ve switched to Maven.

, , ,

Red5 Authentication

May 7th, 2012 by Paul Gregoire

How to implement CRAM authentication in Red5

In this post we will setup a challenge-response authentication mechanism (CRAM) in a Red5 application using two different methods; the first one being very simple and the other utilizing the powerful Spring security libraries. A basic challenge-response process works like so:

  • Client requests a session
  • Server generates a unique, random ChallengeString (e.g. salt, guid) as well as a SessionID and sends both to client
  • Client gets UserID and Password from UI. Hashes the password once and call it PasswordHash. Then combines PasswordHash with the random string received from server in step 2, and hashes them together again, call this ResponseString
  • Client sends the server UserID, ResponseString and SessionID
  • Server looks up users stored PasswordHash based on UserID, and the original ChallengeString based on SessionID. Then computes the ResponseHash by hashing the PasswordHash and ChallengeString. If its equal to the ResponseString sent by user, then authentication succeeds.

Before we proceed further, it is assumed that you are somewhat familiar with Red5 applications and the Flex SDK. For those who would like a quick set of screencasts to get up-to-speed, we offer the following:

Implementation

Implementing a security mechanism is as simple as adding an application lifecycle listener to your application. Red5 supports a couple types of CRAM authentication via an available auth plugin. The first one implements the FMS authentication routine and the other one is a custom routine developed by the Red5 team. In this post we will use the Red5 routine. An ApplicationLifecycle class implementing the Red5 routine, may be found in the Red5 source repository; this code only validates against the password “test”. While this class would not be useful in production, it may certainly be used as a starting point for a real implementation. Red5AuthenticationHandler Source

To enable the usage of your Red5AuthenticationHandler class or any other ApplicationLifecycle type class for that matter, you must add it to the listeners in your Application’s appStart method.

The reason for putting it in the appStart method is to ensure that the handler is added when your application starts and before it starts accepting connections. There is no other code to add to your application adapter at this point since the lifecycle methods will fire in your handler. Putting the authentication code within a lifecycle handler serves to keep the adapter code cleaner and less confusing. The authentication handler is defined in the red5-web.xml like so:


At this point, your application would require authentication before a connection would be allowed to proceed beyond “connect”. Entering any user name and the password of “test” or “password” (depends on class used in demo) would allow a client to be connected. As stated previously, this first “simple” implementation is not meant for production but is offered as a means to understand the mechanism at work.

Adding Spring Security

Once we add security layers such as Spring security, the application and authentication features become much more robust. The first thing we must do is to add the Spring Security namespace to our applications red5-web.xml.

Replace this node:

With this node:


Add the authentication manager bean and configure it to use a plain text file. The users file contains our users, passwords, and their credentials.

To demonstrate how users are handled, we will create three users: 1 admin, 1 regular user, and 1 user without a role. The plain text users file follows this pattern: username=password,grantedAuthority[,grantedAuthority][,enabled|disabled] A user can have more than one role specified; granted authority and role are synonymous. Below are the contents of our users file for this demo.


In addition to the authentication handler, a authentication manager must be added when using Spring security. The manager should be added to the appStart method prior to adding the handler, as shown below.

The Spring security version of the authentication handler will replace the simple version in your red5-web.xml like so:


Lastly, an aggregated user details service is used for storage and look ups of user details; this is essentially an interface to the internal in-memory datastore holding the user details or credentials. The user details may be configured to retrieve details from our local properties file, databases, ldap, or active directory. Our aggregated service is fairly simple as you can see below.

It should be noted that Spring security makes use of an additional Spring framework library that is not included in Red5; the transaction library provides DAO and transaction implementations which do not require an external database or related dependencies. All the libraries required for the demo are included in the project zip file.

Client code

Creation of an authentication enabled client will require a single library not included in Flex / Flash builder called as3crypto. The AS3 cryptography library will provide the hashing functions nessasary for authentication in our demo. Download the as3crypto.swc from: http://code.google.com/p/as3crypto/ and place it in the “libs” folder of our client project.

The following functions will be needed in your client support authentication:

The sendCreds method is called “later” from the sendCredentials method to prevent issues in the event thread.

These are the imports that need to be added before beginning.

In your connect function you will need to determine which authentication mode to employ. The following block will show how to set up the connect call based on the type selected.

You may notice that the type is simply a string in the url denoting which mode to use.

In your net status event handler, you will need to add handling for authentication routines. The following block demonstrates how to do so when an NetConnection.Connect.Rejected is received.

Once you are successfully connected, there are two methods in the demo code for testing access. The helloAdmin method will return a positive result if the authenticated user has the admin permission. In the helloUser method the routine is similar, but only the user permission is required. The included users file contains an admin user and two regular users, the second user is set up to have no permissions. The user without permissions may only connect application and call unprotected methods.

Protected methods in the application contain an isAuthorized check against preselected permissions.

If the user does not qualify, the call fails.

In a future post, I will explain how to add Java Authentication and Authorization Service (JAAS) to Red5.

Download
Project Source Client and server

, , , , , , , , , ,

Red5 Vector Support

August 3rd, 2011 by Paul Gregoire

It all started for me last year, I noticed Jean-Philippe Auclair blogged about reading AS3 Vector’s in Java and provided byte-level examples. Since the blogged examples were written in Java, I saw this as an invitation to implement them in Red5. I knew of Vector’s in Java but had no idea they had been implemented in actionscript and with what looked to me like generics. In AS3 the generic notation denotes the base type for each element in the Vector, which is also how it works in Java. The main differences between the implementations are that a Vector in AS3 is basically a faster version of Array and in Java it is a synchronized List-type collection. Similarly each element must be either “null” or an instance of the base type. Java is a lot more flexible with the instances in this case, because the element merely needs to implement or extend the base type. In AS3 handling is different, a Vector of DisplayObject type will not accept a Sprite instance.

Before I get down to the byte-level stuff, I want to note that this information may not be exactly correct in terms of what or how these items are constructed by the flash player; they are however the result of reverse engineering the data. Anyone with more information or a correction is welcome to send it my way.

The following examples show how the Vector is constructed in AS3 and then its representation in bytes. The byte arrays are encoded as big endian and are not compressed.

Vector with numbers and a string

A Vector containing two Number objects and a simple repeating string:

Trace:

Raw bytes:

Vector inside a Vector with other objects

A Vector containing the previous examples Vector in addition to another Vector of int type:

Trace:

Raw bytes:

Mixed Vector with class instance member

A Vector containing a simple String, a “null”, and the instance of a custom class:

Trace:

Raw bytes:

The “Foo3″ classes

Actionscript

Java

The original post does not contain details for writing back to Flash Player so I simply reversed the process once I had read working in the server. To test round-trip (deserialization/serialization), I used this method in my Red5 application:

The method accepts a Vector containing any type of object and returns it back to the client as a response. On the client you’ll need a pair of methods to both hit the server and to get the response.

Lastly, to use Vector’s with Red5 you will need the latest trunk with a revision of 4264 or newer.

For your reference, the AS3 doc page for Vector may be found here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/Vector.html
Note: Vector’s are available to Flash Player starting with the version 10 beta.

, , , ,

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

, , , , ,

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

, , , , , , ,

« Previous Entries