skyway / skyway-js-sdk

JavaScript SDK for SkyWay

SkyWay JavaScript SDK

This is the old SkyWay repository. Please consider migrating to the new SkyWay.

これは旧SkyWayのリポジトリです。新しいSkyWayへの移行をご検討ください。

---

Using the SDK

Including the sdk from the CDN in your html

Add the following script tag to your html file.

<script type="text/javascript" src="https://cdn.webrtc.ecl.ntt.com/skyway-4.4.5.js"></script>

You can then use the Peer object to start connecting. For more details, check out the Tutorial. (日本語)

To use the compressed version, add .min to the end of the file name, like skyway-4.4.5.min.js.

Installing using npm to use with a bundler (e.g. webpack or browserify)

With npm installed, run

$ npm install -s skyway-js

You can then use require or import to import the package.

// require
const Peer = require('skyway-js');
const peer = new Peer({key: 'your-api-key'});

// import
import Peer from 'skyway-js';
const peer = new Peer({key: 'your-api-key'});

Docs

• API reference(日本語)
• Tutorial(日本語)
• Sample Code

Examples

You can use /examples directory for checking your development code.

Follow these steps.

• Modify your key
  • e.g.) sed -i -e "s/<YOUR_KEY_HERE>/12341234-abcd-1234-abcd-1234567890ab/g" examples/_shared/key.js
  • The key can be obtained from https://webrtc.ecl.ntt.com/en/ .
• Start server on project root
  • e.g.) python -m SimpleHTTPServer 8000

Contributing

Setting up

Make sure you have nodejs installed. Run npm install to get started and to set up dependencies.

# run eslint
npm run lint

# run all unit tests
npm run test # OR npm test OR npm t

# build the library
npm run build

After making changes in src/, you run

• npm run lint to validate
• npm test to run tests

then the npm run build and build skyway(.min).js which is stored in dist directory!

Bug Reports

• check if you can reproduce in the latest version
• check the FAQ and the forum to make sure the same issue has not already been reported.
• create an issue by filling in the template.

Feature requests, proposals

• We welcome suggestions on the developer community forums
• GitHub issues are primarily intended for bug reports/fixes

Pull Requests

• We do our best to process them quickly but please be understanding if we take a while to respond.
• Steps
  • make changes on your fork.
  • include clear descriptions and references to all the issues by filling the template.
  • submit tests for your changes.
  • update docs when creating or changing features.
  • make sure the test suite & lint passes.

npm run lint
npm run test

• Branch
  • send all pull requests (bug fixes, new features) to the master branch.
  • maintainers will change it to an appropriate branch.

Templates

Issue

## Description of the problem

## Environment
- SDK version (ex. SDK v1.0.1,etc)
- Device (ex. Windows PC, Nexus6, etc)
- OS (ex. Windows XX / Android 7.0 etc)
- Network (Cable/DSL/Fiber + WiFi, MiFi, LTE, etc)

## Steps to reproduce the problem

## Expected behavior

## Other information (Console log etc)

PR

## Description of the Change

## Benefits

## Possible side effects

## Relevant Issues

skyway-js-sdk's Issues

Why weren't some types exported?

Description of the problem

I want to annotate variables types. But I found some types weren't exported.
What is the reason? If it's possible to send PR (Add some exports), I'll do.

Environment

• SDK version: 4.0.0

Steps to reproduce the problem

About skyway-js.d.ts

Expected behavior

We can import types

Other information (Console log etc)

No data

Telephone call model - how to tell when remote peer closes the call?

^ title

I am listening to both the close and removeStream events on the call object, but it doesn't seem like these events are firing when the remote peer closes the call.

Skyway call forward to every available peers

I want to make call to every available peers at the same time.

here is my code getAvailablePeers is returning peer list.so I did a loop to call one by one by passing api key and peer id.. But it's returning error

            getAvailablePeers(skyway_api_keys).then(function(available_peer){
                for (var i = 0; i < available_peer.length; i++) {
                $('#loader').hide();
                if (available_peer[i] && typeof available_peer[i] === 'object') {
                    console.log('available_peer', available_peer[i]);
                    
                   
                    
                    // Get timeout
                    var connection_timeout = 1;// Default value
                    
                    // Call peer
                    skyway = new Skyway(available_peer[i].api_key, available_peer.peer_id);
                    skyway.callTimeout = connection_timeout * 1 * 60;
                    skyway.metadata = guests_info;
                    skyway.checkout = 1;
                    console.log('skyway.metadata', skyway.metadata);
                    skyway_init();
                    skyway.on('ready', function () {
                        skyway.callAdmin();
                    });
                } 
               }
            });

Here problem is when skyway_init(); 

action hit it's trying to connect to peer.

It's displaying error

bindOnError: function(){
var self = this;
self.peer.on('error', function (err) {
console.error(err);
});
},

I want to hit call to every peer connection .

then after receive one call another peer will not be able to connect.

Is that possible?

Invalid module field in package.json

Description of the problem

In package.json the module field is declared here.

Because the files are not included in the package, I think this will be ignored.

skyway-js-sdk/package.json

Lines 19 to 25 in bff3a26

	"files": [
	"dist/skyway.js",
	"skyway-js.d.ts",
	"LICENSE",
	"CHANGELOG.md",
	"README.md"
	],

Environment

• SDK version (ex. SDK v1.0.1,etc)
• Device (ex. Windows PC, Nexus6, etc)
• OS (ex. Windows XX / Android 7.0 etc)
• Network (Cable/DSL/Fiber + WiFi, MiFi, LTE, etc)

Steps to reproduce the problem

Run npm i skyway-js.

Expected behavior

Files under /src are included in package.

Other information (Console log etc)

SFUだとあとから入ったユーザーでon('stream')イベントが走るがストリームが再生できない

SkyWayのJavaScript SDKコミュにも書きましたが、SFUだとあとから入ったユーザーにおいて、on('stream')は発火するが、受信したストリームが再生(表示)されない。

SFU GitHubページ:： https://turbographics2000.github.io/skyway-sfu-webcam/
SFU リポジトリ： https://github.com/turbographics2000/skyway-sfu-webcam

// 比較用にソースそのままでmode:'mesh'にしたもの
Mesh GitHubページ： https://turbographics2000.github.io/skyway-mesh-webcam/
Mesh リポジトリ： https://github.com/turbographics2000/skyway-mesh-webcam

追記

ツイッターにおいて、オーディオトラックがあれば再生されるとのことで試したら期待する動作となりました。
ですが、ビデオオンリーでも３番目の人が入ると２番目の人には再生が開始されるので、ビデオトラックのみでもMesh同様の動作となるようにしてほしいです。

Some tests fail when running with Chrome(M64~)

• _setupPCListeners
  • should set up PeerConnection listeners
    • assert.equal(typeof pc.onaddstream, 'function');
  • onaddstream
    • all

These tests will fail because Chrome(M64) has addTrack / ontrack.

https://www.chromestatus.com/feature/5347809238712320

We should fix this and other effects(if exists).

Google Chrome and Microsoft Edge will automatically reconnect after they are disconnected, but the Cleaning up PeerConnection will not appear.

IOS 15 or Android 10 dials a video call to Google Chrome (the latest version) and Microsoft Edge (the latest version). After the call is made, iOS 15 or Android 10 kills the background. Google Chrome and Microsoft Edge console will report:

1.iceConnectionState is disconnected, trying reconnect by browser

2.iceConnectionState is failed, closing connection

Firefox will add 'Cleaning up PeerConnection' on this basis

Firefox console：
SkyWay: iceConnectionState is disconnected, trying reconnect by browser
WebRTC: ICE failed, see about:webrtc for more details
SkyWay: iceConnectionState is failed, closing connection
SkyWay: DataChannel closed for: c_7yd9wr05iixd6049qcbaz6w29
SkyWay: Cleaning up PeerConnection

Firefox can monitor the other party's closing

Google Chrome console：
SkyWay: iceConnectionState is disconnected, trying reconnect by browser
skyway-4.4.5.js:14345 SkyWay: connectionState is disconnected
skyway-4.4.5.js:14345 SkyWay: connectionState is failed
skyway-4.4.5.js:14345 SkyWay: connectionState is failed, closing connection

Google Chrome can't listen to the other party's closing

文字列に絵文字が含まれていると送信に失敗します

お世話になっております。

peer.jsのころからあった症状なのですが、DataConnectionでString型で扱おうとした際に、
絵文字が使われている場合バイナリデータが壊れる症状が発生しております。

参考までに、自前用のシステムでは下記のように書き換えて、修正を行っております。

var decoder = window.TextDecoder ? new window.TextDecoder() : null;

Unpacker.prototype.unpack_string = function(size){
  var bytes = this.read(size);
    if(decoder){
        try{
            str = decoder.decode(bytes);
            this.index += size;
            return str;
        }catch(e){
            
        }
    }
  
  var i = 0, str = '', c, code;
  while(i < size){
    c = bytes[i];
    if ( c < 128){
      str += String.fromCharCode(c);
      i++;
    } else if ((c ^ 0xc0) < 32){
      code = ((c ^ 0xc0) << 6) | (bytes[i+1] & 63);
      str += String.fromCharCode(code);
      i += 2;
    } else {
      code = ((c & 15) << 12) | ((bytes[i+1] & 63) << 6) |
        (bytes[i+2] & 63);
      str += String.fromCharCode(code);
      i += 3;
    }
  }
  this.index += size;
  return str;
}


var encoder = window.TextEncoder ? new window.TextEncoder() : null;
function utf8Length(str){
    if(encoder){
        try{
            var byte = encoder.encode(str);
            if(byte){
                return byte.byteLength;
            }
        }catch(e){
            
        }
    }
  if (str.length > 600) {
    // Blob method faster for large strings
    return (new Blob([str])).size;
  } else {
    return str.replace(/[^\u0000-\u007F]/g, _utf8Replace).length;
  }
}

文字列長を取得する場合はTextDecoder系を使った方が安定するかと思います。
TextDecoderはEDGE以外のブラウザで対応しているので、この手法で問題ないかと思います。
EDGEはDataConnection自体が使えないため、この問題が発生しないので。

以上ご確認のほどよろしくお願いいたします。

Occur java.security.cert.CertPathValidatorException: in react native

I try to use skyway-js-sdk in react naitve.
Following error occurred.

"java.security.cert.CertPathValidatorException: Trust anchor for certification path not found."

I assume that this error is due to skyway's certificate(dispatcher.webrtc.ecl.ntt.com).
(I verified the certificate in https://cryptoreport.geotrust.com/checker/)

Are you planning to modify the certificate?

on('stream') video recive bug

I has two computers for tests, first - without webcam, second - with webcam.
I tested room in two scenarios and found strange thing.
First scenario:
In room entered computer without webcam, connected and activate on('stream') lestener:

this.room.on('stream', (stream) => {
            console.log(stream.getVideoTracks())
          })

Then at room entered computer with webcam.
I see in console on first computer (without webcam):
Array [ VideoStreamTrack ]
This normal way, i receive stream with video, and audio.

Second scenario:
First in room entered computer with webcam. Then entered computer without webcam.
In console on second computer i see:
Array []
So, on('stream') called, but dont receive video.
Then i log, stream.peerId, and i see what received stream is rely stream from first computer with webcam.
I tested this on two frameworks Angular and Vue and on both of them i see this bug.

SfuRoom#replaceStream() fails when using audio OR video only stream in Firefox

Repro

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../_shared/style.css">
  </head>
  <body>
    <button>create peer</button>
    <button>join w/ audio only stream</button>
    <button>join w/ audio+video stream</button>
    <button>replaceStream() w/ cloned same stream</button>

    <script src="../../dist/skyway.js"></script>
    <script src="../_shared/key.js"></script>
    <script src="./script.js"></script>
  </body>
</html>

const Peer = window.Peer;

const [b1, b2, b3, b4] = document.querySelectorAll('button');

let peer = null;
let stream = null;
let room = null;

b1.onclick = () => {
  peer = new Peer({
    key: window.__SKYWAY_KEY__,
    debug: 3,
  });
  console.log(peer);
};
b2.onclick = () => {
  navigator.mediaDevices.getUserMedia({ audio: true }).then(s => {
    stream = s.clone();
    room = peer.joinRoom(Date.now(), { mode: 'sfu', stream });
    console.log(room);
  });
};
b3.onclick = () => {
  navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(s => {
    stream = s.clone();
    room = peer.joinRoom(Date.now(), { mode: 'sfu', stream });
    console.log(room);
  });
};
b4.onclick = () => {
  try {
    room.replaceStream(stream.clone());
    console.log('replaced!');
  } catch (err) {
    console.error(err);
  }
};

• OK: b1 -> b3 -> b4
• NG: b1 -> b2 -> b4

confirmed in Firefox 66.0.4 / Firefox Nightly 68.0a1
Chrome and Safari does not throws.

This does not happen with MeshRoom.

getSenders() returns...

• 2 senders in Firefox = unified-plan
  • 1 for sendrecv
  • 1 for recvonly
• 1 sender in Chrome, Safari = plan-b
  • 1 for sendrecv

recvonly sender does not have its track, therefore throws error at this line.

エラーイベントの引数で、Error.typeを参照するとTypeScriptでエラー扱いになる。

Description of the problem

Peerなどのエラーイベントの引数の型Errorの定義がないため、NodeのErrorが参照されてしまい、Skyway-jsのError.typeを参照するとTypeScriptでエラー扱いされてしまいます。

Environment

• SDK version 4.4.2

Steps to reproduce the problem

1. TypeScriptで import Peer from 'skyway-js'
2. Peerオブジェクト（ここではpeerとする）で peer.on('error', err => console.log(err.type)
3. TypeScriptによりエラーとされる

Expected behavior

Error.typeが文字列化可能なプロパティとして認識されること。
（要するにskyway-jsのErrorを型定義に含めていただきたい）

Other information (Console log etc)

型定義については、上記の他にも「Roomをexportしてほしい（joinRoomの戻り値の型なのに型として利用できない）」という要望もあるのですが、どこに書けばいいのか判断に迷ってます。

skyway-js.d.ts MeshRoom.connections is a map of arrays not map of objects

skyway-js.d.ts
connections is a map of arrays. Needs "[]" like below

export declare class MeshRoom extends Room {
  connections: {
    [peerId: string]: MediaConnection[] | DataConnection[];
  };
}

Sorry I didn't make a pull request
:/

v1.1.21でdisconnected Eventが実施されない

Description of the problem

ブラウザのタブを閉じた時にdisconnected Eventを拾っていましたが、
今月上旬からdisconnected 時の動作ができなくなりました。

cdn.webrtc.ecl.ntt.com/skyway-latest.js
を呼び出していたところを
cdn.webrtc.ecl.ntt.com/skyway-1.1.20.js
に変更したところ改善されました。

skyway-latest.js (v1.1.21) のbugでしょうか。

Environment

• SDK version (ex. SDK v1.0.1,etc)
  v1.1.21

• Device (ex. Windows PC, Nexus6, etc)
  MacBook Air (13-inch, Early 2015)

• OS (ex. Windows XX / Android 7.0 etc)
  MacBook Sierra 10.12.6（16G1036）

• Network (Cable/DSL/Fiber + WiFi, MiFi, LTE, etc)
  Fiber + WiFi

Steps to reproduce the problem

接続確立後、ブラウザのタブを閉じる

Expected behavior

disconnected 処理が実施される

Other information (Console log etc)

1.1.20 と 1.1.21のソースファイルの差分を確認し、

/**
 * Called upon engine `close`.
 *
 * @param {String} reason
 * @api private
 */

Socket.prototype.onclose = function (reason) {
  debug('close (%s)', reason);
  this.connected = false;
  this.disconnected = true;
  delete this.id;
  this.emit('disconnect', reason);
};

の処理に変更がない事は確認しておりますが、
1.1.20 と 1.1.21では差分が多いため、根本原因の解明に苦戦しております。

板間違え

Trying to get listAllPeers using Http Client Guzzle

I'm trying to migrate current app that uses old skyway sdk or modified peerjs, I'm trying to search for the code on this sdk if the DISPATCHER_HOST is always the same since I tried calling the function for testing, the endpoint that it uses is https://signaling-be150100.webrtc.ecl.ntt.com/api/apikeys/<api-key>/clients/. is it always https://signaling-be150100.webrtc.ecl.ntt.com/? or is this pointing dynamically to any signalling server.

querySelector is not a valid selector (if peerId starts with number)

Description of the problem

I tried this sample code:
https://github.com/skyway/skyway-js-sdk/blob/master/examples/room/script.js
and sometimes this error message shows up:

Uncaught DOMException: Failed to execute 'querySelector' on 'Element': 
'[peerid=4eVjeCHS9Wyy6eS3]' is not a valid selector.

If peerId starts with number, such problem occurs.
The problems is here:

 // for closing room members
    room.on('peerLeave', peerId => {
      const remoteVideo = remoteVideos.querySelector(
        `[data-peer-id=${peerId}]`
      );
      remoteVideo.srcObject.getTracks().forEach(track => track.stop());
      remoteVideo.srcObject = null;
      remoteVideo.remove();

      messages.textContent += `=== ${peerId} left ===\n`;
    });

Environment

• SDK version (https://cdn.webrtc.ecl.ntt.com/skyway-latest.js)
• Device (Macbook pro 15-inch 2018)
• OS (macOS Mojave 10.14.6)
• Network (WiFi)

Steps to reproduce the problem

1. open a new tab and run live demo
2. input room name and join
3. open another new tab and run live demo
4. input the same room name and join and leave

Expected behavior

If the left peerId starts with number, the first tab shows the error that reported in this issue

Apply flow

Since v1.0.0 does not apply flow as a static type checker. We'll apply it.

Receive audio only or video only

Background

• If developers wants to implement recvonly, they call peer.call() without MediaStream. Then the SDK works on the condition that both audio and video are used
  • You may confirm that

    skyway-js-sdk/src/peer/negotiator.js

    Lines 339 to 349 in eb611fc

    	if (isRecvOnly) {
    	if (this._isAddTransceiverAvailable) {
    	this._pc.addTransceiver('audio').setDirection('recvonly');
    	this._pc.addTransceiver('video').setDirection('recvonly');
    	createOfferPromise = this._pc.createOffer();
    	} else {
    	createOfferPromise = this._pc.createOffer({
    	offerToReceiveAudio: true,
    	offerToReceiveVideo: true,
    	});
    	}

    works for both audio and video
• But some use cases need just one of audio and video.
  • Issue: the current skyway-js-sdk doesn't meet this requirement

Expected

• developers can call recvonly only for audio or video like

peer.call("PeerID", {
  receiveAudio: true
});

which should result in

...
m=audio
a=recvonly
...

Note that receiveAudio is just a tentative name. We should consider more appropriate one.

• Also mixed case like audio=sendrecv, video=recvonly needs to be taken care of as well.

peer.call("PeerID", mediaStream,  // mediaStream contains only video track
  {
    receiveAudio: true
});

which should result in

m=video
a=sendrecv
m=audio
a=recvonly

npm test error

i got a error follows when i did npm test.
please give me some advice.

OS: Ubuntu 16.04

root@ip:~/skyway-js-sdk# npm test

> [email protected] test /root/skyway-js-sdk
> karma start ./karma.conf.js

14 09 2017 12:52:13.712:ERROR [config]: Invalid config file!
  SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/root/skyway-js-sdk/karma.conf.js:1:85)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.parseConfig (/root/skyway-js-sdk/node_modules/karma/lib/config.js:363:22)
    at new Server (/root/skyway-js-sdk/node_modules/karma/lib/server.js:56:20)
npm ERR! Test failed.  See above for more details.
root@ip:~/skyway-js-sdk# 

Support unreliable transport on DataChannel

Background

• Current SDK send any data with reliable channel

  • skyway-js-sdk/src/peer/negotiator.js

    Line 80 in eb611fc

    const dc = this._pc.createDataChannel(label);

  • here, { ordered: true, maxPacketLifeTime: null, maxRetransmits: null } is set by default. See https://www.w3.org/TR/webrtc/#dom-rtcdatachannelinit for more information
• But some use cases, such as sending command ASAP, need unreliable transport channel

Expected

• developers can send data with unreliable channel
• We need pass to some options in createDataChannel like ordered/maxPacketLifeTime/maxRetransmits as 2nd argument in

  • skyway-js-sdk/src/peer/negotiator.js

    Line 80 in eb611fc

    const dc = this._pc.createDataChannel(label);

• skyway-js-sdk/src/peer.js

  Lines 128 to 137 in eb611fc

  	* Creates new DataConnection.
  	* @param {string} peerId - User's peerId.
  	* @param {Object} [options] - Optional arguments for DataConnection.
  	* @param {string} [options.connectionId] - An ID to uniquely identify the connection.
  	* @param {string} [options.label] - Label to easily identify the connection on either peer.
  	* @param {string} [options.serialization] - How to serialize data when sending.
  	* One of 'binary', 'json' or 'none'.
  	* @return {DataConnection} An instance of DataConnection.
  	*/
  	connect(peerId, options = {}) {

  should have additional options ordered/maxPacketLifeTime/maxRetransmits. (The option name should be discussed)

peer.connect("PeerID", {
  ordered: false
});

• Also SERIALIAZATION should be treated as NONE because developers just want quickness and don't want buffering as SDK does in

  skyway-js-sdk/src/peer/dataConnection.js

  Line 215 in eb611fc

  this._sendBuffer.push(data);