Zenn
ハッカー飯開発ブログPublicationへの投稿
📹

ユーザ同士でビデオ通話が出来る LiveKit を使ってハッカー飯にルーム機能を導入した話

西田宗太郎@ハッカー飯の人
2022/05/23に公開2件
AWS
Docker
JavaScript
WebRTC
#
livekit
tech

ハッカー飯とは

ハッカー飯はエンジニア同士が気軽につながるオンラインプラットフォームです。

ハッカー飯：https://hackermeshi.com

マッチング機能や食事会機能、コミュニティ機能等が存在し、気の合うユーザ同士で実際にご飯を食べにいったり、遊んだり、オンライン上で会話を行ったりすることが出来ます。

先日ハッカー飯ではルーム機能のリリースを行い、よりユーザ同士が繋がりやすくなりました。

この記事ではルーム機能導入の背景や、使用したツールについて簡単に紹介いたします。

ルーム機能とは？

ルームの作成を行うと通話用の URL が発行され、ユーザ同士でお話しすることが出来る機能です。

イメージとしては、Twitter Space + Google Meet をかけあわせたような機能となっております。

ルーム機能の使い方の流れ

①作成ボタンを押してルームの生成を行います

②入室ボタンを押すとルームに入れます

③実際にルームに入った画面です。画面共有機能やチャット機能も存在します。

ルーム機能導入の背景

ユーザーから下記のような声があがっていたためルーム機能の導入を行いました。

  • ビデオ通話用の外部サービス URL を発行するのがめんどくさい
  • あらかじめスケジュールを立てなくとも今時間が空いているエンジニア同士でお話ししたい
  • もっと気軽にコミュニケーションを取れるようになりたい

上記のような要望を実現するため、ハッカー飯ではオープンソースでビデオ通話機能を提供している LiveKit を使用しルーム機能を作成しました。

ビデオ通話機能を実現する LiveKit とは

LiveKit は WebRTC のインフラを構築できるオープンソースです。

LiveKit：https://livekit.io/

LiveKitの特徴

  • クロスプラットフォーム
    • JS、Flutter、React、Swift、Kotlin、Ruby、Goなど複数の異なる環境で動きます。
  • パフォーマンス
    • エンド・ツー・エンドで最適化を行いサイマルキャストとダイナミックビデオで帯域幅の使用を最小化します。
  • コネクティビティ
    • ネットワーク状況に左右されない堅牢な接続性 低帯域幅の状況にも自動的に適応できます。
  • デプロイメント
    • インスタンス上で簡単にデプロイすることができ、様々なクラウド上で実行することが出来ます。（AWS用のテンプレートも存在します）
  • 認証
    • JWTを使用した認証が使用されています。
  • オープンソース
    • Apacheライセンスのオープンソースです。

今すぐLiveKitを触ってみる

1. dockerのコマンドでKey、Secret、Tokenを生成する

docker run --rm -v$PWD:/output livekit/generate --local

実行後カレントディレクトリ上に　livekit.yaml が生成されます。また、ターミナル上に以下のような情報が出力されます。

Server URL:  ws://localhost:7880
API Key: <api-key>
API Secret: <api-secret>
Here's a test token generated with your keys: <token>

<token>　は後で必要になりますのでメモ帳等に控えておいてください。

2. dockerを起動する

1で生成した livekit.yaml　が存在するディレクトリ上で以下のコマンドを実行してください。

docker run --rm -p 7880:7880 \
    -p 7881:7881 \
    -p 7882:7882/udp \
    -v $PWD/livekit.yaml:/livekit.yaml \
    livekit/livekit-server \
    --config /livekit.yaml \
    --node-ip 127.0.0.1

3. 下記の URL　をクリックし1のコマンドで生成した <token> を貼り付ける

トークンを貼り付けた後、右下にある Connect を押すことでビデオ通話機能を試すことが出来ます。

https://example.livekit.io/

LiveKitを実際に組み込んでよかったこと

簡単にサービスを組み込むことができ、実装開始3日後くらいでクローズテストを行うことが出来ました。

また、オープンソースなのでインフラの利用料金だけを気にしていれば良いのもメリットのうちの1つだと思います。

ハッカー飯上で同時に10人くらい話してみましたが、特に問題なく会話することが出来ました。

LiveKitをつかう上での留意点

ビデオを7、8人がオンにして画面共有をオンにすると通話の品質が落ちることがありました。

原因はまだ分かっておりませんが、ハッカー飯ではルーム機能を Amazon EC2 の t2.micro 上にデプロイしているため、インスタンスタイプを変更することで解決できる可能性があると考えております。

実際にルーム機能を体験してみたい？

ハッカー飯登録後のトップページにルームを作成というボタンがあるので試してみてください！

https://hackermeshi.com/

最後に

もし需要があれば実際にAWSで構築した記事も書きます

ハッカー飯開発ブログ
ハッカー飯開発ブログPublication

Discussion