stephenlb/webrtc-sdk

WebRTC Simple Calling API + Mobile SDK - A simplified approach to RTCPeerConnection for mobile and web video calling apps.

WebRTC V2 Simple Calling API + Mobile

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.

1. Photo Snap Camera Transmit (STUN-less Firewall Ready)
2. WebRTC Dialing (STUN-less Firewall Ready)
3. WebRTC Call Receiving (STUN-less Firewall Ready)
4. JSON App Messaging (chat/signals/etc.) (STUN-less Firewall Ready)
5. Multi-party Calling
6. Audio only Calls Optional
7. Broadcasting Mode
8. Instant Connect Dialing Optional
9. Security SSL, AES256, ACL Access Control Management
10. Password Protection via Cipher
11. Event History and Call Records
12. Photo History and Recording Static Snapshots of Calls (only stills)
13. Connectivity Detection and Auto-Recovery
14. Pre-configured Video Element for Streaming Video/Audio
15. Pre-configured Local Camera Video Element for Streaming Video/Audio
16. Network Connectivity Hooks (online/offline)
17. SDK Level Debug Output

Testing Locally

You need an HTTPS (TLS) File Server. To start a local secure file server:

python <(curl -L https://goo.gl/LiW3lp)

Then open your browser and point it to your file in the directory you ran the python HTTPS server.

open https://localhost:4443/tutorials/

This is a Simple Python HTTPS Secure Server https://gist.github.com/stephenlb/2e19d98039469b9d0134

We posted an answer on StackOverflow WebRTC HTTPS. This will get you started testing on your laptop.

Supported WebRTC Calling API Mobile Devices and Browser

List of supported WebRTC Calling Clients including Android and Chrome.

1. Chrome
2. Firefox
3. Opera
4. Mobile Chrome - Android
5. Mobile Firefox - Android
6. iOS Native Objective-C Compatible
7. Android Native Java Compatible

The Basic Concepts of WebRTC Calling

Making a WebRTC phone Call

// Dial Number
var session = 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.

1. Part One will talk about how you can Make a WebRTC Call.
2. 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 -->
<div id="video-out"> Making a Call </div>

<!-- Libs and Scripts -->
<script src="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 value
    var phone = 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 calls
    phone.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.
        var session = phone.dial('1234');

    });

    // When Call Comes In or is to be Connected
    phone.receive(function(session){

        // Display Your Friend's Live Video
        session.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.

try the live WebRTC Dialing: WebRTC Simple Calling API + Mobile

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:

1. Amazon Mayday Help Button
2. Salesforce SOS Help Button
3. WebRTC Skype Replica
4. Traditional Phone Replacement
5. Chatroulette
6. VoIP Replacement
7. Customer Support Calls
8. In-bound Sales Calls
9. Easy Remote Meetings
10. Call Assistant or Specialists
11. Big Screen Public Announcemnt
12. 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.

var phone = PHONE({
    number        : '1234567890',
    publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',
    subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',
    media         : { audio : true, video : true },
    ssl           : true
})

WebRTC Phone Number

Your phone number is your true ring-in point of truth. You can set your phone number at init time from the

var phone = 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.

var phone = 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.

var phone = PHONE({
    cipher_key : 'SUPER-SECRET-PASSWORD-HERE'
    ...
})

WebRTC Phone Audio Only Mode

You can disable video codec and stream only Audio by setting the following param in your init code. Set video : false in the media section.

var phone = PHONE({
    media : { audio : true, video : false }
    ...
})

WebRTC Phone Mobile Calling on Android

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.
    var photo = 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.

phone.ready(function(){
    var session = phone.dial('4321');
    var photo   = session.snap();
    $('#photo-div').append(photo.image);
});

Prevent Camera from Starting Automatically

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 -->
<div id="number"></div>

<button id="startcam">Start Camera</button>
<button id="startcall">Start Call</button><input id="dial">

<!-- Video Output Zone -->
<div id="video-out"></div>

<!-- Libs and Scripts -->
<script src="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 value
    var number  = Math.ceil(Math.random()*10000);
    var ready   = false;
    var session = null;
    var phone   = 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 Number
    phone('number').innerHTML = 'Number: ' + number;

    // Start Camera
    phone.bind( 'mousedown,touchstart', phone.$('startcam'), function() {
        phone.startcamera();
        return false;
    } );

    // Start Call
    phone.bind( 'mousedown,touchstart', phone.$('startcall'), function() {
        console.log('calling');
        session = phone.dial(phone.$('dial').value);
        return false;
    } );

    // As soon as the phone is ready we can make calls
    phone.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 Connected
    phone.receive(function(session){

        // Display Your Friend's Live Video
        session.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.

Message Broadcasting to All Sessions

phone.send(...)

Send a JSON message to all connected sessions.

phone.send({ text : 'HI!' });

Receive a JSON message from Any Session

phone.message(function(message){ ... })

Get all messages sent from any session.

phone.message(function( session, message ) {
    show_chat( session.number, message.text );
} );

Send a JSON Message to One Session

session.send(...)

You can send a direct JSON message to one session only.

session.send({ text : 'Hi there!' });

Receive a JSON message from One Session

session.message(function(){ ... })

You can set callbacks to capture JSON messages from a specific call session.

session.message(function( session, message ) {
    show_chat( session.number, message.text );
} );

WebRTC Phone Ready

phone.ready(function(){ ... })

Making calls is easy but you can only do it when the phone is ready to issue the signals properly and the local interfaces have been configured such as audio/video media.

phone.ready(function(){
    // Ready to make Calls
    var session = phone.dial("my-friend's-number");
});

WebRTC Phone Receiving Calls

phone.receive(function(session){ ... })

It's really ease to setup your phone to receive calls using the phone.receive() method. This method expects a callback function and will pass the WebRTC Session object as the only parameter.

phone.receive(function(session){
    session.connected(function(session){ /* call connected */ });
    session.ended(function(session){     /* call ended     */ });
});

Get Your Phone Number

var num = phone.number()

Sometimes you need to access the phone number that was set during initialization time. You can do that by calling phone.number() method which returns the setup number.

var num = phone.number();

Get Caller Phone Number

var num = session.number

To access current caller number, check the session object number property session.number.

var num = session.number;

Get Call Start Time

var start = session.started

The Session object stores the call start time which you can use to display call timer on the screen.

var start = session.started;

WebRTC Phone Call History via PubNub

phone.history(...)

You can get the call history of a phone number by issuing a PubNub History call on the phne number.

phone.history({
    number  : '1234',
    history : function(call_history) {
        console.log(call_history);
    }
});

WebRTC Phone Dialing Numbers

phone.dial(number)

You can easily make WebRTC calls by executing the dial() method. The number can be any string value such as "415-555-5555".

var session = phone.dial(number);

session.connected(function(session){ /* call connected */ });
session.ended(function(session){     /* call ended     */ });

Set Camera Resolution

You can change the resolution of your camera's media capture. This allows you to set lower resolutions for slower p2p connections. You can also set HD 4K resolutions if you have the camera to do so.

// Phone
const phone = PHONE({
    number        : number
,   media         : { video: { width:1280, height:720 } } // <---- set res
,   publish_key   : pubkey
,   subscribe_key : subkey 
});

WebRTC Phone Multi-party Dialing

phone.dial(number)

The PubNub WebRTC Phone Dialer and Receiver supports unlimited party in/out calling.

var sessions = [];

sessions.push(phone.dial('friend-one'));
sessions.push(phone.dial('friend-two'));
sessions.push(phone.dial('friend-three'));
sessions.push(phone.dial('friend-four'));
sessions.push(phone.dial('friend-five'));

sessions.forEach(function(friend){
    friend.connected(function(session){ /* call connected */ });
    friend.ended(function(session){     /* call ended     */ });
});

WebRTC Video and Audio Broadcasting Mode

phone.receive(function(session){ ... })

You can receive unlimited inbound calls and become a broadcast beacon stream. You are limited by your bandwidth upload capacity.

Broadcaster with Audience Members

You'll start by opening the stream for the broadcaster so audience members can join in. Start broadcasting as the broadcaster:

Broadcaster

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Initialize the Broadcaster's Device
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
var broadcaster = PHONE({
    number        : "BROADCASTER",  // If you want more than one broadcaster, use unique ids
    media         : { audio : true, video : true },
    publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',
    subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',
    ssl           : true
});

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Wait for New Viewers to Join
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
broadcaster.receive(function(new_viewer){
    new_viewer.connected(function(viewer){ /* ... */ }); // new viewer joined
    new_viewer.ended(function(viewer){ /* ... */ });  // viewer left
    //new_viewer.hangup();  // if you want to block the viewer
});

Viewer

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Initialize the Viewer's Device
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
var viewer = PHONE({
    number        : "VIEWER-"+new Date,
    publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',
    subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',
    ssl           : true
});

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Join a Broadcast as a Viewer
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
viewer.ready(function(){
    var broadcaster = phone.dial("BROADCASTER");
});

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Show Broadcast's Video Stream
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
viewer.receive(function(broadcaster){
    broadcaster.connected(function(broadcaster){
        document.body.appendChild(broadcaster.video);
    });
    broadcaster.ended(function(broadcaster){ /* broadcast ended */ });
});

WebRTC Phone Hangup

phone.hangup()

There are two ways to hangup WebRTC calls. You can use the phone-level method phone.hangup() which will hangup all calls at once. Or you can use the session-level method session.hangup() which will only hangup that call session.

// hangup all calls
phone.hangup();

// hangup single session
session.hangup();

WebRTC Phone Network Events

PHONE.disconnect(function(){ ... })

You need to keep track of the connectivity state of your local network connection. You can do that using these helper methods.

PHONE.connect(function(){    console.log('network LIVE.') })
PHONE.disconnect(function(){ console.log('network GONE.') })
PHONE.reconnect(function(){  console.log('network BACK!') })

WebRTC Phone Unable to Initialize

phone.unable(function(details){ ... })

Some devices or in certain situations the phone may not initialize. We give you a simple callback for when the phone startup fails.

phone.unable(function(details){
    console.log("Phone is unable to initialize.");
    console.log("Try reloading, or give up.");
});

WebRTC Stop Camera and Mic

phone.camera.stop()

You may want to Stop the Camera/Mic recording. By default the camera and mic are turned on as soon as possible. This allows for faster calling connection speeds.

var streamref = phone.camera.stop();

WebRTC Phone Debugging

phone.debug(function(details){ ... })

You might want to see under the covers of WebRTC Calling by enabling debugging mode on the WebRTC SDK.

phone.debug(function(details){
     console.log(details);
});

WebRTC Phone Auto Hangup and Goodbye on Unload

The WebRTC Calling SDK will attempt an automatic goodbye upon graceful disconnection attempts. This allows the 2nd party on the other end of the phone line to receive a call ended signal. This happens automatically.

The WebRTC Session Object

A WebRTC Session represents the connection between two parties with access to the session.video element as well as the place to register event callbacks as needed such as session.connected and also the ended callback for when the call disconnects or hangs up.

session.ended(function(session){})

A session object is generated automatically for you upon dialing

var session = phone.dial('...')

and also inside registered event callbacks.

phone.receive(function(session){})

WebRTC Session Number

session.number

Returns the 2nd party's (caller/callee) Phone Number associated with the Call Session.

var session = phone.dial('12345');
console.log(session.number == '12345');

WebRTC Session Connected Callback

session.connected(function(session){})

Sets the callback for when the session is connected and the video stream is ready to display.

session.connected(function(session){
    var body = phone.$$('body')[0];
    body.appendChild(session.video);
});

WebRTC Session Ended Callback

session.ended(function(session){})

The session has ended by one of the parties. Any secondary session will continue to stream.

session.ended(function(session){
    sounds.play('sound/goodbye');
    console.log("Bye!");
});

WebRTC Session Hangup

session.hangup()

End the session right now. The ended callback will fire for both connected parties.

$("#hangup").click(function(){
    // End the call
    session.hangup();
});

WebRTC Session Video Element

session.video

The Session Video Element is Accessable and Ready inside the connected only. The Session Video ref is an HTML Video Element <video>.

session.connected(function(session){
    var body  = phone.$$('body')[0];
    var video = session.video;

    body.appendChild(video);
});

WebRTC Session Image Element

session.image

The Session Image Element is Accessable and Ready inside the thumbnail, connected and ended callbacks. The Session Image ref is an HTML Image Element <img>.

session.thumbnail(function(session){
    var body  = phone.$$('body')[0];
    var image = session.image;

    body.appendChild(image);
});

WebRTC Session RTCPeerConnection Reference

session.pc

Reference to WebRTC RTCPeerConnection.

var sesionPeerConnection = session.pc;

WebRTC Session Call Rejection and Accept Permissions

phone.send

phone.send allows you to send programmatic messages between two phones without a video/audio stream. You may wish to setup a Call Accept/Reject phase to allow to users to accept or reject calls.

Before the Sending the Video/Audio Stream, send a signal to ask for call permission:

let user_number = "1235445"; // my friends number

function call_request(number) {
    phone.send( { "accept" : "Would you like to accept this call?" }, user_number );
}
function call_accepted() {
    // start voice/video session
    phone.dial(user_number);
}
function call_rejected() {
    // show call rejected screen
}

This allows you to create a simple contract between two parties before the video and audio stream begins.

WebRTC Adding Custom STUN and TURN Servers

You may desire to add your own custom stun or turn servers by using the servers parameter on initialization. For example http://xirsys.com/ offers paid-stun solution.

var phone = PHONE({
    servers : [
        {"username":"free","url":"turn:127.0.0.1?transport=udp","credential":"free"},
        {"username":"free","url":"turn:127.0.0.1?transport=tcp","credential":"free"}
    ]
    // ...
})

SDK Possible Upgrade Future Patches

- Race - During Ring/Receive Handshake, a Hangup will create Race
- Wire-pulled Disconnect Detect via DataChannels Pings
- 5 Second Timeout to Retry with 30 Second of Retries
- Auto-reconnect re-SDP/ICE Recovery
- Custom Message Events
- Presence
- Call History
- User Lists

Implementation Reference Upgrades

- Pre-Allow Transmit - Before "allow" fire a PubNub message
- Chat on Screen
- Multi-Party Video in GUI
- Full Screen Mode
- Controlling an iFrame

What is Happens Inside the Simple WebRTC SDK

Signaling and Exchanging ICE Candidates via PubNub

The goal is to exchange ICE candidate packets between two peers. ICE candidate packets are structured payloads which contain possible path recommendations between two peers. You can use a lib which will take care of the nitty gritty such as WebRTC Simple Calling API + Mobile however below is the general direction that is taken inside the SDK itself.

Note that the demonstration code below is intintionally incomplete. Note however the PubNub WebRTC Signaling SDK properly covers most Calling Situations.

Signaling Example Code Follows

<script src="https://cdn.pubnub.com/pubnub-3.6.3.min.js"></script>
<script>(function(){
    
    // INIT P2P Packet Exchanger
    var pubnub = PUBNUB({
        publish_key   : 'demo',
        subscribe_key : 'demo',
        ssl           : true
    })
    
    // You need to specify the exchange channel for the peers to
    // exchange ICE Candidates.
    var exchange_channel = "p2p-exchange";
    
    // LISTEN FOR SDP and ICE CANDIDATES
    pubnub.subscribe({
        channel : exchange_channel,
        message : receive_ice_candidates
    })
    
    // SDP and ICE CANDIDATES RECEIVER PROCESSOR FUNCTION
    function receive_ice_candidates(ice_candidate) {
        // Attempt peer connection or upgrade route if better route...
        console.log(ice_candidate);
        // ... RTC Peer Connection upgrade/attempt ...
    }
    
    // SEND SDP and ICE CANDIDATES
    function send_ice_candidate(ice) {
        pubnub.publish({
            channel : exchange_channel,
            message : ice
        })
    }

})();</script>

Generate ICE Candidates Example Code Follows:

<script>(function(){
    // CREATE ICE CANDIDATES
    var pc = new RTCPeerConnection();
    navigator.getUserMedia( {video: true}, function(stream) {
        pc.onaddstream({stream:stream});
        pc.addStream(stream);
        pc.createOffer( function(offer) {
            pc.setLocalDescription(
                new RTCSessionDescription(offer),
                send_ice_candidate,
                error
            );
        }, error );
    } );

})();</script>

WebRTC Troubleshooting

You may need to force clear your cache on your device, close the app completley, then restart it. This is uncommon. You can also enable debugging at the code-level by hooking onto the phone.unable(fn) and phone.debug(fn).

webrtc-sdk's Issues

Chanage media in phone

Hi, is there a way to change the media in the phone without instantiating a new PHONE instance?
Something like:

var phone = PHONE({number: "1234", media: { audio : true, video : false }});
phone.dial("567");
phone.media({ audio : true, video : true })

Mac - Safari. TypeError: talk.pc.addStream is not a function.

On iOS Safari everything works fine, but on Mac Safari I get this error:
TypeError: talk.pc.addStream is not a function. (In 'talk.pc.addStream(mystream)', 'talk.pc.addStream' is undefined) (anonymous function) — webrtc.js:196 get_conversation — webrtc.js:204 dial — webrtc.js:251 dial — webrtc-sdk:200 (anonymous function) — webrtc-sdk:220 onready — webrtc.js:401 connect — webrtc.js:392 (anonymous function) — pubnub.js:1129 (anonymous function) — pubnub.js:568 each — pubnub.js:297 each_channel — pubnub.js:562 success — pubnub.js:1126 finished — pubnub.js:2996 Selected Element <div id="pubnub-chat-output">…</div>

WebRTC SDK doesn't support Pubnub V4

The webrtc.js doesn't work with Pubnub v4
https://cdn.pubnub.com/sdk/javascript/pubnub.4.12.0.js

reject the call

hi @stephenlb ,
I want to know if it is possible to reject a call ?
(a confirmation to enter in conversation)

how to Many to many Message send and receive ?

In your current example one user become broadcaster and others are viewer. If broadcaster send any message then it received by all viewer. But if suppose viewer1 send send message then its only be view-able by broadcaster only and not by others. I have looking for the feature where viewer1 send message to broadcaster and can be view-able by everyone. Is it possible ?

Please help.

List of errors

there is a list of errors? for example if the browser does not technological or other media

appendChild JS error

I get this in Chrome:

Not working in ios

tested ios latest version and older not working

iOS Example

I'd like to see an example of a native implementation I could deploy to iOS

A fallback to pubnub non rtc would be nice in the even that I'm running an app in a browser that doesn't support getusermedia (iOS webview)

Are DataChannels supported?

Hi @stephenlb ,
In your repo's readme.md list of supported WebRTC features, there is no mention of WebRTC DataChannels. Are they supported, say if I wanted to use them for creating peer-to-peer network games?
Thanks!

Phone number designations

Can you elaborate on how the phone numbers are designated and what system it would need to go into? Would I just assign each user an ID that would be their phone number, and the Phone.PhoneNumber field would have this number?

Thanks

session.snap sometimes takes my own camera photo instead of the caller

As far as I understood phone.snap is used to take a snapshot of local video cam
and session.snap is used to take a snapshot of other callers video, but sometimes session.snap takes my local video pic.

not working video and your live example

Hi,
i want to try and created account, but your this sdk could not able to start as testing trial.

your live example - http://stephenlb.github.io/webrtc-sdk/
not working (i also tried on localhost - same error ) video allow permission takes, but
video not display and also i opened in two browser with call url with another user, but not dial
to user number and not also exchange chat - not working

-- here you mention dial.html , not found part two referenced here and please create example
of receiver.html so we can have proper idea with dial.html

-- please mention here full example to create room and another user to call in that room
from two browser

Choose Camera possible?

Is it possible to choose what camera this uses?

I can't get local video

Hello, I am writing a small videocall application based on the helloworld example. My problem is I that I'm unable to show the local video. The code goes as follows:

<!-- dial.html -->

<!-- Video Output Zone -->
<input id="number" /><button onclick="call()">call</button>
<div id="video-out"></div>

<!-- Libs and Scripts -->
<script src="https://stephenlb.github.io/webrtc-sdk/js/webrtc-v2.js"></script>
<script>
    var session = null;
    const number = (''+Math.random()*100000).split('.')[0];
    console.log(number);
    
    var phone = PHONE({
        number        : number,
        publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',
        subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',
        media         : { audio : true, video : true },
        ssl           : true
    });

    phone.ready(function(){
        console.log('Phone is ready');
    });

    phone.camera.ready(function(video){
        console.log('Camera is ready');
        phone.$('video-out').append(video); //first attempt, all I get is an empty video tag
    })

    // When Call Comes In or is to be Connected
    phone.receive(function(session){
        // Display Your Friend's Live Video
        session.connected(function(session){
            phone.$('video-out').appendChild(session.video);
            phone.$('video-out').append(phone.video); //second attemp, I get undefined
        });
    });

    function call() {
        var callee = document.getElementById('number').value;
        console.log('calling ' + callee)
        session = phone.dial(callee);
    }
</script>

I am able to get the other participant video but not my own one.

Acording to the readme I can access my local video on phone.video, the exact example is $('#display-div').append(phone.video);. I've added that to the session.connected event and what I get is undefined, maybe am I adding it on the wrong place?

Also I saw under tutorials/ a helloworld.html file on which a phone.camera.ready listener is used. When I try to do that I get an empty video tag.

While looking through the live demo I noticed that in order to show the local camera on the thumbnail, phone.snap is used, I think I can do something like that for my app but there's got to be a better way, right?

Not sure what info should I provide but I'm on Fedora 25 and I've tried on Firefox 56.0 64 bits, Chrome 61.0.3163.100 64-bit and on a Samsung Galaxy S7 with no success.

Open source signalling server for local networks?

Hi,

We are building a local audio and messaging system. There is no internet connection. Just LAN.
So, is there any open source signalling server for this webrtc-sdk, so we can install and run our own system without connecting pubnub's servers?

Thanks

Android Native Support

Hello,
In the Readme file its written that Android Native Java is supported, but I fail to understand how.

"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."

Could you please enlighten how that works ?

Broadcasting using the library

Hi,
How can I use your library for broadcasting video & audio to peers?
The readme says that it's possible, but I looked into the code and I haven't saw anything for doing it.
Is it actually possible?

-- Jonathan

Issue in windows 7 latest chrome

i just test it on windows 7 chrome and it is not working in windows 7 latest chrome

V2 SDK - Sometimes Video Doesn't Connect

Sometimes the stream does not establish. This is a regression, v1 sdk does not have same issue.

How to stop the camera from starting immediately

How can I stop the camera from starting as soon as the library gets initialized? for example, it gets started even on the receiver's device.

ICE failed, see about:webrtc for more details

"ICE failed, see about:webrtc for more details"
i see this error when video call is going what would be issue

Sound Volume

How can I decrease the volume / turn off loudspeaker of receiving calls?
It's like we turn on the loudspeaker on call received.

My cemra is not working in your live example ?

My cemra is not working in your live example ?
WebRTC Simple Calling API + Mobile

Safari 12 issue. The browser doesn't receive the call

Camera turns on, but session.connected doesn't get called.

autocam seems to block .ready() call

hey,

got a maybe uncommon issue. i want to create some kind of broadcasting app, where the client dont need or better not has to start the cam. just connect and watch.

a regular broadcast works fine for me. at the point where i add "autocam: false" to the phone-config it seems like the .ready()-call is not triggered and i dont receive any videos

maybe i missed something in the doc? i couldnt figure out whats wrong.

would be great if you could solve me this riddle.

Server:

        var broadcaster = PHONE({
            number: "BROADCASTER", // If you want more than one broadcaster, use unique ids
            publish_key: 'xxx-mypubkey',
            subscribe_key: 'xxx-mysubkey'
        });

        broadcaster.receive(function(new_viewer) {
            new_viewer.connected(function(viewer) {
           
            }); // new viewer joined
            new_viewer.ended(function(viewer) {
             
            }); // viewer left
            //new_viewer.hangup();  // if you want to block the viewer
        });

Client:

        var viewer = PHONE({
            number: "VIEWER-" + new Date,
            autocam: false,
            publish_key: 'xxx-mypubkey',
            subscribe_key: 'xxx-mysubkey'
        });

        viewer.ready(function() {
            var broadcaster = viewer.dial("BROADCASTER");
        });

        viewer.receive(function(broadcaster) {
            broadcaster.connected(function(broadcaster) {
                $('#media-stream').prop('src', broadcaster.video.src);
            });
            broadcaster.ended(function(broadcaster) {});
        });

Static phone number

is it possible to have only one (static) phone number? So anyone who wanna use video chat can chose only one phone number. Every time page loads there is different number so where in code is possibility to make it static. Thank you for answer.

Error running the example. MediaStreamError, name: "NotFoundError", message: "The object can not be found here."

Alert! - Reload Page. 192.168.1.50:8080:337:5
MediaStreamError { name: "NotFoundError", message: "The object can not be found here.", constraintName: "", stack: "" } 192.168.1.50:8080:338:5
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. 192.168.1.50:80

I've this error when I run the repository using http-server.

// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
// Problem Occured During Init
// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
phone.unable(function(details){
console.log("Alert! - Reload Page.");
console.log(details);
set_icon('remove');
});

I guess this is the piece of code that is being run.

What if I run it on Apache server.?

Google Chrome 32.0.1700.107 portable not work (42.xxx not work too). Work only Firefox 38.0.5 portable

Tested on
http://stephenlb.github.io/webrtc-sdk/

Native android java example

Hi,

This repository works great so far. In my case we need to create this video call from a webbrowser to a native android app. I could not find a proper native android example for this case.
Could you tell me if there is one?

Best regards.

Add Access Manager for Security

Allow only some users for call.

Prevent viewers from getting audio,video media asked

I'd like to prevent viewers in a broadcasting (one-to-many) session from being asked for audio and video permissions, since they are only viewers. I've already tried autocam and media parameters for this, but the viewer doesn't get ready until permissions are set.

This pubnub version seemed to have a parameter "oneway" that did the trick, is this supported in this SDK version?

PS. I've been reading a lot of documentation of using WebRTC with PubNub and I've also seen many repos from different authors aiming to do the same thing. Is this the newest version of the SDK?

phone.stop() is not working

I tried on both v1 and v2, phone.stop() would be get me TypeError: phone.stop is not a function.

I wonder if there is a probably to terminate a PHONE and stop using the camera/mic.

Sometimes session.video is whitout a stream

When I do repeat calls to: dial and hang-up after several tries I don’t get the video stream. Repeating the calls one more time usually fixes it.

Do you have a solution for echo cancellation?

We found one problem while implement the WebRTC.
It's Echo. I think that due to transfer my voice data.

Do you have a solution for echo cancellation?

Thanks!

Broadcast resolution

Is there a way to limit the Broadcasted Resoultion?
My camera or any camera lately is 4K ultra HD at 1000000x300000 or whatever. That size doesn't go down the comcast wires all that well. Especially on mobile.

I'm using and messing around and testing your basic install but with the V2 .js. What and where would I edit to restrict the broadcast video size to something other then default... whatever the default is. I'm at a loss to where that can be controlled.

Thank you.

Update to WebRTC V2

Chrome complains about "URL.createObjectURL". I see that WebRTC.js has been updated but not V2, is there any plans for an update?

Create Multiparty App

It doesn't work.

Hello,

Ive seen this easy Web-RTC application on this site: https://www.pubnub.com/blog/2014-10-21-building-a-webrtc-video-and-voice-chat-application/

But this demo site doesn't work.
When i put the call link into another browser, it do nothing.
What can i do?

Deprecated. URL.createObjectURL

URL.createObjectURL with media streams is deprecated and will be removed in M71, around December 2018. Please use HTMLMediaElement.srcObject instead.

Cannot read property 'number' of undefined

Receive the following quite often in onicecandidate().
Seems there is no reference to "this" apart from the above method and it is null.

ERROR TypeError: Cannot read property 'number' of undefined
    at onicecandidate (webrtc-v2.js:411)
    at RTCPeerConnection.r (adapter_no_global.min.js:1)
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at e.invokeTask [as invoke] (polyfills.js:3)
    at p (polyfills.js:2)
    at RTCPeerConnection.v (polyfills.js:2)

Safari 11 issues

Change media in current call

Hi, is there a way to change the media in the phone without instantiating a new PHONE instance?
Something like:

var phone = PHONE({number: "1234", media: { audio : true, video : false }});
phone.dial("567");
phone.media({ audio : true, video : true })

How to use it in application

How to use it as a tool for application.
Will it technology interoparable?

Remove PN SDK Replace with embedded

Is there a version for API version 4?

change media

is a possibility to change the media ?
as in the commit c9e09f7 number
Thank you

Access Control Check?

I'm getting this error in mobile safari on iPhone.

[Error] XMLHttpRequest cannot load https://ps15.pubnub.com/time/0?uuid=7903e77f-5f7a-4142-b0f1-d0deeb6dadb1 due to access control checks.
ajax (pubnub.js:3053)
xdr (pubnub.js:2931)
time (pubnub.js:831)
fail (pubnub.js:1096)
done (pubnub.js:3018)
onabort (pubnub.js:3028)

I host a session with Chrome Desktop, and try to video chat with an iPhone using mobile safari. Using the mobile safari Develop Web Inspector I get this error on load.

Please help.

ended() not called on some disconnections

#> WebRTC Phone Auto Hangup and Goodbye on Unload

The WebRTC Calling SDK will attempt an automatic goodbye upon graceful disconnection attempts. This allows the 2nd party on the other end of the phone line to receive a call ended signal. This happens automatically.

I am facing an issue where sometimes the ended() callback isn't called for the third party on disconnection. I suspect this has to do with this... let's say ungraceful (?) disconnections... How would one go and detect such situations?

Not working in ios latest version

Not working in ios latest version i have tried all browsers including chrome , safari and firefox but no luck