It’s always a challenge to develop a chat on the web. You need a real-time message broker in the backend, an architecture that can assume several thousands of concurrent users, a strong authentification layer, etc… Furthermore, if you want to add a video chat using participants webcams, then you need to take into account video codecs, encoding and streaming services… And if you want to be able to share your screen !.. then you start crying.
Now, if I tell you that you can build a chat with Flex in 10 minutes, share your webcam video feed and even share your screen… would you believe me? Well, you should because you must always trust the French guys. To build a chat, I’m using Flex plus LCCS, “LiveCycle Collaboration Service”. LCCS is a service managed and hosted by Adobe that enable collaborative Flex applications with chat, video, VoIP, white-board and screen sharing components. Here is the chat application I’ve developed with 80 lines of code, in 10 minutes. If I’m connected, then you should be able to chat with me and view my face:
I’ve recorded a video to show the application in action. At the end you can view how I developed it.
Here is the source code of the client application:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="500" minHeight="500" xmlns:rtc="http://ns.adobe.com/rtc" width="550" height="550">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function txtUsername_enterHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
connectRoom.login();
labelUsername.visible = false;
txtUsername.visible = false;
}
protected function btnZoomScreen_clickHandler(event:MouseEvent):void
{
// move screenShare
if(btnZoomScreen.label == "zoom in"){
moveEffect.targets = [scrShare,labelScreen];
moveEffect.xTo = 10;
moveEffect.yTo = 10;
moveEffect.play();
resizeEffect.target = scrShare;
resizeEffect.widthTo = 520;
resizeEffect.heightTo = 479;
resizeEffect.play();
btnZoomScreen.label = "zoom out";
btnZoomScreen.y = 5;
}else{
moveEffect.targets = [scrShare,labelScreen];
moveEffect.xTo = 294;
moveEffect.yTo = 296;
moveEffect.play();
resizeEffect.target = scrShare;
resizeEffect.widthTo = 250;
resizeEffect.heightTo = 293;
resizeEffect.play();
btnZoomScreen.label = "zoom in";
btnZoomScreen.y = 296;
}
}
]]>
</fx:Script>
<fx:Declarations>
<s:Move duration="500" id="moveEffect"/>
<s:Resize duration="500" id="resizeEffect"/>
</fx:Declarations>
<mx:Image x="0" y="0" width="550" height="550" source="lccs_background.png"/>
<rtc:ConnectSessionContainer horizontalScrollPolicy="off" verticalScrollPolicy="off" id="connectRoom" autoLogin="false"
roomURL="https://connectnow.acrobat.com/yourname/yourroom"
x="0" y="55" width="550" height="499">
<rtc:authenticator>
<rtc:AdobeHSAuthenticator userName="{txtUsername.text}"/>
</rtc:authenticator>
<rtc:SimpleChat x="10" y="10" width="274" height="479"/>
<rtc:WebcamSubscriber x="292" y="23" displayUserBars="true" width="250" height="250"/>
<s:Label x="292" y="10" text="Michael's webcam" fontFamily="Verdana" fontSize="9" color="#CECECE"/>
<rtc:ScreenShareSubscriber id="scrShare" width="250" height="193" x="294" y="296"/>
<s:Label id="labelScreen" x="295" y="285" text="Michael's screen" fontFamily="Verdana" fontSize="9" color="#CECECE"/>
<mx:LinkButton x="474" y="296" label="zoom in" fontFamily="Verdana" color="#93B864" id="btnZoomScreen" click="btnZoomScreen_clickHandler(event)"/>
</rtc:ConnectSessionContainer>
<s:Label id="labelUsername" x="165" y="191" text="Enter a username and press Enter:" color="#D8D8D8"/>
<s:TextInput x="165" y="205" width="221" textAlign="center" id="txtUsername" enter="txtUsername_enterHandler(event)"/>
</s:Application>
And the source code of the application for the owner of the room who published his webcam and can share his screen.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="720" height="530" xmlns:rtc="http://ns.adobe.com/rtc">
<fx:Script source="pass.as"/>
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
scshare.publish();
}
protected function button2_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
scshare.stop();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<rtc:ConnectSessionContainer x="0" y="0" width="730" height="530" roomURL="https://connectnow.acrobat.com/yourname/yourroom">
<rtc:authenticator>
<rtc:AdobeHSAuthenticator userName="login@adobe.com" password="{thepass}"/>
</rtc:authenticator>
<rtc:Roster x="395" y="0" displaySelection="false" showMenuButtons="true" width="295" height="362"/>
<rtc:WebCamera x="395" y="370" width="127" height="126"/>
<rtc:ScreenSharePublisher id="scshare" width="421" height="309" left="484" y="207"/>
<s:Button x="556" y="370" click="button1_clickHandler(event)" label="share screen" width="141" height="41"/>
<s:Button x="556" y="416" click="button2_clickHandler(event)" label="stop screen sharing" width="141" height="41"/>
</rtc:ConnectSessionContainer>
<rtc:SimpleChat x="0" y="0" sessionDependent="true" useExternalContextMenu="false" newMessageColor="0x000000" width="391" height="500"/>
</s:WindowedApplication>
Now, I invite you to develop your own collaborative applications with Flex and LCCS. First, visit this website and sign-up for a free developer account: https://collaboration.adobelivecycle.com Then download the SDK on your desktop, and import the LCCS.swc library in your Flex project to start playing with the LCCS components.
For those who helped me beta testing the chat, we identified a small bug with the Chat component (and its scrollbar). I must say that the LCCS team sent me a patch in the night! And that’s the opportunity for me to thank them. This is certainly the most responsive LiveCycle team ever.
To understand the business model of LCCS, read this article posted by my friend Tom: http://www.flashrealtime.com/livecycle-collaboration-service-pricing/
I plan to add few features to my chat. First, I’ll develop a widget that displays in real-time if I am online, and how many users are chatting in the room. Then I also plan to develop an Android version using AIR 2.5. More to come…
I'm Michaël CHAIZE, Adobe Flash Platform Evangelist based in Paris. I'm a big fan of Rich Internet Applications and I promote the Flash Platform in the Enterprise world.
Andrew Trice
Christophe Coenraets
Greg Wilson
Holly Schinsky
Piotr Walczyszyn
Raymond Camden
Excellente démo.
Merci de partager ça. Je vais tout de suite essayer pour l’un de mes clients.
Gilles from the Gers in France
can we integrate this application with asp.net 4.0.
Hey I am still having issues with the pass.as file. I can’t figure it out. Any help would be greatly appreciated
Casey
LCCS is not support for SDK 4.5.1 yet..
I’ll be back for update library..
Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your site? My blog site is in the very same area of interest as yours and my users would really benefit from some of the information you present here. Keep up the fantastic works guys I’ve incorporated you guys to my own blogroll.
If I want to implement this on my website, how can I get a notification when someone tries to chat with me?
adobe LCCS is going to close its service by this December.
if their is any other service that can be used for live video chatting??
nothing but good news might happen for LCCS. We’re working on it. Stay tuned