Ignite Realtime Blog

3 Posts tagged with the red5 tag

After Gato made this suggestion in my last blog, I decided to move this request to the top of my to-do list as I also need it for another project I am currently working on.

 

http://red5.4ng.net/gtms/user_tune.jpg

 

How does it work?

 

I am using the Flex Dashboard developed by ESRIA which was donated to the Adobe Developer Connection. Plugins are presented in a pod layout called a View. Each View occupies a Tab in the SparkWeb ChatWindow. You can modify Views by dragging and dropping pods to a different location and minimizing, maximizing, and restoring pod windows. View changes are saved using a LocalSharedObject. View configuration data is loaded from sparkweb/plugins/plugins.xml with values in plugins.xml indicating which swf file to load for a particular pod within each View.

http://red5.4ng.net/gtms/plugins.jpg

<views>

<view id="view0" label="Plugin Demo">
  <pod id="app01" title="User Moods" dataSource="plugins/moods.swf" />
  <pod id="app02" title="User Tunes" dataSource="plugins/usertunes.swf" />
  <pod id="app03" title="Demo" dataSource="plugins/demo.swf" />
</view>

</views>

 

SparkWeb will load each pod SWF file and call the method setParentApplication passing it the SparkWeb root Application object. From this object, you can navigate your way to access all other SparkWeb public objects and even add eventhandlers on events like NewMessage for example.

 

To get a feel of what can be done, I decided to implement the User Tunes and Moods PEP (personal eventing protocol) applications. See Armando Jagucki's blog for more details about PEP in Openfire. The source code to the demo plugins is in the src/plugins folder.

 

For those interested, the latest version of Red5 Plugin for Openfire can be found at _http://red5.4ng.net/red5-0.1.06.zip. Remove comments in plugins.xml to activate the demo.

8 Comments Permalink

I use Openfire and SparkWeb everyday and recently starting evaluating Clearspace to power the community I am building for my wife's education consultancy (www.inspiredfutures.co.uk). As I had limited computing power and memory to work with on my hosted server, it became expedient that I needed to integrate all three products under the same web server and Java JVM.

 

The first thing I did was to make an openfire plugin out of Clearspace

The next thing I did was to enable SparkWeb display an HTML page from its chat container

http://red5.4ng.net/gtms/Image14.jpg

 

The result is what you see above and I am very pleased with it (chuffed as we say in the UK). The benefits of integrating Openfire and Clearspace has already been mentioned here . Adding SparkWeb to that combination in order to have realtime messaging, desktop sharing, Red5 audio/video calling and a SIP phone makes a compelling case for me to use Clearspace

 

I have reservations about real-time integration with web applications that use the MVC model based on Stuts like Clearspace or even PHP applications like SugarCRM. Even Salesforce.com also falls into the same group because they all build their UI on the server and everytime the user does anything that requires a server fetch, the screen goes all blank while you wait for the whole page to be rebuilt from server-side Java code.

 

Putting a softphone or an IM client as a widget in these applications requires constant connect/disconnect cycles as the user moves from page to page. It reminds me of my attempt to build a real-time application on an Apple iPhone and a softphone in Salesforce.com. What we need is to be able to keep our widgets UI resident on the client as well as the user session in the plugin on the server. I am curious to see how Jive Software implements the realtime widgets in Clearspace.

 

In the meantime, I am happy to make SparkWeb my container for real-time web applications as I am getting biased towards Adobe's open-source Flex as my de-facto web client application development platform. I learnt a lot from studying the SparkWeb code and I am planing on developing some Clearspace widgets that use SparkWeb's features through the Javascript External Interface to make the integration complete.

 

If you want to use SparkWeb as a container for your web applications as I have done, pick up the latest version of the Red5 plugin from here. Copy and edit index.html. Change the httpLabel and httpURL parameters to your preference.

2 Comments Permalink

When SparkWeb became open-source, I took a look at the source code and found it had more features than the Flex-based XMPP client I was co-developing for the Red5 Plugin. It therefore made sense to migrate the Flash audio and video features we had developed for our client to SparkWeb and make it compatible with the Spark and Openfire Red5 Plugins and package it as part of the Red5 plugin. The downside to this that the modifications to the Red5 version of SparkWeb makes it out of sync with the official SVN and it could possibly become a fork requiring a name change later on.

 

So what does the Red5 SparkWeb offer?

 

  1. A plugin container for SparkWeb. I noticed  that quite a number of users are asking for a plugin to deploy SparkWeb. My advice would be to try the Red5 Plugin.

    Configure  Index.html and point your users at

    http://your_server:nnnn/red5_webapp_name/sparkweb

    Where nnnn is your HTTP-BIND port number (default 7070) and red5_webapp_name is your default red5 web application name (default red5)

  2. Enables use of the Red5 plugin audio and video features with both Spark and SparkWeb. You can't do video messaging and the video roster is replaced with visual presence (see below). You can make audio/video calls and share your desktop with your contacts. Each call record is logged in openfire and can be queried by the administrator with the Openfire SIP plugin.

  3. Makes SIP phone calls between Spark and SparkWeb users. All SparkWeb SIP calls are logged with the Openfire SIP plugin as well.

  4. Provides webcam support. If you have a webcam installed on your PC, it will be automatically detected and will be used instead of your vcard photo. You can disable this in index.html. You can add or replace your vcard photo with a snapshot of your webcam when you edit your profile. You can also publish snapshots from your webcam as visual presence to all your contacts. What this means is that all your contacts will have  a snapshot of your webcam in their rosters. The interval between snapshots is 60 secs by default and can be modified in index.html. See a draft copy of my proposal to extend XMPP with visual presence. Please feel free to post comments at the bottom of the document.

I also made a few cosmetic changes to my taste and added sound effects for incoming calls and instant messaging. I added some code to improve the loss of focus detection by tracking Flash application activation/deactivation messages and mouse movement. If you use Internet explorer and enable pop-ups, you will get a pop-up in the bottom right corner of the screen with a photo, name and first line of the incoming messaging if you are outside of SparkWeb when a new message arrives.

 

I am hoping to add fastpath support and a calendar to SparkWeb next.

16 Comments Permalink