Flex and Flash Media Server

Embed Size (px)

Citation preview

  • 8/14/2019 Flex and Flash Media Server

    1/32

    Flex andFlash Media Interactive Server

    Toronto Flex Camp 2May 15, 2008Brian Lesser

  • 8/14/2019 Flex and Flash Media Server

    2/32

    Flash Media Interactive Server

    BuildingRealTimeCollaborativeApplications

    Notjust

    streaming

    media

    (use

    the

    less

    expensiveFlashMediaServerforthat.)

  • 8/14/2019 Flex and Flash Media Server

    3/32

    Quick Octopz Demo

    SynchronizedViewand

    Markupof

    Papervision3Dmodels

    Synchronized

    Yahoomaps

    and

    Markup

    VOIP

    and

    Video

    ThingsIwanttodemonstrate:

  • 8/14/2019 Flex and Flash Media Server

    4/32

    UserList Content/MarkupManager

    Component-Based Application

    DocumentView

    List

    TextChat VideoConference

  • 8/14/2019 Flex and Flash Media Server

    5/32

    Flash Media Interactive Server

    3.x ServersideJavaScript1.5(SpiderMonkey)based

    languagehttp://www.mozilla.org/js/spidermonkey/

    Nocomponents/frameworkforFlex2,3/Flash

    9/AS3(justFlashCommunicationServercomponents)

    FamiliarNetConnection,SharedObject,

    Stream(likeNetSteam)

    classes.

    NotsofamiliarClient andApplication

    classes.

  • 8/14/2019 Flex and Flash Media Server

    6/32

    Server application.onXXXX Events

    onAppStart

    onConnect (clientSWF

    tries

    to

    connect)

    onDisconnect (clientSWFdisconnects)

    onAppStop

    UnlikeFlexevents:

    applicationComplete

    initialize,creationComplete,etc..

  • 8/14/2019 Flex and Flash Media Server

    7/32

    Components and Shared Models

    SharedModel SharedModel SharedModel

    FlashMedia

    Server

    SharedModel

  • 8/14/2019 Flex and Flash Media Server

    8/32

    Remote Shared Objects

    NotthesameasRemoteObjectorLocalSharedObject

    Higherlevel

    data

    structure

    is

    relatively

    easy

    to

    work

    with donthavetomanagelowerlevelclientto

    servertoclientmessages.

    Setan

    RSO

    property

    value

    on

    aclient

    or

    send

    a

    messagetotheserverandsetthepropertyvaluethere

    (thelaterismoresecureandautomaticserialization).

    Theserver

    updates

    all

    the

    other

    clients

    and

    calls

    an

    onSyncmessageaftereachupdate.

    RSOs

    dont

    make

    good

    component

    data

    providers!

  • 8/14/2019 Flex and Flash Media Server

    9/32

    Components and Remote Shared

    Objects

    RemoteShared

    Object

    FlashMedia

    Server

    RemoteSharedObject

    RemoteShared

    Object

    RemoteShared

    Object

  • 8/14/2019 Flex and Flash Media Server

    10/32

    Likeanobject,anRSOhas

    namedpropertieswith

    values.

    ForthePeopleListexample

    letssayeachpropertyname

    isthepersonsuserName.

    Eachproperty

    contains

    an

    objectwithinformation

    aboutaPerson.

    Property Name Property Value

    roles

    firstName

    lastName

    participant

    Paul

    Nykamp

    blesser

    roles

    firstName

    lastName

    presenter

    Barry

    Fogarty

    barry

    PeopleList Component RSO

  • 8/14/2019 Flex and Flash Media Server

    11/32

    Components and Remote Shared

    Objects

    RemoteShared

    Object

    FlashMedia

    Server

    RemoteSharedObject

    RemoteShared

    Object

    RemoteShared

    Object

  • 8/14/2019 Flex and Flash Media Server

    12/32

  • 8/14/2019 Flex and Flash Media Server

    13/32

    PeopleList Component RSO

    Likeanobject,anRSOhas

    namedpropertieswith

    values.

    ForthePeopleListeach

    propertynameisthepersons

    userName.

    Eachproperty

    contains

    an

    objectwithinformationabout

    aPerson.

    Property Name Property Value

    roles

    firstName

    lastName

    admin

    Paul

    Nykamp

    paul

    roles

    firstName

    lastName

    participant

    Paul

    Nykamp

    blesser

    roles

    firstName

    lastName

    presenter

    Barry

    Fogarty

    barry

  • 8/14/2019 Flex and Flash Media Server

    14/32

    Flex2FMS Explorer Demonstration

    http://www.flashcommunications.net/technotes/flex2FMSExplorer

    http://www.flash-communications.net/technotes/flex2FMSExplorerhttp://www.flash-communications.net/technotes/flex2FMSExplorerhttp://www.flash-communications.net/technotes/flex2FMSExplorerhttp://www.flash-communications.net/technotes/flex2FMSExplorer
  • 8/14/2019 Flex and Flash Media Server

    15/32

  • 8/14/2019 Flex and Flash Media Server

    16/32

    Client-Side PeopleList.mxml

    publicfunctionsetnetConnection(netConnection:NetConnection):void{

    _peopleSharedObject=SharedObject.getRemote(className+"/people",

    netConnection.uri);_peopleSharedObject.addEventListener(SyncEvent.SYNC,onSync);

    _peopleSharedObject.connect(_netConnection);

    peopleList.dataProvider=newArrayCollection();;

    }

  • 8/14/2019 Flex and Flash Media Server

    17/32

    Client-Side PeopleList.mxmlpublicfunctiononSync(event:SyncEvent):void{

    varselectedItem:Object=null;

    varuser:Object;

    varitem:Object;

    //Rewritethelistwitheverysyncevent.

    vardp:ArrayCollection=peopleList.dataProviderasArrayCollection;

    dp.removeAll();

    for(varuserID:Stringin_peopleSharedObject.data){

    user=_peopleSharedObject.data[userID];

    item={userName:user.userName,data:user};

    dp.addItem(item);if(userID==_lastSelectedUserID)selectedItem=item;

    }

    peopleList.dataProvider=dp;

    peopleList.selectedItem

    =

    selectedItem;}

  • 8/14/2019 Flex and Flash Media Server

    18/32

    Server-Side PeopleList.asc

    functionPeopleList(){

    //Createthetemporarysharedobject:

    this.people_so

    =

    SharedObject.get(this.className

    +

    "/people");}

    PeopleList.prototype.className="PeopleList";

    PeopleList.prototype.onAcceptClient=function(client){

    this.people_so.setProperty(client.user.id, client.user);

    }

    PeopleList.prototype.onClientDisconnect=function(client){

    if(client.user){

    this.people_so.setProperty(client.user.id, null);

    }

    }

  • 8/14/2019 Flex and Flash Media Server

    19/32

    Simple Video Conference

    Remote Shared Objects MasterSharedObject onepropertyforeachuser.

    Server

    side

    code

    adds

    property

    for

    each

    user. ClientsideonSync()handlercreatesplaybackpanel

    PropertyName Property Value0 userName:blesser

    Id:0

    fullName:BrianLesser

    1 userName: paul

    Id:1

    fullName:PaulNykamp

    SimpleVideoConference/conferenceUsers

  • 8/14/2019 Flex and Flash Media Server

    20/32

    Simple Video Conference

    Remote Shared Objects OneSharedObjectperuserwithstream

    status.PropertyName Property ValuesendingAudio false

    sendingVideo false

    VideoPublisherForm.mxml

    VideoPlaybackPanel.mxml

    sharedObject.setProperty("sendingAudio",false);

    sharedObject.setProperty("sendingVideo",false);

    onSynch()

    SimpleVideoConference/userStreams/0

  • 8/14/2019 Flex and Flash Media Server

    21/32

    FMS Application Architecture

    Authentication and Room Setup

  • 8/14/2019 Flex and Flash Media Server

    22/32

    FMS Application Architecture -

    Instance/Room Setup #2

  • 8/14/2019 Flex and Flash Media Server

    23/32

    FMS / Application Server

    ConnectionsFMS> Application,Request/Response:

    Remoting

    WebServices

    HTTP(LoadVars)

    FMS

    Application,

    Persistent

    Connections: XMLSocket

    Coldfusion FMSgateway(limited)

    FMS< ApplicationServerRequest/Response:

    HTTPvia

    FMS

    Administration

    Server

  • 8/14/2019 Flex and Flash Media Server

    24/32

  • 8/14/2019 Flex and Flash Media Server

    25/32

    Merging Database and Real-Time

    Data

    Note:Thefollowingcodesamplehasbeensimplified!

  • 8/14/2019 Flex and Flash Media Server

    26/32

    // AS 2 Version when RSO Synchs merge into data provider

    private function onSync(){

    var dp = _roomGrid.dataProvider;

    var len = dp.length;

    var i;

    var id;

    var peopleCount;

    var item;for(i = 0; i < len; i++){

    item = dp.getItemAt(i);

    id = item.id;

    peopleCount = _room_so.data[id];

    if (typeof peopleCount == "undefined" || peopleCount == 0){

    item.active = "";

    }

    else {

    item.active = peopleCount;

    }

    }

    dp.dispatchEvent({target:dp, type:"modelChanged",

    eventName: "updateAll"});}

  • 8/14/2019 Flex and Flash Media Server

    27/32

    // AS 2 Version when RSO Synchs merge into data provider

    private function onSync(){

    var dp = _roomGrid.dataProvider;

    var len = dp.length;

    var i;

    var id;

    var peopleCount;

    var item;for(i = 0; i < len; i++){

    item = dp.getItemAt(i);

    id = item.id;

    peopleCount = _room_so.data[id];

    if (typeof peopleCount == "undefined" || peopleCount == 0){

    item.active = "";

    }

    else {

    item.active = peopleCount;

    }

    }

    dp.dispatchEvent({target:dp, type:"modelChanged",

    eventName: "updateAll"});}

  • 8/14/2019 Flex and Flash Media Server

    28/32

    // AS 2 Version when RSO Synchs merge into data provider

    private function onSync(){

    var dp = _roomGrid.dataProvider;

    var len = dp.length;

    var i;

    var id;

    var peopleCount;

    var item;for(i = 0; i < len; i++){

    item = dp.getItemAt(i);

    id = item.id;

    peopleCount = _room_so.data[id];

    if (typeof peopleCount == "undefined" || peopleCount == 0){

    item.active = "";

    }

    else {

    item.active = peopleCount;

    }

    }

    dp.dispatchEvent({target:dp, type:"modelChanged",

    eventName: "updateAll"});}

  • 8/14/2019 Flex and Flash Media Server

    29/32

    // AS 2 Version when RSO Synchs merge into data provider

    private function onSync(){

    var dp = _roomGrid.dataProvider;

    var len = dp.length;

    var i;

    var id;

    var peopleCount;

    var item;for(i = 0; i < len; i++){

    item = dp.getItemAt(i);

    id = item.id;

    peopleCount = _room_so.data[id];

    if (typeof peopleCount == "undefined" || peopleCount == 0){

    item.active = "";

    }

    else {

    item.active = peopleCount;}

    }

    dp.dispatchEvent({target:dp, type:"modelChanged",

    eventName: "updateAll"});}

  • 8/14/2019 Flex and Flash Media Server

    30/32

    Merging Database and Real-Time

    Data

    Q:Whatifanewroomisaddedbysomeoneelsebutthecurrentuser

    doesntrefreshtheirroomlist?

    A:One,oversimplifiedanswer:checkifthereareroom_soslotsthatdont

    matchthe

    data

    in

    the

    dataprovider

    and

    update

    the

    dataprovider

    by

    searchingthedatabase.

  • 8/14/2019 Flex and Flash Media Server

    31/32

    References

    DownloadFMISstartinghere:http://www.adobe.com/products/flashmediainteractive/

    Afterinstallation

    check:

    C:\ProgramFiles\Adobe\FlashMediaServer3\documentation

    (ieinstallDirectory/documentation)

    Myold

    book

    site:

    ProgrammingFlashCommunication

    Severhttp://flashcommunications.net/

    Flex2FMSExplorer:http://flash

    communications.net/technotes/flex2FMSExplorer/

  • 8/14/2019 Flex and Flash Media Server

    32/32

    Questions?

    http://flashcommunications.net/technotes