Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🎨 ビデオチャット: P2P方式からSFU方式(MediaSoup)へのマイグレーション #181

Merged
merged 1 commit into from
Nov 1, 2024

Conversation

yuminn-k
Copy link
Member

@yuminn-k yuminn-k commented Nov 1, 2024

🔍 このPRで解決したい問題は何ですか?

現在のP2P方式のビデオチャットシステムには以下の課題があります:

  • 参加者が増えるとクライアントの負荷が指数関数的に増加
  • 接続の安定性が参加者の通信環境に大きく依存
  • スケーラビリティに制限がある

これらの問題を解決するため、MediaSoupを利用したSFU方式へのマイグレーションを実施します。

✨ このPRで主に変わったことは何ですか?

  • アーキテクチャの変更
  • P2P方式からMediaSoupベースのSFU方式へ移行
  • Producer/Consumerパターンの実装による効率的なストリーム管理
  • コンポーネントの再構築
  • LiveClassコンポーネントの大規模なリファクタリング
  • 新規コンポーネントの追加:
    • ConnectionStatus: 接続状態の視覚的管理
    • ControlButtons: メディアコントロールの集約
    • VideoBox: ビデオストリームの統一的な表示管理
  • 通信処理の改善
  • WebSocketシグナリングの強化
  • 再接続ロジックの実装
  • エラーハンドリングの強化

🔖 主な変更点以外に追加で変更された部分はありますか?

  • TypeScriptの型定義の追加(MediaSoup関連)
  • メディアストリームのクリーンアップ処理の改善
  • アクセシビリティ対応の強化

🙏🏻 Reviewerに特に見ていただきたい部分はありますか?

  • MediaSoupの実装パターンが最適か
  • Producer/Consumer処理の実装方法
  • 再接続ロジックの妥当性
  • メモリリークの可能性がないか

🩺 このPRでテストや検証が必要な部分はありますか?

  • 複数参加者での動作確認
  • 画面共有機能の検証
  • ネットワーク切断時の再接続動作
  • メディアデバイスの切り替え動作
  • 長時間使用時のメモリ使用状況

📚 関連するIssueやJira、ドキュメント

🖥 作動する様子

スクリーンショットや録画したビデオ、またはgifを追加して、Reviewerが変更点を理解するのに役立ててください。

📌 PRを行う際の注意点

  • Reviewerはコードレビュー時に良いコードの方向性を示しますが、コード修正を強制することはありません。
  • Reviewerは良いコードを見つけた場合、賞賛と励ましを惜しみません。
  • レビューは特別なケースでない限り、Reviewerに指定された時点から3日以内に行ってください。
  • コメント作成時にPrefixにP1、P2、P3を書いていただくと、Assigneeがより明確にコメントに対して対応することができます。
    • P1 : 必ず反映してください (Request Changes) - 問題が発生したり、脆弱性が発見されたケースなど。
    • P2 : 反映を積極的に検討していただければと思います (コメント)。
    • P3 : こんな方法もあるんじゃないかな~などの些細な意見です (Chore)。

…iaSoup

- Replace P2P WebRTC implementation with MediaSoup-based SFU architecture
- Restructure LiveClass component for scalable video streaming:
  - Add ConnectionStatus for improved connection state management
  - Extract ControlButtons for better media control handling
  - Create VideoBox for unified video stream rendering
  - Implement MediaSoup producer/consumer pattern
- Enhance WebSocket signaling for SFU communication
- Add robust error handling and reconnection logic
- Improve stream management and cleanup

Technical Details:
- Switch from direct P2P connections to MediaSoup-based routing
- Implement proper stream producer/consumer lifecycle
- Add TypeScript interfaces for MediaSoup integration
- Update WebSocket protocol for SFU requirements

Dependencies:
- Add mediasoup-client
- Add @types/webrtc
@yuminn-k yuminn-k added ⚙ Setting 개발 환경 세팅 🔨 Refactor 코드 리팩토링 🌏 Deploy 배포 관련 ⏰ P1 반드시 해결해야 하는 중요한 이슈나 문제 (예: 버그, 취약점 등) 🆗 safe CI workflow 동작 관련 labels Nov 1, 2024
@yuminn-k yuminn-k self-assigned this Nov 1, 2024
Copy link
Contributor

@Regulus0811 Regulus0811 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

チェック

@yuminn-k yuminn-k merged commit 0ec22f2 into YJU-OKURA:main Nov 1, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌏 Deploy 배포 관련 ⏰ P1 반드시 해결해야 하는 중요한 이슈나 문제 (예: 버그, 취약점 등) 🔨 Refactor 코드 리팩토링 🆗 safe CI workflow 동작 관련 ⚙ Setting 개발 환경 세팅
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants