今回は以前の記事で少し触れたSkyWayの設置作業について書きます。独自ドメインとサーバーを確保していることが前提の内容となりますが予めご了承ください。
また、新サービスの提供開始に伴い、旧SkyWayの新規登録が終了します。
「WebRTC Platform SkyWay」新規お申し込み受付終了について
新SkyWayにも無料プランがあるので、これから試すのであれば、そちらの利用をおすすめします。
SkyWayとは
SkyWayは、NTTコミュニケーションズが提供している開発者向けのサービスで、WebRTCを使ったビデオ通話が可能です。
WebRTCというのは、Web Real-Time Communicationの略称で、ブラウザやモバイル用のアプリでリアルタイムの通信が可能になる技術です。
要するにブラウザだけで通話やチャットができるというわけです。
設置する人はAPI用のアカウントを作る必要がありますが、設置者以外は指定したURLにブラウザでアクセスするだけで使えるので、ソフトのインストールやアカウント作成が苦手という人とも簡単に通話できると思います。
以下のページで実際に試してみると、どんな感じかわかりますよ。
適当な文字列を入力してから「ルーム作成」をクリックすると、通話ページに移動します。
さきほどのページはNTTが管理しているものですが、公式サイトで配布しているSkyWayのサンプルプログラムを自分のサーバーに設置することもできます。
サンプルプログラムはHTMLとCSSとJavascriptというサイトの基本構成になっているので、サイトを作ったことがあれば、比較的簡単に設置とカスタマイズができると思います。
料金
使用する際の料金ですが、Community EditionとEnterprise Editionの2つの料金プランがあります。
ただ、Community Editionの方は初期費用、月額費用ともに0円なので無料です。接続する回数と時間に上限がありますが、普通に使う範囲であれば制限がかからないと思います。
追記 2023/4/1）
料金プランに変更がありました。
また、法人の場合は、利用条件にもご注意ください。
設置作業の流れ
SkyWayの設置作業は主に以下の4つです。
- 開発者登録
- APIキーを取得
- サンプルのダウンロードと修正
- サーバーに設置
取得済みのドメインと使っているサーバーがあることを前提にしていますので、これらがない場合は、ドメインの取得とレンタルサーバーとの契約が必要になります。
開発者登録
SkyWayを使用するには開発者登録が必要です。といっても、SkyWayを使うためのユーザー登録みたいなものなので難しくはありません。
また、名前、メールアドレス、パスワードの3つの入力で登録できるので、登録作業も簡単だと思います。
Community Editionの開発者登録
※新規登録は2023年9月30日に終了予定
登録する時に入力したメールアドレスとパスワードは、管理画面へログインする時に使うので、忘れないようにメモしておくと良いですね。
APIキーを取得
SkyWayを使うためにはAPIキーというものを取得する必要があります。
APIキーは、ダッシュボードにログインし、使用するドメインの登録を済ませると取得できます。ログインに使用するメールアドレスとパスワードは、開発者登録の時に入力したものです。
ログインが完了すると、画面上部に「新しくアプリケーションを追加する」というボタンがあるので、ここをクリックします。
登録画面が出るので、「アプリケーション説明文」と「利用可能ドメイン名」に入力して、画面下の「アプリケーションを作成する」をクリックします。
登録したドメインがアプリケーション一覧に表示され、一番上にAPIキーが表示されます。
このAPIキーは、SkyWayを設置する際に必要となるので、メモ帳かテキストエディタに貼り付けて保存しておくと良いです。
サンプルのダウンロードと修正
SkyWayのサンプルファイルが配布されているので、そちらを設置して使ってみると良いです。
以下のページの一番下にあるリンクからGitHubへ移動するとサンプルのフォルダの内容を確認できます。
ただ、先ほどのリンクから移動したGitHubのページにはダウンロード用のリンクがないので、サンプルをダウンロードする時は、以下のページにアクセスし、「Code（緑色のボタン）」をクリックしてから「Download ZIP」をクリックします。
ダウンロードした「skyway-js-sdk-master.zip」を解凍して「skyway-js-sdk-master」を開くと「examples」というフォルダがあります。
このフォルダの中にある複数のフォルダがサンプルです。
フォルダの名前でわかるかもしれませんが、「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-dataを設置すると、1対1でチャットができるようになります。チャットなので文字だけのやりとりです。
使用する際は、設置したURLにアクセスし、p2p-mediaの時と同じく相手のIDを左側の入力欄に打ち込んで「Connect」をクリックします。
接続が完了すると右側の入力欄を使った文章のやりとりができるようになります。
あとは相手にページのURLと自分のID（Your IDに表示される文字列）を知らせればチャットができます。「Close」をクリックすると終了します。
複数の人でビデオ通話
サンプルの中にある「room」のフォルダをサーバーにアップロードすると、複数の人たちとビデオ通話ができるようになります。
参考までに使用方法も書いておきます。
2.使用するroom（部屋の名前）を決める
3.他の参加者たちに部屋の名前を通知
4.参加者全員が同じ部屋の名前を入力して「Join」をクリック
また、右側にあるチャット欄を使った文字でのやりとりもできます。
ビデオ通話を終了する時は、「Leave」のボタンを押します。
初期状態だと毎回room名を決める必要があるのですが、以下の部分を修正したファイルをサーバーにアップロードすると、固定された部屋の名前で使えます。
1.roomフォルダの中にある「index.html」を開く
2.19行目あたりで以下の部分を探す
見つかったら「value=”部屋の名前（任意の文字列）”」を追加します。この部分が使う部屋の名前になります。
<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は、自分でサーバーに設置することになるので、ドメインとサーバーの知識が多少必要になりますが、簡単に使えるので何かと重宝すると思います。
