ティラノカップ

3TapLive

https://github.com/claustra01/hackz-tyranno

Rust

GraphQL

Flutter

3タップで配信開始できるライブコメント付き動画生配信スマホアプリ

claustra01

推しアイデア

通常同時に採用することはほとんどない,FlutterとRustという組み合わせをあえて採用したこと. 個人参加かつ全体的に実装が重たいことは目に見えていたので,作るのは根幹機能のみに絞り,最小の操作で簡単に配信を開始・視聴ができるというコンセプトをこじつけた.

作った背景

GraphQLやFlutterなどの触ったことない技術を使ってみたかった. 動画配信アプリというコンセプトは以前のハッカソンのプロダクトの書き直しリベンジを兼ねている. その時よりも低遅延かつ高い完成度を目標にした.(達成)

推し技術

とにかくRust. Rustはコンパイラが厳密にコードをチェックしてくれるため,一度ビルドが通れば意図しないエラーが発生することは少ない. 実際,開発中にGraphQLで正しくないクエリを書いてしまうことが多かったが,サーバーは一度もパニックやエラーを起こしていない.

プロジェクト詳細

開発方針

最低限の機能とUIを優先し,多機能よりも完成度にこだわる クライアントの「見えないエラー」を減らす

技術構成図

image

実装した機能

  • 全体 クライアントとサーバーの通信には全てGraphQLを使用.
  • 動画配信 Agora.ioというRTCエンジンを提供するSDKを使用. 配信開始時にチャンネルIDとトークンを発行し,その情報をDBに保存して複数チャンネルを管理している. トークンの発行はGraphQLサーバーとは別のサーバーで行っている. チャンネルIDとトークンは配信終了時に削除される. image
  • 動画視聴 配信と同様にAgora.ioを使用. DBに保存されたチャンネルIDとトークンを取得して配信に接続している. それぞれの配信に対して複数のユーザーが視聴可能.(一対多)
  • カメラ切り替え 配信する映像のカメラを切り替えることができる. Enum型を用いて独自実装しており,少しの修正で外部映像等も使用可能に.
  • ライブコメント GraphQLのSubscriptionを用いてリアルタイムで取得を行っている. FlutterでGraphQLのSubscriptionを購読できるライブラリが見つからなかったため,WebSocketを用いた独自実装となっている. image
  • ユーザー認証 Firebase AuthのGoogleプロバイダを使用. ユーザーのアイコンや表示名を取得している.(表示名はアプリ内でも変更可能)

claustra01

@claustra01