traQの通話サービスをアップデートしました!! [2024冬ハッカソン19班]

みなさんこんにちは! 2024冬ハッカソン19班のkaitoyamaです!
書かなければと先送りにしていたら、もうすぐ次の部内ハッカソンが始まるということで、慌てて執筆しています。

今回私たちは、冬ハッカソンにおいて、部内SNSであるtraQに搭載されている、Qallという通話サービスを根本から作り変える大規模アップデートをしました。

みなさん普段はどんな通話サービスを使っていますでしょうか? traPではDiscordを使用していることが多く、班の集会などもDiscord上で行われています。

妙ですね、普段からtraPのメンバーが使っているはずのtraQにQallという通話サービスがあるのに、どうして、Discordがよく使われているのでしょう。実はその原因にはQallの不便な点がありました。

アップデート前のQallは、

カメラなし
画面共有なし
音質微妙
サウンドボードなし

という感じで、好んでQallを使う理由は特にありませんでした。

さらに、内部で使用していたSkywayという外部サービスのSDKがメジャーバージョンアップしたため、それの対応が求められていました。

そこで、今回、当時traQの開発をしていたメンバーを中心に、Qallを根本から作り変えるアップデートをすることになりました。

開発の流れ

事前の調査で、livekitというOSSを使用するのが良さそうだということがわかっていたため、事前にある程度ドキュメントを読み、準備期間に通話だけの簡単なwebアプリを使って基本的な触り心地を試していました。そして、開発期間が始まると同時に、VPSでセルフホストをして、開発を進めました。

開発の試行錯誤をtraQ本体のコードに影響させないため、Qall周りのバックエンドを別のマイクロサービスに切り出した上で、開発を進めました。フロントエンドは元々PRを立てると開発環境が起動する仕組みがあるので、それを活用して開発しました。

バックエンドの基本的な整備はlivekitのドキュメントが充実していたので、2日程度で実装できました。一方のフロントエンドは、既存のコードとlivekitのSDKの繋ぎこみの範囲がとても広く、最終日ギリギリまで開発が続きました。

完成したもの

なんとかギリギリまで開発して、無事リリースすることができました！(いろんなところに細かいバグはあるものの、短期間の集中開発で動くものが作れました。)

複数の画面の同時共有やビデオ通話の背景ぼかし、ノイズキャンセリングやサウンドボード機能などできれば入れたいなと話していた機能も結構入れることができたことも含めて満足の行く出来だったかなと思います。

今後は少しずつ改善しながら、いずれDiscordから全部Qallに引っ越しができる未来を期待しています！

感想

kaitoyama

やろうぜと言い出したはいいものの、やってみたら色々大変だったというタイプのものでした。しかし、livekitは簡単にセルフホストできる上、音声や映像の品質についてもよしなに処理をしてくれたので、思ったよりもだいぶ簡単でした。今後は折りを見て、ウェビナー機能や、配信の受付なども組み込めるようにできればと思っています。

pikachu0310

サーバーと発表を担当しました。音声･画面共有周りの配信を livekit がやってくれるので、traQ と livekit を結びつけるサーバーを書いて橋渡しするだけで画面共有が実現できて凄っ！となりました。となりました。ハッカソンの際に作成した橋渡しするマイクロサービスのコードは、現状は traQ 内部に統合され、既に本番環境で運用されています。今回のような、独自ドメインと優秀なOSSツールを結びつけて面白い物を実現する試みが大好きなので、とても楽しい開発でした！ありがとう～！

masky

先輩にお声がけいただけて開発に参加させていただきました。正直あんまり役立てた感はないのですが、今までの開発であまり触ってこなかったタイプの技術に触れられたこと、今まで開発でご一緒することのなかった先輩方に色々と教われたことは大変ありがたい経験でした。これで僕も晴れてtraQ Contributerです。

ramdos

普段はバックエンドばかりやっているのですがこの機会にフロントエンドの門をくぐりました。デザイン設計書通りに実装するのが面倒くさくなって仮で適当に実装した箇所があったのですが、そのあと直す時間が取れず仮実装のままリリースされてしまいました。ぱっと見それっぽいので多分まだバレていないはずです。

tidus

主にUIデザインを担当しました。フロントの方々に実装していただいて実際に動いてるのを見たときはかなり感動でした。一方で、自分が想定していた挙動と実際にフロントに実装された挙動が違ったりして、フロント側への伝達が甘かったなと反省しています。数日で作ったUIで少し雑な点も多いので、そのあたりを今後改善していきたいと思っています。

noc7t

フロントエンドのリーダー的立場で参加しました。優秀な後輩たちが画面を作る部分を実装してくれました。なので、私は基本的にLiveKitサーバーとの通信や通話に関する状態の管理、画像や音声の処理など裏方の部分を担当していました。

実装に関する部分でいうと、LiveKitには低いレイヤーが隠蔽されたかなり使い勝手の良いSDKがあり、最初はそれを使用していました。ですが複数個の画面共有が出来ない、ノイキャンや画面ぼかしなどの処理を間に挟めないなどの問題があり、最終的には結構な部分をより低いレイヤーのAPIを使った処理に書き換えました。
結果的に実装が思ってた以上に大変で複雑なものになってしまいましたが、その分ブラウザでのメディアの処理方法やLiveKitの仕組みについての理解を深めることができました。

自分たちでも完成したときにはかなり手応えのある作品だったのですが、ありがたいことに、ハッカソンの最優秀賞をいただくこともできました。ハッカソンで最優秀賞を取るというのは私がtraPにいるうちにどこかで達成しておきたいなと思っていたので、めちゃくちゃ嬉しかったです。一緒に開発をやってくれたメンバーと投票してくれた部員のみなさん、そしてこの場を提供してくれたハッカソン運営のみなさんには改めて感謝を述べさせていただきます。ありがとうございました。

今後のことですが実装上のバグ、PWA上で動かしている故の機能の制限などの問題は残っているので時間があるときに解決策を考えていけたらなと考えています。