背景
昨今、リモートワークが多い中、〇oomとかGoo〇le meet、M〇irosoft T〇amsなどはどうやって動いているんだろうということで
動画配信について調べているところ、WebRTCに行きついて楽しそうだなということで触ってみました。
その際に詰まったことなども書きます。
WebRTCについても知識が乏しかったので以下の記事を参考にさせていただきました。ありがとうございます！
- https://qiita.com/mush/items/121e45fefed009b6ad5e
- https://qiita.com/massie_g/items/b6d3513d06a28ba89677
また以下の記事を参考にさせていただきました。ありがとうございます！
https://dev.classmethod.jp/articles/update-kinesis-video-streams-supports-webrtc/
https://dev.classmethod.jp/articles/update-kinesis-video-streams-supports-webrtc/
内容
WebRTCとは？
Webブラウザーなどを介して高速なデータ通信を実現する規格のこと。
・特に映像や音声などの容量が大きいデータをリアルタイムに送受信できること
・P2P（ピアツーピア）の仕組みを持っていること
※P2P：数の端末間で通信を行う際のアーキテクチャのひとつで、対等の者（Peer、ピア）同士が通信をすることを特徴とする通信方式、通信モデル、あるいは通信技術の一分野を指す。
（参考：https://ja.wikipedia.org/wiki/Peer_to_Peer）
上記二つの特徴から、ビデオチャットやWeb会議などに応用されています。
（参考：https://it-trend.jp/words/webrtc）
以下、参考：https://qiita.com/mush/items/121e45fefed009b6ad5e より
- ①カメラ・マイクといったデバイスへアクセス
- ②仲介を必要とせずに(実際には完全なサーバーレスとは言い難い)ブラウザ・モバイル間でデータの交換
- ③キャプチャしたオーディオ／ビデオストリームの送受信
をブラウザ環境で可能とするAPIです。
また
P2P通信とその暗号化(事前に暗号鍵の交換)、UDP/IPの使用(確実性よりリアルタイム性)が特徴。
P2P通信を行うには、宛先のIPアドレスとUDPポート番号を知る必要があります。
WebRTCで利用されるP2P接続における代表的なプロトコルについて詳しくご理解されたい場合には、上記の参考を参照ください。
AWSでWebRTCを実現
嬉しさは？
WebRTC使用をしたアプリケーションを実現しようとすると、
- シグナリング（通信を開始するための情報交換）を行うシグナリングサーバ
- ICE（通信経路を確立するためのプロトコル）で使用される STUN サーバや TURN サーバ
上記の用意が必要となり、労力がかかっていた。
それを、Kinesis Video Streamsに含まれるWebRTCを使用することによりかなり用意に開発しやすくなっているそう。
（参考：https://dev.classmethod.jp/articles/update-kinesis-video-streams-supports-webrtc/）
実験
概要
「AWSコンソールでの実行内容」と「ローカル環境でのWebRTCアプリケーションセットアップ」
を行います。
[AWSコンソールでの実行内容]
1. AWSコンソール画面より、「Kinesis Video Streams」を検索し、「Kinesis Video Streams」画面から「シグナリングチャンネル」を選択
2. 「新しいシグナリングチャンネルを作成」画面で、「チェンネル名」を入力（任意の値）して「シグナリングチャンネルを作成」ボタンを押下（TTLやタグは各々設定、しなくても問題ありません）
3. シグナリングチャンネル情報より、作成したシグナリングチャンネル情報を閲覧可能
[ローカル環境でのWebRTCアプリケーションセットアップ]
※事前にnpmコマンドを実行できるようにしておく必要がありますので、
「npm インストール」などと検索して導入してください。（gitコマンドも同様ですね）
1. Amazon Kinesis Video Streams WebRTC SDK for JavaScript より、リポジトリをクローン
$ git clone https://github.com/awslabs/amazon-kinesis-video-streams-webrtc-sdk-js.git
2. SDKのインストール等
$ npm install amazon-kinesis-video-streams-webrtc
$ npm install
3. git clone後、「amazon-kinesis-video-streams-webrtc-sdk-js\examples」に移動
$ cd /git cloneした場所/amazon-kinesis-video-streams-webrtc-sdk-js/examples
4. Web サーバ起動
$ npm run develop
5. 起動後「ブラウザで localhost:3001」にアクセスし、実行
1. Regionを「ap-northeast-1」（それぞれのリージョンに合わせてください）
2. 「AWS Key ID」と「Secret Access Key」をIAMユーザの認証情報（アクセスキー）より取得
※「https://qiita.com/miwato/items/291c7a8c557908de5833」などを見るとわかります。
3. Channel Nameを任意に設定
4. 最後に「Start Master」を実行（ここでローカルで映像を視聴することが可能に）
5. AWSのKinesis Video Streamsで作成したシグナルチャンネル内部の「メディア再生ビューワー」を押下する（AWSを通して映像を視聴することが可能）
詳細
大体上記の内容でクリアすることができると思いますが、
概要の「Web サーバ起動」部分で
npm関連の影響で自分はWebサーバが立ち上がってきてくれませんでした。
node_modulesが終わったのか？とおもってrmして再度installしたりいろいろ実行しましたが、以下の手順で戻りました。
1. webpack-dev-serverがなかったのでインストール
※それぞれのプロジェクトによってパッケージ管理方法が決められていると思いますので適切に行ってください。
$ npm install webpack-dev-server -g
（参考：https://qiita.com/bumptakayuki/items/01c3ebeb928a127e7af9）
2. 「Cannot find module 'webpack'」いわれたのでlinkさせる
$ npm link webpack
（参考：https://stackoverflow.com/questions/29492240/error-cannot-find-module-webpack）
その後、「npm run develop」を実行するとローカルで立ち上がりました。