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

このチュートリアルでは、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

ステップ 3. デモを実行

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

npm run dev

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

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

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