Welcome!

Video Authors: Elizabeth White, Yakov Fain, Liz McMillan, Dan Ristic, Jnan Dash

Related Topics: @ThingsExpo, Java IoT, Open Source Cloud, Agile Computing, Video, @CloudExpo, WebRTC Summit

@ThingsExpo: Article

Building Video Calling with @PubNub and #WebRTC | @ThingsExpo [#IoT]

Learning about video codecs, signaling, and presence is just the beginning when it comes to implementation

February 8, 2014

Building video calling apps is no small task. Learning about video codecs, signaling, and presence is just the beginning when it comes to implementation. At PubNub, we have partnered our technology with WebRTC to make integration fast and easy to build video chat software. Out of the box, our WebRTC Framework will power audio, video, and data communication between two browsers.

Want to get an idea of what it'll look like when you're finished? Take a look at our live, working demo and code walk through, or watch the video below, or keep reading.

Get Started by Installing the PubNub WebRTC SDK
The first step to building your own video calling app is to install both PubNub and our WebRTC SDK. To install both of these, first download the WebRTC SDK to your local project somewhere. Then include both libraries:

<script src="http://cdn.pubnub.com/pubnub.min.js"></script>

<script src="http://pubnub.github.io/webrtc/webrtc-beta-pubnub.js"></script>

Getting a List of Users to Call
The PubNub library comes with the functionality to see what users come online and offline with our Presence feature. To start, enable this functionality by visiting our Developer's Portal and enabling Presence on your API key. This will allow your clients to start receiving join and leave events.

In our application, every user is subscribed to one channel. This means every user can see all the other users that are currently connected. This is done easily by using a channel named "phonebook":

pubnub.subscribe({
channel: ‘phonebook',
callback: function (message) {
// Do nothing in our callback
},
presence: function (data) {
if (data.action === "join" && data.uuid != myUuid) {
var parts = data.uuid.split(‘-');
var newUser = newUserTemplate({
name: parts[1]
id: parts[0]
});
userList.append(newUser);
} else if (data.action === "leave" and data.uuid != myUuid) {
var parts = data.uuid.split(‘-');<
var item = userList.find("li[data user=\"" + parts[0] + "\"]");
item.remove();}

});

Currently the user data is stored in the data attributes of the element itself. This makes it easy to work with as a prototype, but could be extended to an AngularJS scope or Backbone Collection easily.

Get the User Media
The first step in any WebRTC application is to get the stream from the user's webcam. Luckily, the browser provides an easy-to-use way of getting this stream. The code for doing this uses the getUserMedia API:

function gotStream(stream) {

document.querySelector(‘#self-call-video').src = URL.createObjectURL(stream);

myStream = stream; // Save the stream for later use

};

navigator.webkitGetUserMedia({ audio: true, video: true}, gotStream);

Note here that the stream is stored for use in publishing to a WebRTC peer connection. When you make this call the user will have to allow your application to use the webcam. The callback will not be called until this has been done, so it may be good to notify the user that they need to allow this before moving on.

Calling a User with PubNub WebRTC
Once your application has the user stream you can now publish that stream to another user. Since the RTCPeerConnection requires you to publish your stream before the connection is made, the library provides methods for both subscribing and listening for new connections. The code below will take care of both cases and allow a completed call to be made:

function publishStream(uuid) {

pubnub.publish({

user: uuid,

stream: myStream

});


pubnub.subscribe({

user: uuid,

stream: function (data, event) {

document.querySelector(‘#call-video').src = URL.createObjectUrl(event.stream);

},

disconnect: function (uuid, pc) {

document.querySelector("#call-video").src = "";

$(document).trigger("call:end");

}

});

};


pubnub.onNewConnection(function (uuid) {

if (myStream != null) {

publishStream(uuid);

}

});


pubnub.subscribe({

channel: ‘answer',

callback: function (data) {

if (data.caller == myUuid) {

publishStream(data.callee);

}

}

});

This will take care of all the use cases when calling another user:

  1. The user has called us and we want to react immediately to the call
  2. We are calling another user by publishing our stream to them
  3. We want to subscribe to another user before they call

Hanging Up a WebRTC Call
Hanging up the call is as simple as closing the peer connection. The other user tries to reconnect for a few seconds and then recognizes the call is dropped after that. The library provides an interface for both cases:

function hangUp() {

pubnub.closeConnection(currentCall, function () {

$(document).trigger("call:end");

}

};


pubnub.subscribe({

// ... Other subscribe code here

disconnect: function (uuid, peerConnection) {

hangUp();

// React to the disconnect

}

});

Using Other Logins
Our demo also allows you to log in with any Google+ account. Since our users are identified by a unique user ID, this ID can be anything the developers provide. In this use case, we provide the unique user ID provided by the Google+ API.

Unfortunately this just gives us an ID for each user, so if we want to tell the user who is currently available for chat they will just see the numerical representation of each user. The way we get around this limitation is by including the user name in each unique user ID. Our user names now look like "1234567-John Doe". Now we can call String.split(‘-') to get the name and the ID separated so we can show the human-readable form to the user.

WebRTC Calling In-Browser Is Amazing
Now we can take this seemingly complex application and simplify the time to develop this so even one person can build it. The most amazing thing about this is that it is scalable from the beginning. Using the PubNub network allows your application to scale on a global level.

The RTCPeerConnection also abstracts away much of the complexity that deals with codecs and setting up a peer connection. We at PubNub hope to see a whole new wave of communication applications on the web! Check out the demo of our video calling application here.

Cloud, Big Data, and the 'Internet of Things'

Are you ready to put your data in the cloud?

What is the future of security in the cloud?

Does Docker quickly advance the development of an IoT application?

What are the implications of Moore's Law on Hadoop deployments?

Cloud Expo / @ThingsExpo 2015 New York
(June 9-11, 2015, at the Javits Center, Manhattan)
Cloud Expo / @ThingsExpo 2015 Silicon Valley
(November 3-5, 2015, at the Santa Clara Convention Center)


@ThingsExpo Silicon Valley 2014 Exhibit Floor was packed for three days!

Get all these questions and hundreds more like them answered at the 2015 Cloud Expo and @ThingsExpo June 9-11, 2015, at the Javits Center in New York City, and November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, California.

Our upcoming June 9-11, 2015, event in New York City will present a total of 10 simultaneous tracks (the largest conference content in the world) by an all-star faculty, over three days, plus the popular two-day "Cloud Computing Bootcamp" presented by Janakiram MSV, an analyst with the Gigaom Research analyst network where he covers the Cloud Services landscape.

Cloud and Big Data topics and tracks include: Enterprise Cloud AdoptionAPM & Cloud Computing | Hot TopicsCloud APIs & BusinessCloud Security | Mobility, and Big Data | Analytics.

@ThingsExpo content also tripled from a single track last year to three simultaneous (all sold-out) IoT tracks: Consumer IoTEnterprise IoT, and IoT Developer | WebRTC Convergence.

Our DevOps Summit content also doubled from a single track last June to two simultaneous tracks in November: "Dev" Developer Focus and "Ops" Operations Focus.

Please check back for daily updates as we are working with our distinguished faculty members to finalize new session abstracts. If you have any questions please contact us at events (at) sys-con.com. Last but not least we will announce our keynotes to be delivered by world-class speakers on the hottest topics!


Cloud Expo / @ThingsExpo Silicon Valley 2014 Exhibit Floor Day 3

The largest 'Internet of Things' event in the world has announced "sponsorship opportunities" and "call for papers."

The 1st International Internet of @ThingsExpo was launched this June at the Javits Center in New York City with over 6,000 delegates in attendance. The 2nd International Internet of @ThingsExpo took place November 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, California, with an estimated 6,000 plus delegates attending over three days.

@ThingsExpo is co-located with 16th International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading IoT industry players in the world. In 2015, more than 200 companies will be present on the @ThingsExpo show floor, including global players and the hottest new technology pioneers.


Cloud Expo / @ThingsExpo New York 2014 registration desk at the Javits

Sponsorship and Exhibit Opportunities Are Now Available
Sponsors and exhibitors of Internet of @ThingsExpo will benefit from unmatched branding, profile building and lead generation opportunities through:

  • Featured on-site presentation and ongoing on-demand webcast exposure to a captive audience of industry decision-makers.
  • Showcase exhibition during our new extended dedicated expo hours
  • Breakout Session Priority scheduling for sponsors that have been guaranteed a 35-minute technical session
  • Online advertising in SYS-CON's i-Technology publications
  • Capitalize on our comprehensive marketing efforts leading up to the show with print mailings, e-newsletters and extensive online media coverage.
  • Unprecedented PR Coverage: Editorial coverage on IoT.sys-con.com, Tweets to our 75,000 plus followers, press releases sent on major wire services to over 500 combined analysts and press members who attended Internet of @ThingsExpo - making it the best-covered "Internet of Things" conference in the world

For more information on sponsorship, exhibit, and keynote opportunities contact Carmen Gonzalez by email at events (at) sys-con.com, or by phone 201 802-3021. Book both events for additional savings!

@ThingsExpo 2015 New York (June 9-11 in New York City)
@ThingsExpo 2015 Silicon Valley (November 3-5 in Santa Clara, CA)


@ThingsExpo New York 2014 Power Panel on SYS-CON.tv

World's Top 2nd Wave Cloud and IoT Players: 2014 Sponsors and Exhibitors
In 2014 roughly 12,000 (audited) delegates registered and participated in the world's largest 2nd wave Cloud and 'Internet of Things' event. Conference delegates met with over 150 of the world's leading Cloud and 'Internet of Things' technology pioneers that were among the sponsors and exhibitors, including:

Acision (Exhibitor), ActiveState (Silver), AgilePoint (Exhibitor), Ambernet (Exhibitor), Amplidata (Exhibitor), Apacer Memory America (Exhibitor), Appcore (Exhibitor), AppDynamics (Exhibitor), AppZero (Exhibitor), Aria Systems (Bronze), Automic (Gold), Avere Systems (Exhibitor), Axis Communications (Exhibitor), Basic6 (Exhibitor), Bitium (Exhibitor), BlueBox (Bronze), Brother Office (Bronze), BSQUARE  (Bronze), BUMI (Exhibitor), CA Technologies (Platinum), Calm.io (Bronze), CiRBA (Bronze), Cisco (Gold), Cloudant (Exhibitor), Cloudian (Bronze), CodeFutures (Bronze), Connect2.me (Exhibitor), Connected Data (Exhibitor), CrashPlan/Code42 (Exhibitor), Creative Business Solutions (Exhibitor), Cynny Italia (Exhibitor), Dasher Technologies (Exhibitor), DEAC Data Centers (Silver), Dell (Silver), Distrix (Exhibitor), Dyn (Bronze), e-SignLive by Silanis (Exhibitor), Edgecast Networks (Platinum), ElasticBox (Exhibitor), Endstream/Open Data Centers (Exhibitor),

ESRI (Bronze), Evident.io (Exhibitor), FireHost (Bronze), Gigamon (Silver), GoodData (Bronze), Gridstore (Exhibitor), Harbinger Group (Exhibitor), HP (DevOps Track Sponsor), IAPP (Exhibitor), IBM (Platinum), IDenticard (Exhibitor), Imperva (Exhibitor), IndependenceIT (Exhibitor), Infor (Platinum), InMage (Exhibitor), Innodisk (Exhibitor), ITinvolve (Silver), iwNetworks (Exhibitor), Ixia (Exhibitor), iXsystems (Exhibitor), Jelastic (Exhibitor), MangoApps (Exhibitor), Matrix.org (Silver), MetraTech (Bronze), Microsoft (Diamond), NaviSite (Silver), Net Access Corporation (Exhibitor), NuoDB (Bronze), NY Times (Exhibitor), Objectivity (Exhibitor), OpenCrowd (Exhibitor), Oracle (Platinum Plus), OutSystems (Bronze), Parasoft (Exhibitor), Peak10 (Exhibitor), Peer 1 Hosting (Exhibitor), Pluralsight (Exhibitor), PubNub (Exhibitor), QTS Data Centers (Bronze), Quantum (Exhibitor), Qubell (Platinum), r-evolutionapp (Exhibitor), RackWare (Exhibitor), Red Hat (Bronze), RingStor (e-Bulletin Sponsor), SAP (Gold), ScaleMP (Exhibitor), Seagate (Exhibitor), SendGrid (Exhibitor), Serena Software (Exhibitor), SherWeb (Exhibitor),

SimpleECM (Exhibitor), Smartvue (Exhibitor), SOA Software (Bronze), SOASTA CloudTest (Exhibitor), SoftLayer (Gold), SoftwareAG (Exhibitor), Solgenia (Exhibitor), SPAN Systems (Exhibitor), StackIQ (Exhibitor), Stateless Networks (Exhibitor), Stratogent (Exhibitor), Telecity (Exhibitor), Telehouse (Exhibitor), Telestax (Exhibitor), Transparent Cloud Computing Consortium (Exhibitor), Ulunsoft (Exhibitor), Utimaco (Exhibitor), VASCO Data Security (Bronze), Veeam (Exhibitor), Verizon (Platinum), VictorOps (Exhibitor), Virtustream (Power Panel Sponsor), Vormetric (Bronze), Will Jaya (Exhibitor), Windstream (Silver), WSM - Website Movers International (Exhibitor), Zentera (Exhibitor), Zerto (Exhibitor)

Secure Your VIP Pass to Attend @ThingsExpo New York 2015
@ThingsExpo announced a limited time FREE "Expo Plus" registration option. The onsite registration price of $600 will be set to 'free' for delegates who register before the end of this month.

To take advantage of this opportunity, attendees can use the special "coupon code" on the registration page and secure their "@ThingsExpo Plus" registration to attend all keynotes and general sessions, as well as a limited number of technical sessions each day of the show, in addition to full access to the expo floor and the @ThingsExpo hackathons throughout the week.

The registration page is located at the @ThingsExpo site here.


@ThingsExpo New York 2015 'Call for Papers' Now Open
The 3rd International Internet of @ThingsExpo, to be held June 9-11, 2015, at the Javits Center in New York City, New York, announces that its 'Call for Papers' is now open. The event will feature a world class, all-star faculty with the hottest IoT topics covered in three distinct tracks.

Track 1 - Consumer IoT and Wearables: Smart Appliances, Wearables, Smart Cars, Smartphones 2.0, Smart Travel, Personal Fitness, Health Care, Personalized Marketing, Customized Shopping, Personal Finance, The Digital Divide, Mobile Cash & Markets, Games & the IoT, The Future of Education, Virtual Reality

Track 2 - Enterprise IoT: The Business Case for IoT, Smart Grids, Smart Cities, Smart Transportation, The Smart Home, M2M, Authentication/Security, Wiring the IoT, The Internet of Everything, Digital Transformation of Enterprise IT, Agriculture, Transportation, Manufacturing, Local & State Government, Federal Government

Track 3 - IoT Developer | WebRTC Convergence: WebRTC, Eclipse Foundation, Cloud Foundry, Docker & Linux Containers, Node-Red, Open Source Hardware, Leveraging SOA, Multi-Cloud IoT, Evolving Standards, WebSockets, Security & Privacy Protocols, GPS & Proximity Services, Bluetooth/RFID/etc., XMPP, Nest Labs


@ThingsExpo billboard is viewed by more than 1.3 million motorists per week on Highway 101, in the heart of Silicon Valley

Help plant your flag in the fast-expanding business opportunity that is the Internet of Things: Submit your speaking proposal today here!

Download @ThingsExpo Newsletter Today ▸ Here

Chris Matthieu Named @ThingsExpo Tech Chair

Internet of @ThingsExpo named Chris Matthieu tech chair of Internet of @ThingsExpo 2014 Silicon Valley.

Chris Matthieu has two decades of telecom and web experience. He launched his Teleku cloud communications-as-a-service platform at eComm in 2010, which was acquired by Voxeo. Next he built an open source Node.JS PaaS called Nodester, which was acquired by AppFog. His latest startups include Twelephone. Leveraging HTML5 and WebRTC, Twelephone's BHAG (Big Hairy Audacious Goal) is to become the next generation telecom company running in the Web browser. Chris is currently co-founder and CTO of Octoblu.

Website: http://www.ThingsExpo.com
Twitter: http://www.Twitter.com/ThingsExpo

CEO Power Panel in Silicon Valley Examined Agility, Cloud, Big Data, and the 'Internet of Things'

Things are being built upon cloud foundations to transform organizations. This CEO Power Panel at 15th Cloud Expo, moderated by Roger Strukhoff, Cloud Expo and @ThingsExpo conference chair, addressed the big issues involving these technologies and, more important, the results they will achieve. Rodney Rogers, chairman and CEO of Virtustream; Brendan O'Brien, co-founder of Aria Systems, Bart Copeland, president and CEO of ActiveState Software; Jim Cowie, chief scientist at Dyn; Dave Wagstaff, VP and chief architect at BSQUARE Corporation; Seth Proctor, CTO of NuoDB, Inc.; and Andris Gailitis, CIO of DEAC, discussed how important public, private, and hybrid cloud are to the enterprise. How does one define Big Data? And how is the IoT tying all this together?

About SYS-CON Media & Events
SYS-CON Media (www.sys-con.com) has since 1994 been connecting technology companies and customers through a comprehensive content stream - featuring over forty focused subject areas, from Cloud Computing to Web Security - interwoven with market-leading full-scale conferences produced by SYS-CON Events. The company's internationally recognized brands include among others Cloud Expo® (CloudComputingExpo.com@CloudExpo), Big Data Expo(BigDataExpo.net@BigDataExpo), DevOps Summit (DevOpsSummit.sys-con.com@DevOpsSummit), Internet of @ThingsExpo (ThingsExpo.com@ThingsExpo) and Cloud Computing Bootcamp (CloudComputingBootcamp.com).

Cloud Expo®, Big Data Expo® and @ThingsExpo® are registered trademarks of Cloud Expo, Inc., a SYS-CON Events company.

More Stories By Dan Ristic

Dan Ristic is Developer Evangelist and Front End Engineer at PubNub. Dan is crazy about user interface development and has been programming on the web for five years. He grew up in Chicago and studied engineering at the University of Advancing Technology in Phoenix, AZ.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.