• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

stephenlb/webrtc-sdk: WebRTC Simple Calling API + Mobile SDK - A simplified appr ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

stephenlb/webrtc-sdk

开源软件地址(OpenSource Url):

https://github.com/stephenlb/webrtc-sdk

开源编程语言(OpenSource Language):

JavaScript 64.0%

开源软件介绍(OpenSource Introduction):

WebRTC V2 Simple Calling API + Mobile

Known Vulnerabilities npm

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

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!' });

热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap