React.js & Tencent RTCを使用してWebのUIKitで5分でビデオ通話を作成
このチュートリアルでは、React.jsを使用して、5分以内にWeb上で音声およびビデオ通話のデモを素早く実装し、最終的に1対1の通話とグループ通話のビデオ通話機能を実装する方法を示します。また、ミュート、カメラのオン/オフ、画面の拡大/縮小など、完全なUIも含まれています。
デモの実際の動作を見たい場合は、このYouTube動画でステップバイステップのチュートリアルとともにコードの実行デモをご覧ください。
前提条件
- Node.js、Node.js環境がない場合は、ここをクリックしてダウンロードしてください。
- 最新のブラウザ、WebRTC APIをサポート。
- コードエディタ - 私はVSCodeを使うのが好きです。
- Trtc.ioの開発者アカウント。
ステップ1. デモのダウンロード
- ターミナルを開き、リポジトリをクローンするコマンドを入力します。
git clone https://github.com/Tencent-RTC/TUICallKit.git awk
!https://trtc.io/media/290d515a-5579-49e3-b474-6496bd223bc1.png
- 依存関係のインストール
cd ./TUICallKit/Web/basic-react awk
npm install cmake
!https://trtc.io/media/64f9ac3f-3edd-4cfb-9461-2f1ebf2214f2.png
ステップ2. デモの設定
- Tencent-RTCアプリケーションを有効にするには、Tencent RTCコンソールにログインし、アプリケーションの作成をクリックします。
- 作成ポップアップで、通話を選択し、アプリケーション名を入力して、データ保存地域を選択し、作成をクリックします。
- 有効になったら、アプリケーションの概要をクリックして、SDKAppIDとSDKSecretKeyを取得します。
- Web/basic-react/public/debug/GenerateTestUserSig-es.jsで、SDKAPPIDとSDKSecretKeyを入力します。
!https://trtc.io/media/12980ca6-b2ef-48a4-980a-89624b139c3e.png
ステップ3. デモの実行
- ターミナルでコマンドを入力してデモを実行します。
# TUICallKit/Web/basic-react npm run dev jsx
!https://trtc.io/media/382754d0-c189-4357-87ea-5648122f1f01.png
注意:
ローカル環境の場合は、localhostプロトコルでアクセスしてください。詳細については、ネットワークアクセスプロトコルの説明を参照してください。
!https://trtc.io/media/825a55e7-ee29-4efd-a0c6-15ecbc0f5fd0.png
- 2つのブラウザページを開き、同じURLを入力して、2つの異なるuserIDでログインします。 (これはreactデモの効果です)
- 両方のuserIDが正常にログインした後、もう一方のページのuserIDを入力し、通話リストに追加ボタンをクリックします。
最初の通話を行う
通話ボタンをクリックして、最初の通話を体験してください。
グループ通話を行う
次に、3番目のWebページを開き、任意のUserIDを入力します。 「ログイン」をクリックします。両方に電話をかけてグループ通話を行うことができます。
!https://trtc.io/media/12008674-d903-4f65-b635-fbae350f6be8.png
最後に
これでおしまいです！
このプロジェクトの完全なソースコードは、GitHubで入手できます。
その他のリソース
- Tencent RTCドキュメントを深く掘り下げて、Tencent RTC SDKが提供する機能と能力についてより深く理解してください。APIリファレンス、サンプルコード、ベストプラクティスを探索してください。
- 公式アカウントX(Twitter)またはLinkedInをフォローして、最新の開発情報を入手してください。
- サポートが必要ですか？ TelegramまたはDiscordで実装に関するアドバイスを求めてください。