無料でオンライン会議システムを立ち上げてみる

SkyWayとは

話題のオンライン会議（飲み会？）のシステムを自前で作れないかと調べてみると、SkyWayというサービスがあったので試してみます。

SkyWayは、NTT Communicationsが提供するサービスで、「Webでリアルタイムコミュニケーションを実現する標準技術、WebRTC（Web Real Time Communication）を、かんたんにアプリに導入できるSDK&API」とのこと。
Community Editionでは、接続回数などの制限内までは無料で利用することができます。

今回は、JavaScriptのサンプルコードを、こちらも無料で利用できるGitHubのホスティングサービス GitHub Pagesで自分のプロジェクトのWebサイトとして公開する方法について説明します。

開発環境

PC：MacBook
OS：macOS Catalina バージョン 10.15.3

【事前準備】テキストエディタをインストール

すでにテキストエディタをインストール済みであれば、こちら手順はスキップしても問題ありません。

今回はAPIキーの編集くらいにしか使用しないのでプリインストールされている標準のテキストエディタでも問題ないかもしれません。
ここではMicrosoftのテキストエディタVisual Studio Codeをインストールしてみます。

インストール方法については割愛しますが、下記の記事などを参考にしてみて下さい。
MacOSでVisual Studio Codeをインストールする手順
ターミナルからVisual Studio Codeを起動する方法【公式の方法】

GitHubのアカウント登録

GitHubのアカウントがない場合には、こちらからアカウントを登録して下さい。

GitHubの登録方法や使い方が分からない場合には、下記の記事などを参考にしてみて下さい。
今さら聞けない！GitHubの使い方【超初心者向け】

SSH接続の設定

git cloneコマンドでサンプルコードなどを取得するためにSSH接続の設定を行います。

私が参考にした記事です。
GitHubでssh接続する手順~公開鍵・秘密鍵の生成から~

SkyWayの開発者登録

SkyWayの開発者登録をこちらから行います。

SkyWayにアプリケーションを追加

ダッシュボードへログインし、以下を行います。

1. 「新しくアプリケーションを作成する」ボタンを押す
   

2. 「利用可能ドメイン」にusername.github.ioを追加して、「アプリケーションを作成する」を押す
   usernameはGitHubの自分のユーザ名です。（以降のusernameも同様）
   

公開用のリモートリポジトリを作成

GitHubにサインインして公開用の新規リポジトリを作成します。
今回は、skywayというリポジトリ名にします。
無料プランでホスティングサービスを利用する場合には、Publicを選択して下さい。

リモートリポジトリをローカルにクローン

コンソールから下記のコマンドを実行して、リモートリポジトリをローカルにクローンします。空のリポジトリが複製されたというような警告が出ますが、とりあえず無視で。
これでmyrepoというフォルダが生成されるはずです。

zsh

~ % git clone [e-mail]:username/skyway.git ./myrepo
Cloning into 'skyway'...
warning: You appear to have cloned an empty repository.

サンプルコードをローカルのリポジトリにコピー

次に、SkyWayのskyway-js-sdkをクローンします。
下記のコマンドを実行するとskyway-js-sdkというフォルダが生成されます。
この中のexamplesというフォルダがサンプルコードです。
このフォルダを先ほどクローンした自分のローカルリポジトリにコピーします。

zsh

~ % git clone [e-mail]:skyway/skyway-js-sdk.git ./skyway-js-sdk
Cloning into 'skyway-js-sdk'...
remote: Enumerating objects: 7522, done.
remote: Total 7522 (delta 0), reused 0 (delta 0), pack-reused 7522
Receiving objects: 100% (7522/7522), 2.78 MiB | 2.62 MiB/s, done.
Resolving deltas: 100% (4949/4949), done.
~ % cp -rf ./skyway-js-sdk/examples/. ./myrepo

_sharedでは相対パスのURLとして指定できないようなので、とりあえず先頭のアンダースコアを削除してsharedにリネームします。
公式のWebサイト(https://example.webrtc.ecl.ntt.com)では_shared/key.jsや_shared/style.cssで参照できているようですが。。。

zsh

~ % cd myrepo
myrepo % mv _shared shared

最終的にローカルのファイルは、下記のようなフォルダ構成になります。

• myrepo
  • skyway-js-sdk/examplesをコピーしたフォルダ
• skyway-js-sdk
  • SkyWayのリポジトリをクローンしたフォルダ

 ── myrepo ── p2p-data
 |         ├─ p2p-media
 |         ├─ room
 |         └─ shared 
 └- skyway-js-sdk ── examples ── _shared
                              ├─ p2p-data
                              ├─ p2p-media
                              └─ room

index.htmlの_sharedをsharedに変更

p2p-data/index.html、p2p-media/index.html、room/index.htmlで参照している_sharedのパスをsharedに変更します。
前述したVisual Studio Codeをインストールしてコンソールからコマンドを起動する方法を有効している場合には、コンソールでcode ファイル名と入力するとVisual Studio Codeが起動してファイルを編集することができます。（もちろん、他のテキストエディタを使って編集しても構いません。）

zsh

myrepo % code p2p-data/index.html
myrepo % code p2p-media/index.html
myrepo % code room/index.html

下記の２箇所の_sharedをsharedに変更します。

index.html

    <link rel="stylesheet" href="../_shared/style.css">

    <script src="../_shared/key.js"></script>　　　

key.jsにSkyWayのAPIキーをコピー

SkyWayのダッシュボードからAPIキーをコピーします。

コンソールまたはFinderからshared/key.jsを開いて、<YOUR_KEY_HERE>をコピーしたAPIキーに置き換えて下さい。

zsh

myrepo % code shared/key.js

key.js

window.__SKYWAY_KEY__ = '<YOUR_KEY_HERE>';

公開用のリモートリポジトリにプッシュ

下記の手順でmyrepo以下のファイルをすべてリモートリポジトリにプッシュします。

zsh

myrepo % git add --all
myrepo % git commit -m "first commit"
[master (root-commit) cd4b8b0] first commit
 11 files changed, 490 insertions(+)
 create mode 100644 p2p-data/README.md
 create mode 100644 p2p-data/index.html
 create mode 100644 p2p-data/script.js
 create mode 100644 p2p-media/README.md
 create mode 100644 p2p-media/index.html
 create mode 100644 p2p-media/script.js
 create mode 100644 room/README.md
 create mode 100644 room/index.html
 create mode 100644 room/script.js
 create mode 100644 shared/key.js
 create mode 100644 shared/style.css
myrepo % git push
Enumerating objects: 17, done.
Counting objects: 100% (17/17), done.
Delta compression using up to 4 threads
Compressing objects: 100% (17/17), done.
Writing objects: 100% (17/17), 4.39 KiB | 898.00 KiB/s, done.
Total 17 (delta 4), reused 0 (delta 0)
remote: Resolving deltas: 100% (4/4), done.
To github.com:username/skyway.git
 * [new branch]      master -> master

ここまででGitHubのリモートリポジトリには、下記のようにサンプルコードがアップロードされているはずです。

GitHub PagesでWebサイトを公開

GitHubのリモートリポジトリのSettingsを選択して、下にスクロールするとGitHub Pagesという項目があります。
ここで、SourceをNoneからmaster branchに変更すると、先ほどプッシュしたファイルがhttps://username.github.io/skyway/として公開されます。
（ただし、https://username.github.io/skyway/の直下には何もファイルを置いてないので、アクセスしてもFile not foundと表示されるだけです。）

実際に立ち上げてみる

https://username.github.io/skyway/以下のURLは、フォルダ名がそのままURLになります。

• 1対1のビデオ通話
  • https://username.github.io/skyway/p2p-media/
• 1対1のテキストチャット
  • https://username.github.io/skyway/p2p-data/
• 多人数のビデオ会議 / テキストチャット
  • https://username.github.io/skyway/room/

「room」に自分のMacとiPhoneでつなげたら、一応こんな感じで繋がりました！

まとめ

SkyWayのサンプルコードを使って全くプログラミングすることなく、ビデオ会議システムがそれっぽく動くところまで確認できました。
無料で試せるところもいい感じですね。
あとは、必要に応じてフロントエンド側を開発していけば、独自にカスタマイズしたサービスが簡単に構築できるはずです。
（というか、私もWebアプリのプログラミングは初心者なので、動かしながら勉強していこうかと。）
ぜひ皆さんも試してみて下さい。

リンク

中の人も色々と記事を書かれているようです。
https://qiita.com/tags/skyway?page=1