1． この記事の内容
WebRTCを勉強中の初心者エンジニアです。
前回は、WebRTCの仕組みを調査しました。今後はハンズオンとして、Amazon Kinesis Video Streams WebRTC（以降、KVS WebRTC）でWebチャットアプリを作っていきます。
今回は、KVS WebRTC SDK（JavaScript）のサンプルをEC2にデプロイして動作確認したので、その手順をまとめます。
この記事で触れる内容は以下です。
- Amazon Kinesis Video Streams WebRTCの使い方
- EC2でWebサイトを公開する方法
- WebサイトのSSL化の方法
2．Amazon Kinesis Video Streams WebRTCとは
フルマネージドのシグナリングサーバー、STANサーバー、TURNサーバーを提供しています。
また、クライアント側のSDKも公開されています。ブラウザ向け（JavaScript）、組み込み用途（C言語）、iOS/Androidアプリ向けのSDKがあり、用途に合わせて利用できます。
詳細は公式ドキュメントをご覧ください。
3．構成イメージ
AWSリソースと、KVS WebRTC SDK（JavaScript）のサンプルを使って、下図のようなサービスを構築します。
4．前提
AWSコンソールで作業します。AWSアカウントを作成していることを前提として進めます。
5．手順
Webサイトの公開
1.Amazon Elastic Compute Cloud（EC2）でWebサーバーを構築する
下記サイトの手順に従ってEC2を起動し、Apacheを入れてWebサーバーを構築します。
2.EC2にサンプルプログラムを配置する
Webサーバーに、クライアントのサンプルプログラムを配置します。
まずは、KVS JavaScript SDKのリポジトリをクローンします。
AWSコンソールからEC2に接続した状態で、下記コマンドを実行します。
sudo yum install git-all
git clone https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js
サンプルのままでは、kvs-webrtc.jsが参照されずエラーになるのでindex.htmlを書き換えます。
下記コマンドで、index.htmlを開きます。
cd amazon-kinesis-video-streams-webrtc-sdk-js/examples
vim index.html
開いたら、下図赤枠内のように書き換えて保存します。
次に、下記コマンドで、クローンしたフォルダ配下のサンプルプログラム（HTML、css、jsなど）を/var/www/html/配下に配置します。
cd amazon-kinesis-video-streams-webrtc-sdk-js/examples
sudo cp app.css favicon.ico loader.css createSignalingChannel.js index.html master.js viewer.js app.js /var/www/html/
最後に、ブラウザからWebサイトにアクセスして確認します。
ブラウザにEC2の「パブリック IPv4 アドレス」を入力します。
下図のページが表示されれば、Webサイトの公開完了です。ページに入力する値は、次項の手順で取得します。
KVS WebRTCの設定
KVS WebRTCのシグナリングサーバー・STUN/TURNサーバーを利用するには、以下２つが必要です。
- シグナリングチャネル
- AmazonKinesisVideoStreamsFullAccess権限のあるIAMユーザー
1.KVSのシグナリングチャネルを取得する
AWSコンソールで「KVS」と検索して、KVSの画面を表示します。
画面左側のメニューから「シグナリングチャネル」を選択し「シグナリングチャネルを作成」を押下します。
画面右上のリージョンは「ap-northeast-1」にします。
次の画面で、「シグナリングチャネル名」に任意の名前を入力して「シグナリングチャネルを作成」を押下します。
2.Identity and Access Managemenen（IAM）ユーザーを作成する
AWSコンソールで「IAM」を検索します。
IAMの画面左側のメニューの「ユーザー」を選択し、「ユーザーを追加」を押下します。
ユーザー詳細の設定で以下を入力して「次のステップ」を押下します。
ユーザー名：任意の名前
プログラムによるアクセス：チェック
アクセス許可の設定で、「既存のポリシーを直接アタッチ」を選択し、「AmazonKinesisVideoStreamsFullAccess」を選択して「次のステップ」を押下します。
タグの追加は何も指定せず、「次のステップ」を押下します。
確認画面で、「ユーザーの作成」を押下します。
最後に「.csvのダウンロード」を押下して、アクセスキーID、シークレットアクセスキーを保存しておきます。
これで、KVS webRTCの利用準備が整いました。
が、まだ、ビデオチャットはできません。HTTPS通信でないと、ブラウザからカメラデバイスへアクセスできないからです。
WebサイトのSSL化
構築したWebサイトをHTTPS通信で配信するように変更します。
Route53で取得したドメインを使ってAWS Certificate Manager（ACM）で証明書を取得し、証明書をElastic Load Balancing（ELB）に適用します。ELBとEC2を紐付けてインターネット-ELB間はHTTPS、ELB-EC2間はHTTPで通信します。（下図）
1.ドメインを取得する
以下のサイトの手順に従ってAWSコンソールでドメインを購入します。
2.証明書を適応してSSL化する
以下のサイトの手順に従って、ELBに証明書を適応し、Webサーバーと紐付けます。
https://dev.classmethod.jp/articles/aws-web-server-https-for-beginner/
これで、ブラウザからカメラデバイスへアクセス可能となりました。
通信テスト
最後にPCを2台用意して、通信の確認をします。
1.サンプルページのフォーム入力
下図に従って設定値を入力します。
1台目のPCで、「Start Master」を押下します。
2台目のPCで、「Start Viewer」を押下します。
下図のように両者の映像が表示されれば成功です。
オフィスと自宅など、NATを超えた通信でも30分以上問題なく利用できました。
6．まとめ
Amazon Kinesis Video Streams WebRTCSDK（JavaScript）のサンプルをEC2で動かしてみたので、その手順をまとめました。
次回は、C言語版の実装をしてみたいと思います。
おまけ．サンプルコードの確認
動作確認ができたので、コードを覗いて処理の概要を確認します。
JSファイルの処理概要
サンプルのJSファイルは、それぞれ主に以下の処理を担当しているようです。
-
APP.js・・・画面の更新などMaster、Viewerの共通処理。
-
createSignalingChannel.js・・・シグナリングチャネルを利用するためのオブジェクトを作成する。
-
Viewer.js・・・Viewer側の処理。シグナリングチャネルに接続する。RTCPeerConnectionを生成して、offer SDPを送信する。Masterのメディアを受信したら画面に表示する。
-
Master.js・・・Master側の処理。シグナリングチャネルに接続する。
offer SDPを受け取ったらRTCPeerConnectionを生成してanswer SDPを送信する。Viewerのメディアを受信したら画面に表示する。
主要なクラスやAPI
【KVSWebRTC.SignalingClient】
SDPの送受信や、ICEcandidateの送受信など、シグナリングの処理を行うクラス。
例．ICEcandidateの送信
signalingClient.sendIceCandidate(candidate);
例．ICEcandidate受信時の処理
signalingClient.on('iceCandidate', candidate => {
peerConnection.addIceCandidate(candidate);
});
【RTCPeerConnection】
ピア間の接続の開始や、保守や監視などをするメソッドを提供するAPI。
例．相手のメディアを受信した際の処理
peerConnection.addEventListener('track', event => {
console.log('[MASTER] Received remote track from client: ' + remoteClientId);
if (remoteView.srcObject) {
return;
}
remoteView.srcObject = event.streams[0];
});