8/5/2013

A Sample Zimbra API Integration for Real-Time Video (Part II)

Katie Smart's profile picture
Katie Smart Sr. Manager, Global Marketing Communications
In my previous post, I described the important use cases that are necessary for a proper integration of Weemo's real-time video communication service into Zimbra. That was the "product management" part of the discussion -- now we're going to cover the coding aspect. So, what does the code look like? First, let me point out that I coded this integration as a Zimlet, which is a little applet that can be downloaded from Zimbra's Gallery. Doing so introduces some complexities that are rather unique to Zimbra, so this particular API integration isn't as simple as it could be. Still, it's pretty cool to dive into the implementation. Now, let's take a look at the initial variables that we need to set. They're all documented pretty well on GitHub, but basically you're setting the platform and domain, and you're also setting the API key (which you would obtain from Weemo to initiate a trial. Read more here.): [code lang="js"] // Activate debugging in browser's log console weemo.setMode("debug"); // Set environment weemo.setEnvironment("production"); // Set connection platform weemo.setPlatform("p1.weemo.com"); // Choose your domain. weemo.setDomain("weemo-poc.com"); // Configure your ApiKey. Contact Weemo to get one weemo.setApikey(apikeyWeemo); [/code] One of the benefits of using Weemo is that your users only need to sign on to your app once (SSO) and there's no need for a separate login/pwd to access Weemo. You can then use your own unique identifiers to provision users in Weemo. The code below uses a user's e-mail address as the unique identifier, and it's followed by a call to the Weemo Driver to connect to the Weemo Cloud: [code lang="js"] var email = com_weemo_email_handlerObject.prototype.getUsername(); /* * com_weemo_email_handlerObject.prototype.getUsername() will return * the current user email address */ var uid = email.toLowerCase().split('@')[0]; /* * We can now split our email address from the "@". We will keep the * first part * (i.e. for "adrien@server.weemozimbra.com" it would be "adrien") */ // We set the uid with the variable uid. weemo.setUid(uid); // Configure the display name weemo.setDisplayname(uid); //Launches the connection between WeemoDriver and Javascript. weemo.connectToWeemoDriver(); /*Once you are connected to the weemo driver, * this callback is called */ weemo.onConnectionHandler = function(message, code) { switch(message) { case 'connectedWeemoDriver': /* * This method starts the connection from * WeemoDriver to Weemo's Cloud */ weemo.connectToTheCloud(); break; } } [/code] The next bit of code is the logic that determines which use case you're going to be attempting to invoke (whether you're using a 1-to-1 connection, joining a multi-party chat as an attendee, or initiating a multi-party chat as a host): [code lang="js"] EmailTooltipZimlet.prototype.callWeemo = function(email,type) { /* * We split our email address from the "@". We will keep the * first part in name: * (i.e. for "adrien@server.weemozimbra.com" it would be "adrien") * And the second part in domain: * (i.e. for "adrien@server.weemozimbra.com" it would be "server.weemozimbra.com") */ var name = email.split('@')[0]; var domain = email.split('@')[1]; //we define a default message if the user is not a Zimbra user var textUserNotZimbra = "This contact is not a Zimbra member. You cannot make this call" switch(type){ case "INTERNAL": /* *We test if the "domain" is equal to your zimbra domain. *(i.e. if the user is a Zimbra user) */ if(domain == domainZimbraName){ /* *If its a Zimbra user: *Creation of a one-to-one call */ weemo.createCall(name,'internal',name); }else{ /* *If its not a Zimbra user: *Call the "alertWarning" function *with the variable define above */ EmailTooltipZimlet.prototype.alertWarning(textUserNotZimbra); } break; case "ATTENDEE": if(domain == domainZimbraName){ //Join a Group Video chat as attendee weemo.createCall(name,'attendee',name); }else{ EmailTooltipZimlet.prototype.alertWarning(textUserNotZimbra); } break; case "HOST": //Create a Group Video chat as Host weemo.createCall(weemo.getUid(),'host',weemo.getUid()); break; } }; EmailTooltipZimlet.prototype.alertWarning = function(text) { var transitions = [ ZmToast.FADE_IN, ZmToast.PAUSE, ZmToast.FADE_OUT ]; //Creation of the warning message appCtxt.getAppController().setStatusMsg(text, ZmStatusView.LEVEL_WARNING, null, transitions); } [/code] Finally, I've included a chunk of HTML code that's pretty specific to the Zimbra implementation of this example (it's not something I would normally do, but since this example is coded as a Zimlet that needs to be completely self-contained, this is the protocol that Zimbra uses). This is the code that calls the method above, depending on the buttons that the user is clicking: [code lang="html"] //Test if the user has an email address <$ if (data.email) { $> //Test if the user is not myself and is a zimbra user <$ if (!data.myself && data.zimbraUser) { $> <button onclick="EmailTooltipZimlet.prototype.callWeemo(&quot;<$= AjxStringUtil.htmlEncode(data.email) $>&quot;,&quot;INTERNAL&quot;);">Video Chat</button> <button onclick="EmailTooltipZimlet.prototype.callWeemo(&quot;<$= AjxStringUtil.htmlEncode(data.email) $>&quot;,&quot;ATTENDEE&quot;);">Join Group Video</button> <$ } $> //Test if the user is me <$ if (data.myself) { $> <button onclick="EmailTooltipZimlet.prototype.callWeemo(&quot;&quot;,&quot;HOST&quot;);">Host Group Video</button> <$ } $> <$ } $> [/code] I've simplified some of this code for readability, so it's possible that a few errors have crept in here and there. If you have any questions on these examples, please post a comment below. In my next blog post, I'll tackle an integration that's a little more straightforward! Oh, and this is what you get once the integration's done: One-click video chat in Zimbra.

Zimbra video calling integration

Next Up