videosdk rtc react sdk example下載 - videosdk rtc react sdk example原始碼下載

videosdk rtc react sdk example

Ai源碼

1.0.0

下載

React JS 影片 SDK

在 Video SDK，我們正在建立工具來幫助公司創建世界一流的協作產品，這些產品具有即時音訊/視訊、雲端錄製、RTMP/HLS 串流媒體和互動 API 的功能。

？每月免費獲得 10,000 分鐘！現在就試試吧！

⚡️從克隆到啟動 - 5 分鐘內開始使用範例！

演示應用程式

很想看看它的實際效果嗎？在這裡查看我們的現場演示。

⚡ 快速設定

註冊 VideoSDK 以取得您的 API 金鑰和秘密。
熟悉 Token

？先決條件

React v16 或更高版本
節點v10 或更高版本
有效的影片 SDK 帳戶

？運行範例應用程式

請按照以下步驟啟動並執行範例應用程式：

第 1 步：克隆儲存庫

git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.git

第2步：設定環境變數

打開您最喜歡的程式碼編輯器並複製範例環境檔案：

cp .env.example .env

步驟 3：設定您的`.env`文件

從您的視訊 SDK 帳戶產生臨時令牌並更新.env檔案：

 REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "

第 4 步：安裝依賴項

安裝必要的軟體包：

npm install

第 5 步：啟動應用程式

賓果，是時候按下啟動按鈕了。

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 ：

您可以使用臨時令牌進行開發。若要建立臨時令牌，請前往 VideoSDK 的儀表板。

Production Environment ：

您必須設定身份驗證伺服器來授權使用者進行生產。要設定身份驗證伺服器，請查看我們的官方範例儲存庫。 videosdk-rtc-api-伺服器-範例

？項目概況

1. 在加入畫面上進行預呼叫設定

Components/DropDown.js ：一個下拉元件，用於選擇音訊輸入裝置（麥克風）、透過 Web Audio API 監控音訊以及管理麥克風設定。
Components/DropDownCam.js ：用於選擇相機設備和管理相機權限的下拉元件。
Components/DropDownSpeaker.js ：允許使用者選擇揚聲器，使用範例聲音對其進行測試，並追蹤播放進度以進行確認。
Components/NetworkStats.js ：顯示即時網路統計訊息，例如上傳和下載速度。

2. 建立或加入會議

components/screens/JoiningScreen.js ：提供使用者建立或加入會議、管理網路攝影機和麥克風狀態、選擇裝置（麥克風、攝影機、揚聲器）、檢查權限、預覽影片和監控網路統計資料的選項，以確保在會議之前進行正確的設定進入會議。
api.js ：包含用於建立和驗證會議的所有 API 呼叫。
components/MeetingDetailsScreen.js ：顯示用於建立或加入會議的選項。

3. 等待畫面

components/screens/WaitingToJoin.js ：在等待加入會議時顯示帶有訊息的 Lottie 動畫。此畫面會一直顯示，直到isMeetingJoined標誌為 true，該標誌是從使用來自@videosdk.live/react-sdk的useMeeting()初始化的meeting接收到的。

4. 與會者視圖

components/ParticipantView.js ：顯示單一參與者的視頻，並在角落顯示參與者的姓名。
components/ParticipantGrid.js ：顯示主畫面上顯示的參與者網格。
meeting/components/ParticipantView.js ：管理參與者網格中將顯示多少參與者。

5. 會議底欄

meeting/components/BottomBar.js
包含螢幕底部顯示的按鈕：
- 顯示會議 ID，左側有複製圖示按鈕。
- 在中間顯示錄製指示器、舉手按鈕、麥克風按鈕（帶有可用麥克風列表）、網路攝影機按鈕（帶有可用網路攝影機清單）、螢幕共享按鈕和離開會議按鈕。
- 最右角包含聊天按鈕和參與者計數按鈕。
- 在手機、平板電腦或更小的螢幕上，底部欄會重新排序以顯示離開按鈕、錄音按鈕、麥克風/網路攝影機按鈕和more actions按鈕。 more actions按鈕可開啟包含剩餘選項的抽屜。