WebRTC SDK Upgraded! ES6, new camera control and 100x less code than v1.
The following demo uses PubNub for signaling to transfer the metadata and establish the peer-to-peer connection. Once the connection is established, the video and voice runs on public Google STUN/TURN servers.
Keep in mind, PubNub can provide the signaling for WebRTC, and requires you to combine it with a hosted WebRTC solution. For more detail on what PubNub does, and what PubNub doesn’t do with WebRTC, check out this article: https://support.pubnub.com/support/solutions/articles/14000043715-does-pubnub-provide-webrtc-and-video-chat-
At PubNub we believe simplicity is essential for our SDK usability.
We've taken a simplified approach to WebRTC Peer Connections by creating
and easy-to-use SDK for developers.
The ideas of simplicity should span all platforms and devices too and
that's why we also support Android WebRTC mobile calling
with compatibility for iOS native Objective-C based WebRTC SDK.
This simple developer WebRTC SDK is powered by
PubNub Data Stream Network.
Supported WebRTC Features
WebRTC SDK offers many rich features and capabilities to enhance the
WebRTC experience. Here is a list of the options available.
Photo Snap Camera Transmit (STUN-less Firewall Ready)
Supported WebRTC Calling API Mobile Devices and Browser
List of supported WebRTC Calling Clients including Android and Chrome.
Chrome
Firefox
Opera
Mobile Chrome - Android
Mobile Firefox - Android
iOS Native Objective-C Compatible
Android Native Java Compatible
The Basic Concepts of WebRTC Calling
Making a WebRTC phone Call
// Dial Numbervarsession=phone.dial('123-456');
Receiving a WebRTC phone Call
phone.receive(function(session){// On Call Receiving});
Adding Video Live Stream
phone.receive(function(session){session.connected(function(session){// Append Live Video Feed$('#display-div').append(session.video);});});
Simple WebRTC Walkthrough
Next we will start with a copy/paste example of our SDK.
This Simple Example Comes in Two WebRTC Calling Sections.
Part One will talk about how you can Make a WebRTC Call.
Part Two will teach you about Receiving a WebRTC Call.
Making a WebRTC Calling & Receiving - Part One and Two
Make your first html file named dial.html and copy/paste the following:
<!-- dial.html --><!-- Video Output Zone --><divid="video-out"> Making a Call </div><!-- Libs and Scripts --><scriptsrc="https://stephenlb.github.io/webrtc-sdk/js/webrtc-v2.js"></script><script>(()=>{// ~Warning~ You must get your own API Keys for non-demo purposes.// ~Warning~ Get your PubNub API Keys: https://www.pubnub.com/get-started/// The phone *number* can by any string valuevarphone=PHONE({number : '1234',publish_key : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',ssl : true});// As soon as the phone is ready we can make callsphone.ready(function(){// Dial a Number and get the Call Session// For simplicity the phone number is the same for both caller/receiver.// you should use different phone numbers for each user.varsession=phone.dial('1234');});// When Call Comes In or is to be Connectedphone.receive(function(session){// Display Your Friend's Live Videosession.connected(function(session){phone.$('video-out').appendChild(session.video);});});})();</script>
Live WebRTC Call Dialer
If you combine both the WebRTC Dialer and the WebRTC Receiver
you will get a complete working phone.
We have a live running WebRTC Demo which uses our WebRTC SDK.
This demo includes a soft-touch UI for an easy calling experience.
You can click the link above to try our live WebRTC Demo
which is powered by our easy to use SDK.
What Can you build with a WebRTC Simple Calling API?
There are a plethera of important and useful applications which may
be built using the PubNub WebRTC Calling SDK.
I have cataloged a list of ideas for WebRTC Use Cases:
Amazon Mayday Help Button
Salesforce SOS Help Button
WebRTC Skype Replica
Traditional Phone Replacement
Chatroulette
VoIP Replacement
Customer Support Calls
In-bound Sales Calls
Easy Remote Meetings
Call Assistant or Specialists
Big Screen Public Announcemnt
Live Presentations
So many different options and even more use cases
that have yet to be discovered.
What is a WebRTC Session?
A WebRTC Session is a reference to a call instance
between two connected parties.
The idea is the session is active as long as the two parties are connected.
Once one party member disconnects or leaves, the session will be terminated.
You have access to several helper methods for
session.connected() and session.ended() events.
API Documentation for WebRTC Calling SDK
The WebRTC Simple SDK API Reference will provide to you all the options
available to you as the developer.
WebRTC Phone Initialization
PHONE({ ... })
Initialize the phone object which can send/receive multiple
WebRTC call sessions without limit.
Be careful as your bandwidth is the true limiter.
Your phone number is your true ring-in point of truth.
You can set your phone number at init time from the
varphone=PHONE({number : '1234567890'});
WebRTC Local Camera Video Element
We provide you easy access to your local camera with
a pre-initialized video element that is easy to access.
Simply append the element to your DOM and the feed will
stream automatically.
$('#display-div').append(phone.video);
WebRTC Phone SSL Mode
You can enable SSL signalling mode for the local client device
by setting the ssl : true parameter at init.
varphone=PHONE({ssl : true...})
WebRTC Cipher AES 256 Crypto Mode
You can enable AES256 Encryption (essentially password mode)
on your phone for additional security.
You're friends have to know your password to call you.
AES256 option allows you to password protect your phone and
only give access to people you know.
You have to give your friend your password before they can call you.
WebRTC calling on Android is web-ready compatible and works
out-of-the-box today without modifications or additional code.
Also WebRTC Calling is supported for Android and iOS Native too.
WebRTC Photo Sharing Bonus STUN-less Ready
You can easily snap a photo from the video stream and
send it to your friends in an instant.
You can think of this as an Instagram WebRTC style.
Also Photo Sharing works through Corprate Enterprise Firewalls.
WebRTC Camera Photo Sharing Broadcast
phone.snap()
Broadcast your camera photo to all connected sessions.
Also get the IMG data as base64 supported format
for local display if desired.
phone.ready(function(){// Auto Send Camera's Photo to all connected Sessions.varphoto=phone.snap();$('#photo-div').append(photo.image);});
WebRTC Session Camera Photo Share
session.snap()
Send your camera's latest frame as raw IMG to
a specific call session.
By default the WebRTC SDK starts user's camera. You can optionally prevent this by setting the autocam flag to false. Here is an example of disabling the camera on initialization.
<!-- dial.html --><divid="number"></div><buttonid="startcam">Start Camera</button><buttonid="startcall">Start Call</button><inputid="dial"><!-- Video Output Zone --><divid="video-out"></div><!-- Libs and Scripts --><scriptsrc="https://stephenlb.github.io/webrtc-sdk/js/webrtc-v2.js"></script><script>(=>(){// ~Warning~ You must get your own API Keys for non-demo purposes.// ~Warning~ Get your PubNub API Keys: https://www.pubnub.com/get-started/// The phone *number* can by any string valuevar number =Math.ceil(Math.random()*10000);varready=false;varsession=null;varphone=PHONE({number : number,autocam : false,publish_key : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',ssl : true});// Show Numberphone('number').innerHTML='Number: '+number;// Start Cameraphone.bind('mousedown,touchstart',phone.$('startcam'),function(){phone.startcamera();returnfalse;});// Start Callphone.bind('mousedown,touchstart',phone.$('startcall'),function(){console.log('calling');session=phone.dial(phone.$('dial').value);returnfalse;});// As soon as the phone is ready we can make callsphone.ready(function(){// Dial a Number and get the Call Session// For simplicity the phone number is the same for both caller/receiver.// you should use different phone numbers for each user.ready=true;});// When Call Comes In or is to be Connectedphone.receive(function(session){// Display Your Friend's Live Videosession.connected(function(session){phone.$('video-out').appendChild(session.video);});});})();</script>
WebRTC JSON Messaging Bonus STUN-less Ready
Adding extra realtime capabilities between connected parties
is essential for creating collaborative and chat features.
You can do that with PubNub's WebRTC SDK easily without
firewall restrictions from corporate policies.
