{"id":14156680,"url":"https://github.com/stephenlb/webrtc-sdk","last_synced_at":"2025-05-16T03:07:22.512Z","repository":{"id":20604499,"uuid":"23885503","full_name":"stephenlb/webrtc-sdk","owner":"stephenlb","description":"WebRTC Simple Calling API + Mobile SDK - A simplified approach to RTCPeerConnection for mobile and web video calling apps.","archived":false,"fork":false,"pushed_at":"2020-08-26T00:04:06.000Z","size":1242,"stargazers_count":860,"open_issues_count":28,"forks_count":271,"subscribers_count":53,"default_branch":"master","last_synced_at":"2025-05-08T17:41:49.477Z","etag":null,"topics":["webrtc","webrtc-call","webrtc-demo","webrtc-dialing","webrtc-javascript-library","webrtc-phone","webrtc-receiver","webrtc-sdk","webrtc-video"],"latest_commit_sha":null,"homepage":"https://stephenlb.github.io/webrtc-sdk/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stephenlb.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-10T17:58:08.000Z","updated_at":"2025-04-18T02:31:33.000Z","dependencies_parsed_at":"2022-08-30T18:22:11.844Z","dependency_job_id":null,"html_url":"https://github.com/stephenlb/webrtc-sdk","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fwebrtc-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fwebrtc-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fwebrtc-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stephenlb%2Fwebrtc-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stephenlb","download_url":"https://codeload.github.com/stephenlb/webrtc-sdk/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459088,"owners_count":22074605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webrtc","webrtc-call","webrtc-demo","webrtc-dialing","webrtc-javascript-library","webrtc-phone","webrtc-receiver","webrtc-sdk","webrtc-video"],"created_at":"2024-08-17T08:07:55.736Z","updated_at":"2025-05-16T03:07:17.484Z","avatar_url":"https://github.com/stephenlb.png","language":"JavaScript","funding_links":[],"categories":["webrtc"],"sub_categories":[],"readme":"# WebRTC V2 Simple Calling API + Mobile\n\n[![Known Vulnerabilities](https://snyk.io/test/npm/webrtc-sdk/badge.svg)](https://snyk.io/test/npm/webrtc-sdk)\n[![npm](https://img.shields.io/npm/v/webrtc-sdk.svg)]()\n\n\u003e WebRTC SDK Upgraded! ES6, new camera control and 100x less code than v1.\n\nThe 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.\nKeep 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-\n\nAt PubNub we believe simplicity is essential for our SDK usability.\nWe've taken a simplified approach to WebRTC Peer Connections by creating\nand easy-to-use SDK for developers.\nThe ideas of simplicity should span all platforms and devices too and\nthat's why we also support **Android** WebRTC mobile calling\nwith compatibility for iOS native Objective-C based WebRTC SDK.\nThis simple developer WebRTC SDK is powered by\n[PubNub Data Stream Network](https://www.pubnub.com/).\n\n### Supported WebRTC Features\n\nWebRTC SDK offers many rich features and capabilities to enhance the\nWebRTC experience.  Here is a list of the options available.\n\n 1. Photo Snap Camera Transmit             *(STUN-less Firewall Ready)*\n 1. WebRTC Dialing                         *(STUN-less Firewall Ready)*\n 1. WebRTC Call Receiving                  *(STUN-less Firewall Ready)*\n 1. JSON App Messaging (chat/signals/etc.) *(STUN-less Firewall Ready)*\n 1. Multi-party Calling\n 1. Audio only Calls Optional\n 1. Broadcasting Mode\n 1. Instant Connect Dialing Optional\n 1. Security SSL, AES256, ACL Access Control Management\n 1. Password Protection via Cipher\n 1. Event History and Call Records\n 1. Photo History and Recording Static Snapshots of Calls (only stills)\n 1. Connectivity Detection and Auto-Recovery\n 1. Pre-configured Video Element for Streaming Video/Audio\n 1. Pre-configured Local Camera Video Element for Streaming Video/Audio\n 1. Network Connectivity Hooks (online/offline)\n 1. SDK Level Debug Output\n\n### Testing Locally\n\nYou need an HTTPS (TLS) File Server. To start a local secure file server:\n\n```shell\npython \u003c(curl -L https://goo.gl/LiW3lp)\n```\n\nThen open your browser and point it to your file in\nthe directory you ran the python HTTPS server.\n\n```shell\nopen https://localhost:4443/tutorials/\n```\n\n\u003e This is a Simple Python HTTPS Secure Server\n\u003e https://gist.github.com/stephenlb/2e19d98039469b9d0134\n\nWe posted an answer on\n[StackOverflow WebRTC HTTPS](http://stackoverflow.com/a/41969170/524733).\nThis will get you started testing on your laptop.\n\n### Supported WebRTC Calling API Mobile Devices and Browser\n\nList of supported WebRTC Calling Clients including Android and Chrome.\n\n 1. Chrome\n 2. Firefox\n 3. Opera\n 4. Mobile Chrome - Android\n 5. Mobile Firefox - Android\n 6. *iOS Native Objective-C Compatible*\n 6. *Android Native Java Compatible*\n\n### The Basic Concepts of WebRTC Calling\n\n##### Making a WebRTC phone Call\n\n```javascript\n// Dial Number\nvar session = phone.dial('123-456');\n```\n\n##### Receiving a WebRTC phone Call\n\n```javascript\nphone.receive(function(session){\n    // On Call Receiving\n});\n```\n\n##### Adding Video Live Stream\n\n```javascript\nphone.receive(function(session){\n    session.connected(function(session){\n        // Append Live Video Feed\n        $('#display-div').append(session.video);\n    });\n});\n```\n\n### Simple WebRTC Walkthrough\n\nNext we will start with a copy/paste example of our SDK.\nThis Simple Example Comes in **Two WebRTC Calling Sections**.\n\n 1. *Part One* will talk about how you can **Make a WebRTC Call**.\n 2. *Part Two* will teach you about **Receiving a WebRTC Call**.\n\n#### Making a WebRTC Calling \u0026 Receiving - *Part One and Two*\n\nMake your first html file named `dial.html` and copy/paste the following:\n\n```html\n\u003c!-- dial.html --\u003e\n\n\u003c!-- Video Output Zone --\u003e\n\u003cdiv id=\"video-out\"\u003e Making a Call \u003c/div\u003e\n\n\u003c!-- Libs and Scripts --\u003e\n\u003cscript src=\"https://stephenlb.github.io/webrtc-sdk/js/webrtc-v2.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e(()=\u003e{\n    // ~Warning~ You must get your own API Keys for non-demo purposes.\n    // ~Warning~ Get your PubNub API Keys: https://www.pubnub.com/get-started/\n    // The phone *number* can by any string value\n    var phone = PHONE({\n        number        : '1234',\n        publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',\n        subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',\n        ssl           : true\n    });\n\n    // As soon as the phone is ready we can make calls\n    phone.ready(function(){\n\n        // Dial a Number and get the Call Session\n        // For simplicity the phone number is the same for both caller/receiver.\n        // you should use different phone numbers for each user.\n        var session = phone.dial('1234');\n\n    });\n\n    // When Call Comes In or is to be Connected\n    phone.receive(function(session){\n\n        // Display Your Friend's Live Video\n        session.connected(function(session){\n            phone.$('video-out').appendChild(session.video);\n        });\n\n    });\n\n})();\u003c/script\u003e\n```\n\n### Live WebRTC Call Dialer \n\nIf you combine both the **WebRTC Dialer** and the **WebRTC Receiver**\nyou will get a complete working phone.\nWe have a live running WebRTC Demo which uses our WebRTC SDK.\nThis demo includes a soft-touch UI for an easy calling experience.\n\n\u003e try the **live WebRTC Dialing**:\n[WebRTC Simple Calling API + Mobile](https://stephenlb.github.io/webrtc-sdk/)\n\n[![WebRTC Simple Calling API + Mobile](http://pubnub.s3.amazonaws.com/assets/webrtc-simple-sdk-calling-api-peer-connect.png)](https://stephenlb.github.io/webrtc-sdk/)\n\nYou can click the link above to try our live WebRTC Demo\nwhich is powered by our easy to use SDK.\n\n### What Can you build with a WebRTC Simple Calling API?\n\nThere are a plethera of important and useful applications which may\nbe built using the PubNub WebRTC Calling SDK.\nI have cataloged a list of ideas for **WebRTC Use Cases**:\n\n 1. Amazon Mayday Help Button\n 2. Salesforce SOS Help Button\n 3. WebRTC Skype Replica\n 4. Traditional Phone Replacement\n 5. Chatroulette\n 6. VoIP Replacement\n 7. Customer Support Calls\n 8. In-bound Sales Calls\n 9. Easy Remote Meetings\n 10. Call Assistant or Specialists\n 11. Big Screen Public Announcemnt\n 12. Live Presentations\n\nSo many different options and even more use cases\nthat have yet to be discovered.\n\n\n### What is a WebRTC Session?\n\nA WebRTC `Session` is a reference to a call instance\nbetween two connected parties.\nThe idea is the session is active as long as the two parties are connected.\nOnce one party member disconnects or leaves, the session will be terminated.\nYou have access to several helper methods for\n`session.connected()` and `session.ended()` events.\n\n## API Documentation for WebRTC Calling SDK\n\nThe WebRTC Simple SDK API Reference will provide to you all the options\navailable to you as the developer.\n\n### WebRTC Phone Initialization\n##### `PHONE({ ... })`\n\n\u003e Initialize the phone object which can send/receive multiple\nWebRTC call sessions without limit.\nBe careful as your bandwidth is the true limiter.\n\n```javascript\nvar phone = PHONE({\n    number        : '1234567890',\n    publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',\n    subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',\n    media         : { audio : true, video : true },\n    ssl           : true\n})\n```\n\n### WebRTC Phone Number\n\n\u003e Your phone number is your true ring-in point of truth.\nYou can set your phone number at init time from the \n\n```javascript\nvar phone = PHONE({ number : '1234567890' });\n```\n\n### WebRTC Local Camera Video Element\n\nWe provide you easy access to your local camera with\na pre-initialized video element that is easy to access.\nSimply append the element to your DOM and the feed will\nstream automatically.\n\n```javascript\n$('#display-div').append(phone.video);\n```\n\n### WebRTC Phone SSL Mode\n\n\u003e You can enable SSL signalling mode for the local client device\nby setting the `ssl : true` parameter at init.\n\n```javascript\nvar phone = PHONE({\n    ssl : true\n    ...\n})\n```\n\n### WebRTC Cipher AES 256 Crypto Mode\n\n\u003e You can enable AES256 Encryption (essentially password mode)\non your phone for additional security.\nYou're friends have to know your password to call you.\nAES256 option allows you to password protect your phone and \nonly give access to people you know.  \nYou have to give your friend your password before they can call you.\n\n```javascript\nvar phone = PHONE({\n    cipher_key : 'SUPER-SECRET-PASSWORD-HERE'\n    ...\n})\n```\n\n### WebRTC Phone Audio Only Mode\n\n\u003e You can disable video codec and stream only Audio by setting\nthe following param in your init code.\nSet `video : false` in the media section.\n\n```javascript\nvar phone = PHONE({\n    media : { audio : true, video : false }\n    ...\n})\n```\n\n### WebRTC Phone Mobile Calling on Android\n\nWebRTC calling on Android is web-ready compatible and works\nout-of-the-box today without modifications or additional code.\nAlso WebRTC Calling is supported for Android and iOS Native too.\n\n## WebRTC Photo Sharing *Bonus STUN-less Ready*\n\nYou can easily snap a photo from the video stream and\nsend it to your friends in an instant.\nYou can think of this as an **Instagram WebRTC** style.\nAlso Photo Sharing works through Corprate Enterprise Firewalls.\n\n### WebRTC Camera Photo Sharing Broadcast\n##### `phone.snap()`\n\n\u003e Broadcast your camera photo to all connected sessions.\nAlso get the IMG data as base64 supported format\nfor local display if desired.\n\n```javascript\nphone.ready(function(){\n    // Auto Send Camera's Photo to all connected Sessions.\n    var photo = phone.snap();\n    $('#photo-div').append(photo.image);\n});\n```\n\n### WebRTC Session Camera Photo Share\n##### `session.snap()`\n\n\u003e Send your camera's latest frame as raw IMG to\na specific call session.\n\n```javascript\nphone.ready(function(){\n    var session = phone.dial('4321');\n    var photo   = session.snap();\n    $('#photo-div').append(photo.image);\n});\n```\n\n### Prevent Camera from Starting Automatically\n\nBy 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.\n\n```html\n\u003c!-- dial.html --\u003e\n\u003cdiv id=\"number\"\u003e\u003c/div\u003e\n\n\u003cbutton id=\"startcam\"\u003eStart Camera\u003c/button\u003e\n\u003cbutton id=\"startcall\"\u003eStart Call\u003c/button\u003e\u003cinput id=\"dial\"\u003e\n\n\u003c!-- Video Output Zone --\u003e\n\u003cdiv id=\"video-out\"\u003e\u003c/div\u003e\n\n\u003c!-- Libs and Scripts --\u003e\n\u003cscript src=\"https://stephenlb.github.io/webrtc-sdk/js/webrtc-v2.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e(=\u003e(){\n\n    // ~Warning~ You must get your own API Keys for non-demo purposes.\n    // ~Warning~ Get your PubNub API Keys: https://www.pubnub.com/get-started/\n    // The phone *number* can by any string value\n    var number  = Math.ceil(Math.random()*10000);\n    var ready   = false;\n    var session = null;\n    var phone   = PHONE({\n        number        : number\n    ,   autocam       : false\n    ,   publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c'\n    ,   subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe'\n    ,   ssl           : true\n    });\n\n    // Show Number\n    phone('number').innerHTML = 'Number: ' + number;\n\n    // Start Camera\n    phone.bind( 'mousedown,touchstart', phone.$('startcam'), function() {\n        phone.startcamera();\n        return false;\n    } );\n\n    // Start Call\n    phone.bind( 'mousedown,touchstart', phone.$('startcall'), function() {\n        console.log('calling');\n        session = phone.dial(phone.$('dial').value);\n        return false;\n    } );\n\n    // As soon as the phone is ready we can make calls\n    phone.ready(function(){\n\n        // Dial a Number and get the Call Session\n        // For simplicity the phone number is the same for both caller/receiver.\n        // you should use different phone numbers for each user.\n        ready = true;\n\n    });\n\n    // When Call Comes In or is to be Connected\n    phone.receive(function(session){\n\n        // Display Your Friend's Live Video\n        session.connected(function(session){\n            phone.$('video-out').appendChild(session.video);\n        });\n\n    });\n\n})();\u003c/script\u003e\n```\n\n## WebRTC JSON Messaging *Bonus STUN-less Ready*\n\nAdding extra realtime capabilities between connected parties\nis essential for creating collaborative and chat features.\nYou can do that with PubNub's WebRTC SDK easily without\nfirewall restrictions from corporate policies.\n\n### Message Broadcasting to All Sessions\n##### `phone.send(...)`\n\n\u003e Send a JSON message to all connected sessions.\n\n```javascript\nphone.send({ text : 'HI!' });\n```\n\n### Receive a JSON message from Any Session\n##### `phone.message(function(message){ ... })`\n\n\u003e Get all messages sent from any session.\n\n```javascript\nphone.message(function( session, message ) {\n    show_chat( session.number, message.text );\n} );\n```\n\n### Send a JSON Message to One Session\n##### `session.send(...)`\n\n\u003e You can send a direct JSON message to one session only.\n\n```javascript\nsession.send({ text : 'Hi there!' });\n```\n\n### Receive a JSON message from One Session\n##### `session.message(function(){ ... })`\n\n\u003e You can set callbacks to capture JSON messages\nfrom a specific call session.\n\n```javascript\nsession.message(function( session, message ) {\n    show_chat( session.number, message.text );\n} );\n```\n\n### WebRTC Phone Ready\n##### `phone.ready(function(){ ... })`\n\n\u003e Making calls is easy but you can only do it when the phone is\nready to issue the signals properly and the local interfaces\nhave been configured such as audio/video media.\n\n```javascript\nphone.ready(function(){\n    // Ready to make Calls\n    var session = phone.dial(\"my-friend's-number\");\n});\n```\n\n### WebRTC Phone Receiving Calls\n##### `phone.receive(function(session){ ... })`\n\n\u003e It's really ease to setup your phone to receive calls using\nthe `phone.receive()` method.\nThis method expects a callback function and will pass the\nWebRTC Session object as the only parameter.\n\n```javascript\nphone.receive(function(session){\n    session.connected(function(session){ /* call connected */ });\n    session.ended(function(session){     /* call ended     */ });\n});\n```\n\n### Get Your Phone Number\n##### `var num = phone.number()`\n\n\u003e Sometimes you need to access the phone number\nthat was set during initialization time.\nYou can do that by calling `phone.number()` method\nwhich returns the setup number.\n\n```javascript\nvar num = phone.number();\n```\n\n### Get Caller Phone Number\n##### `var num = session.number`\n\n\u003e To access current caller number, check the session\nobject number property `session.number`.\n\n```javascript\nvar num = session.number;\n```\n\n### Get Call Start Time\n##### `var start = session.started`\n\n\u003e The Session object stores the call start time which\nyou can use to display call timer on the screen.\n\n```javascript\nvar start = session.started;\n```\n\n### WebRTC Phone Call History via PubNub\n##### `phone.history(...)`\n\n\u003e You can get the call history of a phone number by issuing\na PubNub History call on the phne number.\n\n```javascript\nphone.history({\n    number  : '1234',\n    history : function(call_history) {\n        console.log(call_history);\n    }\n});\n```\n\n### WebRTC Phone Dialing Numbers\n##### `phone.dial(number)`\n\n\u003e You can easily make WebRTC calls by executing the `dial()` method.\nThe number can be any string value such as `\"415-555-5555\"`.\n\n```javascript\nvar session = phone.dial(number);\n\nsession.connected(function(session){ /* call connected */ });\nsession.ended(function(session){     /* call ended     */ });\n```\n\n### Set Camera Resolution\n\nYou can change the resolution of your camera's media capture.\nThis allows you to set lower resolutions for slower p2p connections.\nYou can also set HD 4K resolutions if you have the camera to do so.\n\n```javascript\n// Phone\nconst phone = PHONE({\n    number        : number\n,   media         : { video: { width:1280, height:720 } } // \u003c---- set res\n,   publish_key   : pubkey\n,   subscribe_key : subkey \n});\n```\n\n### WebRTC Phone Multi-party Dialing\n##### `phone.dial(number)`\n\n\u003e The PubNub WebRTC Phone Dialer and Receiver supports\nunlimited party in/out calling.\n\n```javascript\nvar sessions = [];\n\nsessions.push(phone.dial('friend-one'));\nsessions.push(phone.dial('friend-two'));\nsessions.push(phone.dial('friend-three'));\nsessions.push(phone.dial('friend-four'));\nsessions.push(phone.dial('friend-five'));\n\nsessions.forEach(function(friend){\n    friend.connected(function(session){ /* call connected */ });\n    friend.ended(function(session){     /* call ended     */ });\n});\n```\n\n### WebRTC Video and Audio Broadcasting Mode\n##### `phone.receive(function(session){ ... })`\n\n\u003e You can receive unlimited inbound calls and become a broadcast\nbeacon stream.\nYou are limited by your bandwidth upload capacity.\n\n## Broadcaster with Audience Members\n\nYou'll start by opening the stream for the broadcaster so audience members can join in.\nStart broadcasting as the broadcaster:\n\n### Broadcaster\n\n```javascript\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\n// Initialize the Broadcaster's Device\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\nvar broadcaster = PHONE({\n    number        : \"BROADCASTER\",  // If you want more than one broadcaster, use unique ids\n    media         : { audio : true, video : true },\n    publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',\n    subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',\n    ssl           : true\n});\n\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\n// Wait for New Viewers to Join\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\nbroadcaster.receive(function(new_viewer){\n    new_viewer.connected(function(viewer){ /* ... */ }); // new viewer joined\n    new_viewer.ended(function(viewer){ /* ... */ });  // viewer left\n    //new_viewer.hangup();  // if you want to block the viewer\n});\n```\n\n### Viewer\n\n```javascript\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\n// Initialize the Viewer's Device\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\nvar viewer = PHONE({\n    number        : \"VIEWER-\"+new Date,\n    publish_key   : 'pub-c-561a7378-fa06-4c50-a331-5c0056d0163c',\n    subscribe_key : 'sub-c-17b7db8a-3915-11e4-9868-02ee2ddab7fe',\n    ssl           : true\n});\n\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\n// Join a Broadcast as a Viewer\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\nviewer.ready(function(){\n    var broadcaster = phone.dial(\"BROADCASTER\");\n});\n\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\n// Show Broadcast's Video Stream\n// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=\nviewer.receive(function(broadcaster){\n    broadcaster.connected(function(broadcaster){\n        document.body.appendChild(broadcaster.video);\n    });\n    broadcaster.ended(function(broadcaster){ /* broadcast ended */ });\n});\n```\n\n### WebRTC Phone Hangup\n##### `phone.hangup()`\n\n\u003e There are two ways to hangup WebRTC calls.\nYou can use the phone-level method `phone.hangup()`\nwhich will hangup all calls at once.\nOr you can use the session-level method `session.hangup()`\nwhich will only hangup that call session.\n\n```javascript\n// hangup all calls\nphone.hangup();\n\n// hangup single session\nsession.hangup();\n```\n\n### WebRTC Phone Network Events\n##### `PHONE.disconnect(function(){ ... })`\n\n\u003e You need to keep track of the connectivity state of your local\nnetwork connection. You can do that using these helper methods.\n\n```javascript\nPHONE.connect(function(){    console.log('network LIVE.') })\nPHONE.disconnect(function(){ console.log('network GONE.') })\nPHONE.reconnect(function(){  console.log('network BACK!') })\n```\n\n### WebRTC Phone Unable to Initialize\n##### `phone.unable(function(details){ ... })`\n\n\u003e Some devices or in certain situations the phone may not initialize.\nWe give you a simple callback for when the phone startup fails.\n\n```javascript\nphone.unable(function(details){\n    console.log(\"Phone is unable to initialize.\");\n    console.log(\"Try reloading, or give up.\");\n});\n```\n\n### WebRTC Stop Camera and Mic\n##### `phone.camera.stop()`\n\n\u003e You may want to Stop the Camera/Mic recording.\nBy default the camera and mic are turned on as soon as possible.\nThis allows for faster calling connection speeds.\n\n```javascript\nvar streamref = phone.camera.stop();\n```\n\n### WebRTC Phone Debugging\n##### `phone.debug(function(details){ ... })`\n\n\u003e You might want to see under the covers of WebRTC Calling by\nenabling debugging mode on the WebRTC SDK.\n\n```javascript\nphone.debug(function(details){\n     console.log(details);\n});\n```\n\n### WebRTC Phone Auto Hangup and Goodbye on Unload\n\nThe WebRTC Calling SDK will attempt an automatic `goodbye` upon graceful\ndisconnection attempts.\nThis allows the 2nd party on the other end of the phone line to\nreceive a call `ended` signal.\nThis happens automatically.\n\n### The WebRTC Session Object\n\nA WebRTC Session represents the connection between two parties with access\nto the `session.video` element as well as the place to register\nevent callbacks as needed such as `session.connected`\nand also the ended callback for when the call disconnects or hangs up.\n\n```javascript\nsession.ended(function(session){})\n```\n\nA session object is generated automatically for you upon dialing\n\n```javascript\nvar session = phone.dial('...')\n```\n\nand also inside registered event callbacks.\n\n```javascript\nphone.receive(function(session){})\n```\n\n### WebRTC Session Number\n##### `session.number`\n\n\u003e Returns the 2nd party's (caller/callee)\nPhone Number associated with the Call Session.\n\n```javascript\nvar session = phone.dial('12345');\nconsole.log(session.number == '12345');\n```\n\n### WebRTC Session Connected Callback\n##### `session.connected(function(session){})`\n\n\u003e Sets the callback for when the session is connected and\nthe **video** stream is ready to display.\n\n```javascript\nsession.connected(function(session){\n    var body = phone.$$('body')[0];\n    body.appendChild(session.video);\n});\n```\n\n### WebRTC Session Ended Callback\n##### `session.ended(function(session){})`\n\n\u003e The session has ended by one of the parties.\nAny secondary session will continue to stream.\n\n```javascript\nsession.ended(function(session){\n    sounds.play('sound/goodbye');\n    console.log(\"Bye!\");\n});\n```\n\n### WebRTC Session Hangup\n##### `session.hangup()`\n\n\u003e End the session right now.\nThe `ended` callback will fire for both connected parties.\n\n```javascript\n$(\"#hangup\").click(function(){\n    // End the call\n    session.hangup();\n});\n```\n\n### WebRTC Session Video Element\n##### `session.video`\n\n\u003e The Session Video Element is Accessable and Ready\ninside the `connected` only.\nThe Session Video ref is an HTML Video Element `\u003cvideo\u003e`.\n\n```javascript\nsession.connected(function(session){\n    var body  = phone.$$('body')[0];\n    var video = session.video;\n\n    body.appendChild(video);\n});\n```\n\n### WebRTC Session Image Element\n##### `session.image`\n\n\u003e The Session Image Element is Accessable and Ready\ninside the `thumbnail`, `connected` and `ended` callbacks.\nThe Session Image ref is an HTML Image Element `\u003cimg\u003e`.\n\n```javascript\nsession.thumbnail(function(session){\n    var body  = phone.$$('body')[0];\n    var image = session.image;\n\n    body.appendChild(image);\n});\n```\n\n### WebRTC Session RTCPeerConnection Reference\n##### `session.pc`\n\n\u003e Reference to WebRTC RTCPeerConnection.\n\n```javascript\nvar sesionPeerConnection = session.pc;\n```\n\n### WebRTC Session Call Rejection and Accept Permissions\n##### `phone.send`\n\n\u003e `phone.send` allows you to send programmatic messages \n\u003e between two phones without a video/audio stream.\n\u003e You may wish to setup a Call Accept/Reject phase to \n\u003e allow to users to accept or reject calls.\n\nBefore the Sending the Video/Audio Stream, \nsend a signal to ask for call permission: \n\n```javascript\nlet user_number = \"1235445\"; // my friends number\n\nfunction call_request(number) {\n    phone.send( { \"accept\" : \"Would you like to accept this call?\" }, user_number );\n}\nfunction call_accepted() {\n    // start voice/video session\n    phone.dial(user_number);\n}\nfunction call_rejected() {\n    // show call rejected screen\n}\n```\n\nThis allows you to create a simple contract between \ntwo parties before the video and audio stream begins.\n\n\n### WebRTC Adding Custom STUN and TURN Servers\n\n\u003e You may desire to add your own custom stun or turn servers by using\nthe `servers` parameter on initialization.\nFor example http://xirsys.com/ offers paid-stun solution.\n\n```javascript\nvar phone = PHONE({\n    servers : [\n        {\"username\":\"free\",\"url\":\"turn:127.0.0.1?transport=udp\",\"credential\":\"free\"},\n        {\"username\":\"free\",\"url\":\"turn:127.0.0.1?transport=tcp\",\"credential\":\"free\"}\n    ]\n    // ...\n})\n```\n\n## SDK Possible Upgrade Future Patches\n\n    - Race - During Ring/Receive Handshake, a Hangup will create Race\n    - Wire-pulled Disconnect Detect via DataChannels Pings\n    - 5 Second Timeout to Retry with 30 Second of Retries\n    - Auto-reconnect re-SDP/ICE Recovery\n    - Custom Message Events\n    - Presence\n    - Call History\n    - User Lists\n\n## Implementation Reference Upgrades\n\n    - Pre-Allow Transmit - Before \"allow\" fire a PubNub message\n    - Chat on Screen\n    - Multi-Party Video in GUI\n    - Full Screen Mode\n    - Controlling an iFrame\n\n### What is Happens Inside the Simple WebRTC SDK\n\n##### Signaling and Exchanging ICE Candidates via PubNub \n\nThe goal is to exchange ICE candidate packets between two peers.\n`ICE candidate packets` are structured payloads which contain possible\npath recommendations between two peers.\nYou can use a lib which will take care of the nitty gritty such as\n[WebRTC Simple Calling API + Mobile](https://github.com/stephenlb/webrtc-sdk)\nhowever below is the general direction that is taken inside the SDK itself.\n\nNote that the demonstration code below is intintionally incomplete.\nNote however the PubNub WebRTC Signaling SDK properly covers\nmost Calling Situations.\n\n#### Signaling Example Code Follows\n\n```html\n\u003cscript src=\"https://cdn.pubnub.com/pubnub-3.6.3.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e(function(){\n    \n    // INIT P2P Packet Exchanger\n    var pubnub = PUBNUB({\n        publish_key   : 'demo',\n        subscribe_key : 'demo',\n        ssl           : true\n    })\n    \n    // You need to specify the exchange channel for the peers to\n    // exchange ICE Candidates.\n    var exchange_channel = \"p2p-exchange\";\n    \n    // LISTEN FOR SDP and ICE CANDIDATES\n    pubnub.subscribe({\n        channel : exchange_channel,\n        message : receive_ice_candidates\n    })\n    \n    // SDP and ICE CANDIDATES RECEIVER PROCESSOR FUNCTION\n    function receive_ice_candidates(ice_candidate) {\n        // Attempt peer connection or upgrade route if better route...\n        console.log(ice_candidate);\n        // ... RTC Peer Connection upgrade/attempt ...\n    }\n    \n    // SEND SDP and ICE CANDIDATES\n    function send_ice_candidate(ice) {\n        pubnub.publish({\n            channel : exchange_channel,\n            message : ice\n        })\n    }\n\n})();\u003c/script\u003e\n```\n\n#### Generate ICE Candidates Example Code Follows:\n\n```html\n\u003cscript\u003e(function(){\n    // CREATE ICE CANDIDATES\n    var pc = new RTCPeerConnection();\n    navigator.getUserMedia( {video: true}, function(stream) {\n        pc.onaddstream({stream:stream});\n        pc.addStream(stream);\n        pc.createOffer( function(offer) {\n            pc.setLocalDescription(\n                new RTCSessionDescription(offer),\n                send_ice_candidate,\n                error\n            );\n        }, error );\n    } );\n\n})();\u003c/script\u003e\n```\n\n### WebRTC Troubleshooting\n\nYou may need to force clear your cache on your device, close the app completley, then restart it.\nThis is uncommon.\nYou can also enable debugging at the code-level by hooking onto the `phone.unable(fn)` and `phone.debug(fn)`.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephenlb%2Fwebrtc-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstephenlb%2Fwebrtc-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephenlb%2Fwebrtc-sdk/lists"}