Amazon Kinesis Video StreamsでWebRTCを試してみる

以前から「Amazon Kinesis Video Streams(以降、kvs)」に興味があり、こちらを参考にサンプルアプリを動かしてWebRTCとはどんなものなのか、というのを試してみたら、以下のようなビデオ通話が簡単にできました。 （以下は同僚にサンプルアプリの動作確認に協力いただいた際の画像）

今回試したソースコードはこちらに置いておきました。なお、Reactを採用したり、SDKのバージョンをV3に更新したり等、少し手を加えていますがほとんどこちらのサンプルをそのまま動かしたものです。

目次

• 1.はじめに
• 2.今回の仕組みについて
• 3.やってみる
• 4.まとめ

1.はじめに

本エントリーでは「WebRTC」の仕組みを使って、低レイテンシーなP2Pの双方向メディアストリーミングをブラウザを介して実現するサンプルコードを紹介します。なお、AWSで動画を扱うサービスは色々あり、ユースケースに合わせて適切なサービスを選択する必要がある点に注意してください。今回のサンプルの範囲ではkvsが適切だと感じていますが、今後AWSを使って動画配信を検討する場合は以下エントリーが参考になるかもしれません。

参照: ユースケースに適したAWSビデオサービスの選択

2.今回の仕組みについて

今回の仕組みを把握するためには、「WebRTC」について知る必要があります。「WebRTC」ってなんだろう、と思って調べたのですが、とりあえずいつもお世話になっているBlackBeltの資料を見てみると以下のように説明されていました。

参照: 20200930 AWS Black Belt Online Seminar Amazon Kinesis Video Streams

「kvsでWebRTCを実現する際のフロー」についても説明されています。

参照: 20200930 AWS Black Belt Online Seminar Amazon Kinesis Video Streams

ここまででざっくり概念やフローについて触れられてきましたが、私はこれだけでは理解できなかったのですが、以下ページのおかげで理解が進みました。こちらを一読しておくとサンプルコードの理解も容易になるのでおすすめです。

• 初心者必見！よくわかるWebRTCの仕組み
• Kinesis Video Streams with WebRTC: How It Works

3.やってみる

説明はこのくらいにして、実際にアプリを動かしてどんなことができるのかを体験してみます。ソースコードはこちらのリポジトリに置いてあります。やることは以下の通りです。

AWSのクレデンシャルを記載

デバイスがkvsのシグナリングチャンネルにアクセスするために、AWSのクレデンシャルを指定します。 今回はベタ書きで実装していますが、実際にアプリケーションとして公開する際は異なる認証方法を採用してください。

この状態でアプリケーションを動かすと以下のような画面が表示されます。

$ yarn start

シグナリングチャンネルを作成

続いて、各デバイスがP2P接続するために利用するシグナリングチャンネルを作成します。 シグナリングチャンネル名は、ここでは適当に「mySignalingChannel」としました。

AWSのマネコンからもシグナリングチャンネルを作成できたことが確認できました。デバイスはこのシグナリングチャンネルを介して接続情報等を交換しP2P接続を実現することとなります。

以下はAWSマネコンから、シグナリングチャンネルのViewerとして確認した様子です。チャンネルを作成しただけでまだ誰も参加してないので、当然何も見えません。

Master、Viewerでビデオ通話開始

先ほど作成したシグナリングチャンネルにアクセスし、P2P接続してみます。 （今回は手元の端末で一人での検証ですが...）

Masterとしてシグナリングチャンネルへ接続します。

以下のようにローカルのカメラの映像がアプリ上で表示できました。これは単純にアプリの実装としてローカルカメラの映像を表示しているものです。

続いてAWSのマネコンからViewerとして参加すると、Masterの映像を確認することができました。

今回は一人でやったのでこのような検証方法でしたが、他の人と利用すると以下のようにリアルタイムでビデオ通話ができました。

4.まとめ

本エントリーを通して、「WebRTC」と少しだけ仲良くなることができました。その仕組み上、kvs側のリソースや設定項目は少ないことも納得です。

また、「WebRTC」はとても応用が効く技術だとも感じ、コードを読み解いて変更を加えるのも面白かったです。本エントリーがどなたかの参考になれば幸いです。

参照

• awslabs
• 今回試したリポジトリ
• AWS SDK for JavaScript v3
• ユースケースに適したAWSビデオサービスの選択
• よくある質問
• 初心者必見！よくわかるWebRTCの仕組み
• Kinesis Video Streams with WebRTC: How It Works
• mganeko/kvs_webrtc_example
• 20200930 AWS Black Belt Online Seminar Amazon Kinesis Video Streams