Zenn
📲

ウェブ上でビデオ通話アプリを構築する | React

2025/01/02に公開
GitHub
React
WebRTC
tech

このチュートリアルでは、React.jsを使用して、5分以内にウェブ上でオーディオおよびビデオ通話のデモを迅速に実装する方法を示します。最終的には1対1の通話とグループ通話のビデオ通話機能を実装し、ミュート、カメラのオンオフ、画面のズームインおよびズームアウトなどの完全なUIも含まれています。

  • Node.js バージョン 16以上
  • WebRTC APIをサポートするモダンブラウザ

ステップ 1. デモをダウンロード

  1. ターミナルを開き、リポジトリをクローンするコマンドを入力します。
git clone https://github.com/Tencent-RTC/TUICallKit.git
  1. 依存関係をインストールします。
cd ./TUICallKit/Web/basic-react

npm install

ステップ 2. デモを設定

Developer Consoleにログインし、SDKAppIDとSDKSecretKeyを取得して、GenerateTestUserSig-es.jsファイルに入力します。

ファイルパス: TUICallKit/Web/basic-react/src/debug/GenerateTestUserSig-es.js

image.png

ステップ 3. デモを実行

  1. ターミナルでコマンドを入力してデモを実行します。
npm run dev

  1. 2つのブラウザページを開き、同じURLに入力し、異なるuserIDでログインします。

  2. 両方のuserIDが正常にログインしたら、もう一方のページのuserIDを入力し、「Add to call list」ボタンをクリックします。「Call」ボタンをクリックして、最初の通話を体験します。

image.png

これで完了です！このプロジェクトの完全なソースコードはGitHubで入手できます。

Discussion