2/7/2014

Getting Started with Weemo and WebRTC: Part 1

Katie Smart's profile picture
Katie Smart Sr. Manager, Global Marketing Communications
Weemo makes it easy to get started incorporating WebRTC video into your own web-app. With Weemo, all you need to do is manage your User names, and who wants to talk to who. Weemo tracks the presence of your users and handles all of the details of setting up SIP endpoints and figuring out the best way for the video packets to get from user to user.

Get an Application Identifier from Weemo

Visit http://www.weemo.com/project/start/ and request access. Weemo will email you a "POC" AppID. An AppID looks like this: [code lang="js"] 42abcd78ef60 [/code] You'll put this in your Javascript. In Weemo terms, POC stands for "Proof of Concept," and the key will enable you a 30 day trial. POC AppIDs are simple to use and if you run out of time in your 30 day trial, you can request more. Just send a note to bizdev@weemo.com and we'll help you out.

Include the Javascript

Weemo hosts the Javascript API on our servers, and we deliver the version that matches your AppID. To include the Javascript in your web-app, put this in the head of your page. [code lang="js"] <script type="text/javascript" src="https://download.weemo.com/js/webappid/42abcd78ef60"> </script> [/code] Notice how the AppID we gave you earlier is used in this reference. Make sure it matches!

Include the CSS

Weemo's Javascript API dynamically generates the DOM elements for the video on your page. In our reference CSS these elements are placed on top of everything else, at the bottom-right of the window. The styling that defines this is in our github Javascript repository under the examples directory. It is called "weemo.css". You should copy this file from our examples and put it on your own server. Then include it in your page like this: [code lang="js"] <link rel="stylesheet" type="text/css" href="weemo.css"/> [/code] If you want to change the styling later you can, but you should use this to get started.

Initialize the Weemo Object

When your web-app wants to enable Weemo video, it should instantiate and initialize the Weemo object. There should be only one instance of this object on the page. Initialize the Weemo object with your AppID and the UID (User-ID) of the current user. [code lang="js"] var uid = "bob.smith@foo.com" var weemo = new Weemo("42abcd78ef60", uid, "internal") weemo.initialize() [/code] This code sets off a series of actions that registers "bob.smith@foo.com" with Weemo under your AppID. In the example here it is "42abcd78ef60". The keyword "internal" says that this user is authenticated inside your application.

UserIDs and Display Names

A user's UID is the way that you refer to users on your system. If you are using Rails with Devise, you might use current_user.email as the unique identifier of the currently logged-in user, like this: [code lang="js"] var weemo = new Weemo("42abcd78ef60", "<%= current_user.email %>", "internal") weemo.initialize() [/code] UIDs and POC (Proof of Concept) AppIDs have a special relationship. A POC AppID enables the use of arbitrary UIDs for the duration of your trial period. These UIDs may be whatever is most natural in your system, and for many systems that will be an email address or login name. With Weemo, you design your app around users and their IDs. Weemo takes care of figuring out where they are, whether they are behind a firewall, and how to reach them. Weemo hosts a global server network that helps to route video sessions. The best server at any one instant may be dependent on a user's available bandwidth or geographic location. Weeemo figures this out for you and your user so that you (as a developer) can concentrate on your application.

Make a Call

Now it's time to make a video call. For this you need two users, each with different UIDs. Simply use the Weemo object to initiate the call. [code lang="js"] otherUid = "mary.jones@foo.com" weemo.createCall(otherUid, "internal", otherUid) [/code] This causes the "caller" to call the "callee." To complete the app, we will need to implement some code to answer the call, but we'll leave this for another installment when we get to Weemo callbacks. (If you're interested, the examples in our github repository have the details.)

Conclusion

This post introduced some of the things that help make Weemo different and easy to use. Request an AppID from Weemo and try it out for yourself.

Next Up