SkyWayのサンプルを使う

今回は以前の記事で少し触れたSkyWayの設置作業について書きます。独自ドメインとサーバーを確保していることが前提の内容となりますが予めご了承ください。

電話代を節約できるネットの無料通話
現在は色々な連絡手段がありますが、手っ取り早いのは電話ですよね。 もちろん、文字だけで済むメー...

SkyWayとは

SkyWayは、NTTコミュニケーションズが提供している開発者向けのサービスで、WebRTCを使ったビデオ通話が可能です。

WebRTCというのは、Web Real-Time Communicationの略称で、ブラウザやモバイル用のアプリでリアルタイムの通信が可能になる技術です。

要するにブラウザだけで通話やチャットができるというわけです。

設置する人はAPI用のアカウントを作る必要がありますが、設置者以外は指定したURLにブラウザでアクセスするだけで使えるので、ソフトのインストールやアカウント作成が苦手という人とも簡単に通話できると思います。

以下のページで実際に試してみると、どんな感じかわかりますよ。

SkyWay Conference

適当な文字列を入力してから「ルーム作成」をクリックすると、通話ページに移動します。

SkyWay | アプリやWebサービスに、ビデオ・音声通話をかんたんに導入・実装できるSDK
SkyWayは、ビデオ・音声通話の機能をかんたんに実装できる、マルチプラットフォームなSDKです。

さきほどのページはNTTが管理しているものですが、公式サイトで配布しているSkyWayのサンプルプログラムを自分のサーバーに設置することもできます。

サンプルプログラムはHTMLとCSSとJavascriptというサイトの基本構成になっているので、サイトを作ったことがあれば、比較的簡単に設置とカスタマイズができると思います。

料金

使用する際の料金ですが、Community EditionとEnterprise Editionの2つの料金プランがあります。

ただ、Community Editionの方は初期費用、月額費用ともに0円なので無料です。接続する回数と時間に上限がありますが、普通に使う範囲であれば制限がかからないと思います。

料金 | SkyWay(アプリやWebサービスに、ビデオ・音声通話をかんたんに導入・実装できるSDK)
SkyWayは、ビデオ・音声通話の機能をかんたんに実装できる、マルチプラットフォームなSDKです。

設置作業の流れ

SkyWayの設置作業は主に以下の4つです。

  1. 開発者登録
  2. APIキーを取得
  3. サンプルのダウンロードと修正
  4. サーバーに設置

取得済みのドメインと使っているサーバーがあることを前提にしていますので、これらがない場合は、ドメインの取得とレンタルサーバーとの契約が必要になります。

開発者登録

SkyWayを使用するには開発者登録が必要です。といっても、SkyWayを使うためのユーザー登録みたいなものなので難しくはありません。

また、名前、メールアドレス、パスワードの3つの入力で登録できるので、登録作業も簡単だと思います。

Community Editionの開発者登録

登録する時に入力したメールアドレスとパスワードは、管理画面へログインする時に使うので、忘れないようにメモしておくと良いですね。

APIキーを取得

SkyWayを使うためにはAPIキーというものを取得する必要があります。

APIキーは、ダッシュボードにログインし、使用するドメインの登録を済ませると取得できます。ログインに使用するメールアドレスとパスワードは、開発者登録の時に入力したものです。

Log in- A Simple and Flexible WebRTC Platform

ログインが完了すると、画面上部に「新しくアプリケーションを追加する」というボタンがあるので、ここをクリックします。

登録画面が出るので、「アプリケーション説明文」と「利用可能ドメイン名」に入力して、画面下の「アプリケーションを作成する」をクリックします。

登録したドメインがアプリケーション一覧に表示され、一番上にAPIキーが表示されます。

このAPIキーは、SkyWayを設置する際に必要となるので、メモ帳かテキストエディタに貼り付けて保存しておくと良いです。

SKYWAYのAPI

サンプルのダウンロードと修正

公式サイトでSkyWayのサンプルファイルをダウンロードできるので、とりあえず、サンプルを設置して使ってみると良いです。

サンプルファイルは、以下のページの「ファイルをダウンロードする場合」にあるリンクからダウンロードできます。

Javascript SDK | ドキュメント | SkyWay(アプリやWebサービスに、ビデオ・音声通話をかんたんに導入・実装できるSDK)
SkyWayは、ビデオ・音声通話の機能をかんたんに実装できる、マルチプラットフォームなSDKです。
ここで使用しているフォルダ名、ファイル名、構成等は記事作成時のものです。現在配布されているものと違う可能性もあります。

ダウンロードした「skyway-js-sdk-master.zip」を解凍して「skyway-js-sdk-master」を開くと「examples」というフォルダがあります。

skyway-js-sdk-master-20190824

このフォルダの中にある複数のフォルダがサンプルです。

examples-20190824

フォルダの名前でわかるかもしれませんが、「p2p-data」は1対1のチャット用、「p2p-media」は1対1のビデオ通話用、「room」は多人数のビデオ通話兼チャット用です。

各フォルダの中には、ブラウザで表示するindex.htmlと通信に使用するscript.jsが入っています。

また、「_shared」の中にある「key.js」は、以下の内容になっており、右側の「<YOUR_KEY_HERE>」には先ほど取得したAPIキーを入力します。

window.__SKYWAY_KEY__ = '<YOUR_KEY_HERE>';

key.jsを編集したら保存します。

サーバーに設置

現在使っているサーバーがあるなら、そのサーバーに「p2p-data」、「p2p-media」、「room」のいずれかと、「_shared」をアップロードしたら準備完了です。

例えば、複数の人でビデオ通話をするなら、「room」と「_shared」をサーバーにアップロードします。

ただ、SSLでの通信が前提になるので、「https~」のURLでアクセスできる場所にアップロードする必要があります。

すぐに使えるサーバーがない時は、レンタルサーバーを新規で借りる必要がありますが、これ用に借りるなら、安いサーバーを短期で借りるとよいかもしれません。

あと、ドメインとAPIが紐づいているので、登録したドメインと別のドメインで使用したい時は、先ほどのダッシュボードにログインして、使用するドメインを追加登録し、アップロードするkey.jsのAPIもそのドメイン用のものに差し替える必要があります。

文章だとわかりにくいかもしれませんが、設置場所(ドメイン)とアップロードするkey.jsのAPIがダッシュボードの登録内容と一致していないとダメって話です。

ビデオ通話を使う

サンプルのp2p-mediaを設置すると、1対1でビデオ通話ができるようになります。

使用する際は、設置したURLにアクセスし、入力欄に相手のIDを記入して「call」をクリックします。

p2p-media-20190824

マイクとウェブカメラの接続に問題があるとエラーになるので、事前に動作確認をしておくと良いです。

テキストチャットを使う

サンプルのp2p-dataを設置すると、1対1でチャットができるようになります。チャットなので文字だけのやりとりです。

使用する際は、設置したURLにアクセスし、p2p-mediaの時と同じく相手のIDを左側の入力欄に打ち込んで「Connect」をクリックします。

接続が完了すると右側の入力欄を使った文章のやりとりができるようになります。

チャットのサンプル

あとは相手にページのURLと自分のID(Your IDに表示される文字列)を知らせればチャットができます。「Close」をクリックすると終了します。

複数の人でビデオ通話

サンプルの中にある「room」のフォルダをサーバーにアップロードすると、複数の人たちとビデオ通話ができるようになります。

SkyWay room example

参考までに使用方法も書いておきます。

1.設置したページへアクセス
2.使用するroom(部屋の名前)を決める
3.他の参加者たちに部屋の名前を通知
4.参加者全員が同じ部屋の名前を入力して「Join」をクリック

また、右側にあるチャット欄を使った文字でのやりとりもできます。

ビデオ通話を終了する時は、「Leave」のボタンを押します。

初期状態だと毎回room名を決める必要があるのですが、以下の部分を修正したファイルをサーバーにアップロードすると、固定された部屋の名前で使えます。

1.roomフォルダの中にある「index.html」を開く
2.19行目あたりで以下の部分を探す

<input id=”js-room-id” type=”text” placeholder=”Room Name” />

見つかったら「value=”部屋の名前(任意の文字列)”」を追加します。この部分が使う部屋の名前になります。

例)部屋の名前が「meganeroom」の場合
<input id=”js-room-id” type=”text” value=”meganeroom” placeholder=”Room Name” />

アクセスした時に入力欄で表示する文字列を決めているだけなので、入力欄の名前を変更して使うこともできます。

IDについて

ページ上には「Your ID」という部分があり、アクセスした人に個別のIDが割り振られます。

このIDは固定ではなく、ページを表示した時に自動生成されるので、ブラウザの更新でページを再度読み込んだ時もIDが変わります。

p2p-mediaとp2p-dataでは、相手のIDを指定して接続するので、Skyway以外の連絡手段で相手のIDを送ってもらう必要があります。

すぐに使いたい時は、roomが便利かもしれません。

さいごに

今回紹介したSkyWayは、自分でサーバーに設置することになるので、ドメインとサーバーの知識が多少必要になりますが、簡単に使えるので何かと重宝すると思います。

ただ、不完全な暗号化での通信になるので、情報の漏洩が気になるようでしたら、安全性が高いSignalの利用をおすすめします。

乗り換え、併用におすすめのSignal
最近は色々なサービスや公的機関でもLINEが使われていて、メールや電話の代わりに使う人も多いですよね...