SkyWayを使ったブラウザー版Videoチャット

こんにちは
ジンでございます。

NTT Communicationsが2013年からトライアルサービスを提供してたSkyWayの商用版を2017年8月7日に正式にリリースしました。

SkyWayは、WebRTCの機能を簡易に利用するためのシグナリング機能、セッション管理機能(契約者のサービス(本サービスを利用して契約者が提供するサービスを言います。)を利用するユーザ数等を収集可能にする機能を言います。)等を提供するサービス。-SkyWayの利用規約より-です。

スクリーンショット 2017-09-08 15

今回のテーマは2つです。
・SkyWay SDKを利用してウェブ版Videoチャットを作る
・SkyWayの無料版Video会議(SkyWay Conference)を開く

まずSkyWayのSDKを使ってウェブアプリを作ってみます。

環境設定はJavascript用チュートリアルを利用しました。

環境設定

1. SkyWayアカウント登録
ログイン画面よりアカウントを作成します。
制限ありの無料で利用でできるCommunity Editionアカウントを作成しました。

新規登録をしますと、登録したemailあてに本登録承認リンクが送られます。
24時間以内にリンクにアクセスすると本登録が完了します。

2. アプリ登録
作成したアカウントでダッシュボードにログインします。
・アプリケーション説明文:テストアプリ
・利用可能ドメイン名:サーバマシンのip address

3. apiキーの確認
作成したアプルからapiキーを確認します。

3. サンプルプロジェクトを適当な場所にクローンします。
cd ~/work
git clone https://github.com/skyway/skyway-js-sdk-tutorial.git

4. jsファイルの修正
チュートリアルのサンプルコードを全てコピーしてファイルに保存します。
vi ~/work/skyway-js-sdk-tutorial/script.js
※’api key’:は3で作成したアプリのapiキーを使います。


(function() {

'use strict';

let localStream = null;
let peer = null;
let existingCall = null;

navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function (stream) {
// Success
$('#my-video').get(0).srcObject = stream;
localStream = stream;
}).catch(function (error) {
// Error
console.error('mediaDevice.getUserMedia() error:', error);
return;
});

peer = new Peer({
key: 'api key',
debug: 3
});

peer.on('open', function(){
$('#my-id').text(peer.id);
});

peer.on('error', function(err){
alert(err.message);
});

peer.on('close', function(){
});

peer.on('disconnected', function(){
});

$('#make-call').submit(function(e){
e.preventDefault();
const call = peer.call($('#callto-id').val(), localStream);
setupCallEventHandlers(call);
});

$('#end-call').click(function(){
existingCall.close();
});

peer.on('call', function(call){
call.answer(localStream);
setupCallEventHandlers(call);
});
function setupCallEventHandlers(call){
if (existingCall) {
existingCall.close();
};

existingCall = call;

call.on('stream', function(stream){
addVideo(call,stream);
setupEndCallUI();
$('#their-id').text(call.remoteId);
});

call.on('close', function(){
removeVideo(call.remoteId);
setupMakeCallUI();
});

}

function addVideo(call,stream){
$('#their-video').get(0).srcObject = stream;
}

function removeVideo(peerId){
$('#'+peerId).remove();
}

function setupMakeCallUI(){
$('#make-call').show();
$('#end-call').hide();
}

function setupEndCallUI() {
$('#make-call').hide();
$('#end-call').show();
}

}());

5. サーバーを起動します。
pushd ~/work/skyway-js-sdk-tutorial/
python -m SimpleHTTPServer 8080

ローカル環境がMacでpythonが2.7だったため上記のコマンドで実行しました。
ローカルwebサービス準備参照

6. 画面確認
http://{ip address}:8080 へアクセスして画面表示を確認
※ip address は 2で登録したサーバーマシンのip addressです。
ブラウザ依存の問題があるのでFireFoxでためしました。

7. 隣の人に画面にアクセスしてもらいました。
スクリーンショット 2017-09-08 11.30.31
こんな感じです〜

無料でVideo会議を開く

SkyWayは無料で利用できるVideo会議機能があります。

1. Video会議作成ページから会議を作ります
スクリーンショット 2017-09-08 15.28.38
SFU、FullMeshについて

2. 作成した会議のURLを共有します。

3. 招待で2人が入りました。
スクリーンショット 2017-09-08 11.51.29
複数人が同時にアクセスできて、Video、チャット、画面共有機能が使えますね。

まとめ

なかなかいいサービスじゃないでしょうか?
事例紹介を見ると社会のいろんなところで活用できると思います。
SkyWayの成長を期待しています。

ありがとうございました。

SNSでもご購読できます。