FlutterでWebRTC（flutter-webrtc-demoを動かす）

経緯

業務で初Flutter＋初WebRTCということでまずは調査開始。 flutter-webrtcというOSSを利用しようと思い、github眺めていたらdemo版も用意されていたので動かしてみようと思い立ったのが経緯となる。

WebRTCってなに

WebRTCって聞いた事ない・・・。って状態だったのでそこから調査すると、 「Web Real-Time Communication」の略称とのこと。 APIを経由して、ウェブブラウザやモバイルアプリでリアルタイム通信を実現する技術だそうです。 細かい説明は省略しますが、結局、ワードを知らないだけでエンジニアには馴染み深いものでした。 Teams、Zoomとかの裏側で動いてるテレビ通話を可能にしてくれるものって感じ（適当）

これに加え、WebRTC SFUというものも存在します。
WebRTC SFU (Selective Forwarding Unit ) はP2Pでの通信とは異なり、音声や映像を「サーバー経由」で配信する技術の一つ。

結局、上記２つの何が違うんだよって感じ。
簡単にいうと、WebRTC（P2P）とWebRTC SFU（SFU）との違いは、データ通信を行っているのがサーバー経由(SFU)か直接端末同士(P2P)なのかってことだそうです。
なので、SFUであれば受信側の人数が増えても配信者自身の回線や端末に高い負荷がかかることはなく、一度に多くの視聴者へ音声や映像をリアルタイムに配信することができるメリットがある。

【本題】flutter-webrtc-demoが動くまで

環境

Mac(intel)

言語

flutter

エディタ

VSCode

使用OSS

flutter-webrtc（demo,server）

環境構築

Flutterの環境構築は既に終わっている前提とします。 終わっていない方は以下を参照し、構築してください（Windowsの方は他の方のサイトを参照ください）。

OSSのソースをクローン（flutter-webrtc-demo、flutter-webrtc-server両方）

クローンの仕方がわからない方は以下を参照。

flutter-webrtc-server

ターミナルを開いてコマンドの実施

<path>の箇所は適宜合わせてください

cd <path> flutter-webrtc-server
brew update
brew install mkcert
mkcert -key-file configs/certs/key.pem -cert-file configs/certs/cert.pem  localhost 127.0.0.1 ::1 0.0.0.0
brew install golang
go run cmd/server/main.go

上記、実施後エラーなく実行完了したら、準備完了

flutter-webrtc-demo

ターミナルを開いてコマンドの実施

<path>の箇所は適宜合わせてください

cd <path> flutter-webrtc-demo
flutter packages get
flutter run

上記で、アプリが起動。

動作確認

ブラウザから以下にアクセス。

アクセス後、「P2PCall Sample」を押下して「localhost」と入力後、「CONNECT」押下

次に「demo」の方に戻り、「P2PCall Sample」を押下して「localhost」と入力後、「CONNECT」押下

赤枠のビデオマークを押下

通話できた！