【Flutter】Supabase × WebRTCでビデオ通話

FlutterとSupabase(セルフホスト)でアプリ開発をしている時に、ビデオ通話機能をWebRTCを用いて実装したいな～と思って色々調べたのですが、どうやらSupabaseでWebRTCを実装している例がないようなので、記事でまとめようと思いました。

WebRTCとは？

WebRTCとは、「Web Real-Time Communication」の略称で、リアルタイムにAPIを経由して音声やビデオ、データの通信を確立する技術のことを言います。
この記事ではSupabaseでWebRTC通信を実現することにフォーカスしているので、WebRTCについて詳しいことを知りたい人は【Flutter✖️WebRTC】WebRTCについて学んだことのまとめを参照してください。

SupabaseでWebRTCを使う上での問題

【Flutter✖️WebRTC】WebRTCについて学んだことのまとめにあるように、WebRTCを使用するためには、最初にP2P通信を確立するためのシグナリングサーバーを構築する必要があります。
これでは、せっかくSupabaseはバックエンド1つで完結するのが良いところのはずが、複数のサーバー(Docker)立ち上げ・管理が必要になってしまいます。

そこで、なんとかSupabaseにシグナリングサーバを統合できないか、いろいろ試行錯誤してみました。

検討した方法①: Edge Functionsでサーバーレス化(結果、ダメでした)

Supabaseには、AWSでいうLambdaにあたる、Edge Functionsという機能があります。
(Edge Functionに関する詳しい内容は公式ドキュメントを参照)

このEdge Functionを使ってシグナリングサーバをサーバレス化できないかと思い調べてみたのですが、結果ダメそうでした。(頑張ればできるのかも?)

[Supabase Edge Functions] Can't use Websockets in Edge Functions on Supabase Hosting.

上記のissueでもあがっていますが、現在SupabaseのEdge FunctionsにおいてはWebsocketがサポートされておらず、シグナリングサーバはWebsocketが必須のため構築ができなそうです...

検討した方法②: Realtime DBで代替する (こちらを採用しました)

Supabase Edge FunctionsでWebsocketが利用できないのなら、すでにWebsocketを利用しているSupabaseのRealtime Databaseを利用できないかと思いやってみました。
(結果、うまくいきました)

英語のネット記事を見ても同じことをやっている人はいなそうなので、情報共有のためにこの記事を書いています。

実行環境

バックエンド

• Supabase v0.24.03
• Docker 26.0.1

フロントエンド

• Flutter 3.19.5

手順

バックエンド(Supabase)

Supabaseの管理画面にアクセスして、以下のテーブルを作成してください。

usersテーブル

• idのTypeはuuidを選択して、自動で付番されるようにしておく
• 今回はデモなのでRLSは無効化しているが、実際に運用するときは有効化することをお勧めします
  

callsテーブル

• Enable Realtimeにチェックを入れる
• caller_id, callee_idはusers.idが入るので、Typeをuuidにしておく!
• こちらも同様にRLSを無効化しています
  

バックエンド側の準備は以上です。

フロントエンド(Flutter)

minnya/sample-supabase-webrtcのREADMEを参照してください。

おわりに

なんとかWebRTCのシグナリングサーバをSupabaseに統合することができました。これで今まで別のDockerコンテナでシグナリングサーバを立てていたのが、かなりシンプルになりましたね～。

次は、通常のシグナリングサーバと今回Supabaseで構築したWebRTCの仕組みの違いについて、アーキテクチャの観点から説明したいと思います。
(記事を書く余力があれば...)

本記事を読んでくださった皆様、お付き合いいただきありがとうございました！