videosdk rtc react sdk example
1.0.0
Video SDK では、ライブ オーディオ/ビデオ、クラウド録画、RTMP/HLS ストリーミング、インタラクション API の機能を備えた世界クラスのコラボレーション製品を企業が作成できるように支援するツールを構築しています。
実際の動作を見てみたいですか?ここでライブデモをチェックしてください。
サンプル アプリを起動して実行するには、次の手順に従います。
git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.gitお気に入りのコード エディターを開き、サンプル環境ファイルをコピーします。
cp .env.example .env.envファイルを構成するVideo SDK アカウントから一時トークンを生成し、 .envファイルを更新します。
REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "必要なパッケージをインストールします。
npm installビンゴ、発射ボタンを押す時が来ました。
npm run start強力な機能スイートのロックを解除して会議を強化します。
| 特徴 | ドキュメント | 説明 |
|---|---|---|
| ?プリコールセットアップ | プリコールのセットアップ | 会議に参加する前に、オーディオ、ビデオ デバイス、その他の設定を構成します。 |
| ⏳待機ロビー | 待機ロビー | 参加者が会議に参加する前に待機する仮想スペース。 |
| ?ミーティングに参加する | ミーティングに参加する | 参加者が会議に参加できるようにします。 |
| ?会議から退席する | 会議から退席する | 参加者が会議から退席できるようにします。 |
| ?マイクの切り替え | マイクコントロール | 会議中にマイクのオンとオフを切り替えます。 |
| ?カメラの切り替え | カメラ制御 | 会議中にビデオカメラの電源をオンまたはオフにします。 |
| 画面共有 | 画面共有 | 通話中に他の参加者と画面を共有します。 |
| ?画像キャプチャ | イメージキャプチャー | ビデオ ストリームから他の参加者の画像をキャプチャします。ビデオ KYC や本人確認のシナリオに特に役立ちます。 |
| ?入力デバイスの変更 | 入力デバイスの切り替え | さまざまなオーディオおよびビデオ入力デバイスを切り替えます。 |
| ?オーディオ出力の変更 | オーディオ出力の切り替え | 会議中の音声の出力デバイスを選択します。 |
| トラックの最適化 | トラックの最適化 | メディア トラックの品質とパフォーマンスを強化します。 |
| チャット | 会議中のチャット | パブリッシュ/サブスクライブ メカニズムを通じて参加者とメッセージを交換します。 |
| ホワイトボード | ホワイトボード | 共有ホワイトボードに描画したり注釈を付けたりすることで、視覚的に共同作業できます。 |
| ?ファイル共有 | ファイル共有 | 会議中に参加者とファイルを共有します。 |
| ?録音 | 録音 | 今後の参考のために会議を記録します。 |
| ? RTMP ライブストリーム | RTMP ライブストリーム | 会議を YouTube や Facebook などのプラットフォームにライブでストリーミングします。 |
| リアルタイム文字起こし | リアルタイム文字起こし | 会議のリアルタイムの文字起こしを生成します。 |
| ?リモートメディアの切り替え | リモートメディアコントロール | リモート参加者のマイクまたはカメラを制御します。 |
| すべての参加者をミュートする | すべてミュート | 通話中にすべての参加者を同時にミュートします。 |
| ⁉️参加者を削除する | 参加者の削除 | 参加者を会議から退席させます。 |
SDK のコアコンポーネントを理解します。
Meeting - ミーティングは、リアルタイムの音声およびビデオ通信を表します。
Note: Don't confuse the terms Room and Meeting; both mean the same thing ?
Sessions - 特定の会議に費やす特定の期間はセッションと呼ばれます。特定の会議 ID で複数のセッションを持つことができます。
Participant - 参加者とは、会議セッションに参加するすべての人を指します。 local participant自分自身 (You) を表し、他のすべての参加者はremote participantsとみなされます。
Stream - ストリームとは、 local participantまたはremote participantsによって公開されるビデオまたはオーディオ メディア コンテンツを指します。
トークンは、API を使用して会議を作成および検証し、会議を初期化するためにも使用されます。
Development Environment ：
Production Environment ：
コンポーネント/DropDown.js : オーディオ入力デバイス (マイク) の選択、Web Audio API 経由でのオーディオのモニタリング、およびマイク設定の管理のためのドロップダウン コンポーネント。
コンポーネント/DropDownCam.js : カメラ デバイスを選択し、カメラの権限を管理するためのドロップダウン コンポーネント。
コンポーネント/DropDownSpeaker.js : ユーザーがスピーカーを選択し、サンプルサウンドでテストし、確認のために再生の進行状況を追跡できるようにします。
コンポーネント/NetworkStats.js : アップロード速度やダウンロード速度などのリアルタイムのネットワーク統計を表示します。
components/screens/JoiningScreen.js : 会議の作成または参加、Web カメラとマイクのステータスの管理、デバイス (マイク、カメラ、スピーカー) の選択、権限の確認、ビデオのプレビュー、事前に適切なセットアップを確認するためのネットワーク統計の監視を行うオプションをユーザーに提供します。会議に入る。
api.js : 会議の作成と検証のためのすべての API 呼び出しが含まれます。
components/MeetingDetailsScreen.js : 会議を作成または参加するためのオプションを表示します。
components/screens/WaitingToJoin.js : ミーティングへの参加を待っている間にメッセージ付きの Lottie アニメーションを表示します。この画面は@videosdk.live/react-sdkからuseMeeting()を使用して初期化されたmeetingから受信したisMeetingJoinedフラグが true になるまで表示されます。 
components/ParticipantView.js : 単一の参加者のビデオを、参加者の名前のコーナー表示とともに表示します。
components/ParticipantGrid.js : メイン画面に表示される参加者のグリッドを表示します。
meeting/components/ParticipantView.js : 参加者グリッドに表示される参加者の数を管理します。
meeting/components/BottomBar.jsmore actionsボタンが表示されます。 more actionsボタンをクリックすると、残りのオプションを含むドロワーが開きます。 
components/PresenterView.js : 参加者が画面を共有するときにビューを表示します。 
sidebar/ChatPanel.js : チャット入力フィールドとチャット メッセージのリストを備えたチャット サイド パネルが含まれています。 
sidebar/ParticipantPanel.js : 会議に出席している参加者のリストを表示します。 
components/screens/LeaveScreen.js : 参加者がミーティングから退出するときに退出画面を表示します。 
ドキュメントを参照してさらに詳しく調べて構築を開始してください
