概要
最近はコロナウィルスの影響でStayHomeすることが多くなっています。
3密を避ける生活をしていると、密なコミュニケーションを取り続けることが、より大切になってきていると感じます。
そこで遠隔とのコミュニケーションに役立つWebRTC（Web Real-Time Communication）について調べてみました。
今回はNoodlを簡易Webサーバとして利用し、ビデオ・音声通話基盤のSkyWayを使ったアプリケーション(1対1のビデオ通話システム)を試します。
技術要素
- WebRTC:ブラウザ上でリアルタイム通信する技術
- SkyWay:ビデオ・音声通話のためのマルチプラットフォームSDK
- Noodl：ビジュアルプログラミングツール(今回は簡易Webサーバとして利用）
1. SkyWayのセットアップ
まずはSkyWayのサイトでアカウントを作成し、アプリケーションをつくります。
1.トップページから「無料で始める」ボタンを押します。
2.次に「Community Edition（無料版）に登録する」でメールアドレス、パスワードを登録します。
無料版/有料版の比較・詳細はこちらで確認してください。
3.「登録する」をクリックすると、入力したメールアドレス宛に認証メールが届くので、リンクをクリックし認証します。
2. SkyWayでアプリケーションを作成する
メール認証をしたら、再度ログインをして開発者用ダッシュボードに進みます。
1.「新しくアプリケーションを作成する」からSkyWayアプリケーションを作成します。アプリケーション説明文にP2P-media(任意)、利用可能ドメイン名にはlocalhostを入力します。
2.その他の権限1についてはデフォルトのままとし、アプリケーションを作成します。
3.アプリケーションが作成されるとAPIキーが作成されるので、これをメモします。
3. SkyWayサンプルコードのダウンロード
1.次に、SkyWay公式のGitHubからサンプルコードをCloneします。
今回は1対1のビデオ通話のサンプルコードを使うので、
examples/p2p-mediaとexamples/_sharedフォルダを使います。
2.examples/_shared/key.jsファイルを開いて取得したAPIキーを転記します。
window.__SKYWAY_KEY__ = '先ほどメモしたAPIキー';
4. Noodlを簡易Webサーバとする
あとは上記ファイルをWebサーバに配置するだけです。
ここでは簡易WebサーバとしてNooldを使います。
なお、外部サーバで確認したい場合はSkyWayの「設定変更」から利用可能ドメインに対象のサーバドメインを追加しておいてください。例えばyur-site/github.ioなどです。
1.Noodlを起動し、新たにProjectを作成します。Projectはクラウド上ではなくローカルPC(Save locally)を選択してください。この時点でWebサーバが起動します。
2.プロジェクトフォルダを開くためにNoodlのギアマークからプロジェクトフォルダを開いてください。
3.プロジェクトフォルダにp2p-mediaフォルダと_sharedフォルダをコピーしてください。
4.これで準備ができましたので、さっそくブラウザ上からサンプルファイルにアクセスします。ChromeなどWebcamに対応しているブラウザでアクセスしてみてください。
Noodlの簡易サーバはポート8574で起動し、プロジェクトフォルダは'/external/viewer/'以下に展開されます。
Webcamはセキュリティの問題でlocalhostへのHTTP通信かHTTPS通信のサイトでなければ実行できません。そのためURLはこちらでアクセスすることなります。
カメラにアクセスしても良いか確認のダイアログが表示されます。OKすればカメラの映像が表示されるはずです。
これでビデオ通話システムが起動します。うまくいけば実行後の画面はこちらになります。
まとめ
SkyWayを使うと簡単にビデオ通話システムが構築できました。
同様の手順でサンプルから1対1のテキストチャット・1対多のビデオ会議システムも試すことができます。
本当はNoodlのビジュアルプログラミングを使って構築したかったのですが、NoodlのJavascriptノードでWebcamera、videoの扱い方がよくわかりませんでした。今回はサンプルの実行までとなります。
参考
OSSを使って独自のWeb会議アプリ(SkyWay Conf)を立てる方法
スマホとPCでビデオ通話できるWebページを作ってみた
【爆速！】5分でビデオチャットを構築する
-
TURNサーバ：社内ネットワークなど、NAT超えが必要な環境下の端末との通信を実現する中継サーバ。SFUサーバ：多拠点通信にて、端末の負荷を下げる中継サーバ ↩