1. How to Use WebRTC

1.1. Operation Method of the Dashboard

Create a New Application (New API Key Creation)

On the “List of Applications” screen, click [ Add New Application ]

../_images/image1.png

Enter required items on the “Create Application” screen, and click [ Create Application ] button.

../_images/image2.png

Application Description

It will be used only for display on the Dashboard of Enterprise Cloud.

Please specify using 128 characters or less.

Usable Domain Name

Input an FQDN used by the applications to create. Please specify using 255 characters or less.

Multiple usable FQDNs can be specified.

Example: www.hogehoge.com

Administration

TRUN

Check this in case of using TURN (Traversal Using Relay around NAT) server. The TURN server enables communication by relaying voice and video data even if P2P communication is impossible due to reasons such that the communication has to go through a Firewall with strong security policies. A TURN server closest to the user will be selected automatically. Use of TURN server is a billing object.

SFU

Check this if SFU (Selective Forwarding Unit) server is used. SFU is a technology to send/receive media and data via servers but not with P2P. In SFU mode, communication is made through a WebRTC server. As the communication path through which the client sends data can be restricted only to the WebRTC server, workload of the client will be reduced and more users can join in the communication at the same time. Use of SFU server is a billing object.

listALLPeers

Check in case of using listALLPeers API

Use API

This API acquires an active PeerID per API key.

Please refer to API reference for details.

Use API Key certification

Check this if customers use authentication function to prevent illegal use of the API key. Please see below for instructions on how to use.


When creation of the application is complete, created API keys will be displayed on the List of Applications screen.

../_images/image3.png

Display PeerID in Connection

If customers click [ List of PeerID in Connection ], PeerIDs in connection will be displayed.

Update Application Settings

If customers click [ Update Settings ], customers can update application settings, display API secret key, regenerate the secret key and delete applications.

Suspend/Restart Application

If customers click [ Suspend ] while the Application Status is “In Use”, the status will change to “Suspended”. Then, communication becomes impossible and the billing will be stopped.

../_images/image4.png
If customers click [ Resume Use ], the Application Status will change to “In Use”.
If the Status becomes “In Use”, the communication is possible.

Delete application

If customers click [ Update Settings ] → [ Delete Application ], the application will be deleted.

Note

An application once deleted will not be recovered. Before deleting, please consider storing the application with the status “Suspended”.

../_images/image5.png

1.2. How to create sample application

Creation of new application

Please refer to 1.1 for new creation of API key and input of FQDN.

Downloading and Editing Source Codes

Please download the source code of the sample application (1:1 video conversation application) from Github below.

URL:https://github.com/Service Provider/SkyWay-JS-Sample/tree/master/p2p_videochat

Change “key: ‘ customersrkey0-a515-486b-8488-407b41150e43’” on the 15th line of “index.html” to the created API key.

     <html>
     <head>
       <meta charset="utf-8">
       <title>SkyWay - Video chat example</title>
       <link rel="stylesheet" href="style.css">
       <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
       <script type="text/javascript" src="//webrtc.github.io/adapter/adapter-3.1.3.js"></script>
       <script type="text/javascript" src="https://cdn.skyway.io/skyway.js"></script>
       <script>
         // Compatibility shim
         navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
         // Peer object
         var peer = new Peer({
           key: 'yourkey0-a515-486b-8488-407b41150e43',
           debug: 3
         });
         window.peer = peer;
         peer.on('open', function(){
           $('#my-id').text(peer.id);
         });
         // Receiving a call
         peer.on('call', function(call){
           // Answer the call automatically (instead of prompting user) for demo purposes
           call.answer(window.localStream);
           step3(call);
         });
      :
      :

Place “index.html” and “style.css” on the Web server.

Click the URL of the application created, and turn ON the camera to display Video Chat screen. Input the name of the communication partner as a blank and click [ Call ] to send communication request to the partner. If the partner approves the communication request, communication becomes possible.