“如果你想在最技術(shù)層面上探索React原生視頻聊天軟件APP，或者可以說深入……我有一些很棒的東西給你！”

現(xiàn)代技術(shù)的核心是在世界各地建立聯(lián)系。這次 COVID-19 大流行讓他們舉起了手，并將各種行業(yè)卷入了其被認為的邊界，他們必須依靠現(xiàn)代技術(shù)來保持聯(lián)系。

是的！如今，視頻通話已被證明是最好的，無論是會議生產(chǎn)力技巧還是跨可能性的協(xié)作，它都被認為是有史以來最好的實踐。

盡管如此，我之前已經(jīng)在許多 SDK 上使用其預開發(fā)的通信功能制作了內(nèi)容。但是，這篇文章的主要目的是為您提供最好的金錢和時間，當然，當您計劃開發(fā)安全視頻會議軟件APP時，尤其是使用強大的 React Native SDK 技術(shù)時。那么，讓我們深入了解更多吧！ 

使用 MirrorFly SDK 開發(fā) React Native 視頻聊天軟件APP

將視頻通話功能添加到您的平臺的最簡單、最快的方法是集成視頻通話 SDK，只需 20 分鐘即可完成。 

注意：
還沒有軟件APP，您可以在此處開始使用我們的示例軟件APP。

基本要求

使用 MirrorFly React Native SDK 并安裝下面提到的依賴項來開始開發(fā)您的視頻通話軟件APP。 

• 節(jié)點 – 14.20.0

• npm – 2010 年 6 月 14 日

• 反應本機 – 0.69.12

入門

要開始開發(fā)，您首先需要一個許可證密鑰來驗證軟件APP上的 SDK。為此，請按照下列步驟操作：

要獲取許可證密鑰，

第 1 步：聯(lián)系我們的專家 

第 2 步：設置您的 MirrorFly 帳戶

第 3 步：登錄您的帳戶

第 4 步：轉(zhuǎn)到您帳戶中的軟件APP信息部分 

第 5 步：獲取許可證密鑰

使用NPM包進行安裝

步驟 1：使用 NPM 安裝將 React Native SDK 安裝到您的軟件APP中。

npm i mirrorfly-reactnative-sdk

步驟 2：選擇項目中的目標位置并導入 SDK。 

import { SDK } from "mirrorfly-reactnative-sdk";

添加 NPM 包依賴項

按照此處的說明添加與聊天相關(guān)的依賴項。

{
   // Add chat related dependencies. And then add the below calls related dependencies
   "react-native-webrtc": "118.0.2", // must use version "118.0.2"
   "react-native-background-timer": "2.*.*"
  }

初始化調(diào)用SDK

要開始 SDK 初始化，您需要特定的數(shù)據(jù)。這樣每當客戶端軟件APP的連接狀態(tài)發(fā)生變化時，這些數(shù)據(jù)將有助于SDK做出相應的響應。 

現(xiàn)在，在許可證密鑰參數(shù)中，使用您從帳戶獲得的許可證密鑰。使用以下方法通過 SDK 傳遞數(shù)據(jù)：

const incomingCallListener = (res) => {};const callStatusListener = (res) => {};const userTrackListener = (res) => {};const muteStatusListener = (res) => {};const missedCallListener = (res) => {};const mediaErrorListener = (res) => {};const callSpeakingListener = (res) => {};const callUsersUpdateListener = (res) => {};const helper = {}const initializeObj = {
  apiBaseUrl: `API_URL`,
  licenseKey: `LICENSE_KEY`,
  isTrialLicenseKey: `TRIAL_MODE`,
  callbackListeners: {
    connectionListener,
    incomingCallListener,
    callStatusListener,
    userTrackListener,
    muteStatusListener,
    missedCallListener,
    mediaErrorListener,
    callSpeakingListener,
    callUsersUpdateListener,
    helper
  },};await SDK.initializeSDK(initializeObj);

沙盒詳情

從您帳戶的概述部分獲取 apiUrl 和許可證密鑰詳細信息。

function connectionListener(response) {
  if (response.status === "CONNECTED") {
    console.log("Connection Established");
  } else if (response.status === "DISCONNECTED") {
    console.log("Disconnected");
  }}const initializeObj = {
  apiBaseUrl: "https://api-preprod-sandbox.mirrorfly.com/api/v1",
  licenseKey: "XXXXXXXXXXXXXXXXX",
  isTrialLicenseKey: true,
  callbackListeners: {
    connectionListener
  },};await SDK.initializeSDK(initializeObj);

響應示例

{
  "statusCode": 200,
  "message": "Success"}

注冊用戶

第 1 步：要注冊新用戶，請使用以下方法。 

第2步：注冊時，您將獲得用戶名和密碼。您可以利用這些憑據(jù)通過connect方法與聊天服務器建立連接。

await SDK.register(`USER_IDENTIFIER`, `ANDROID_FCM_TOKEN`, `IOS_VOIP_TOKEN`, `IS_PRODUCTION`);

注冊用戶示例代碼

import messaging from '@react-native-firebase/messaging';import RNVoipPushNotification from 'react-native-voip-push-notification';RNVoipPushNotification.addEventListener('register', async voipToken => {
   const fcmToken = await messaging().getToken();
   SDK.register(userIdentifier, fcmToken, voipToken, process.env?.NODE_ENV === "production");});// =====  register for VOIP =====RNVoipPushNotification.registerVoipToken();

響應示例：

{
  statusCode: 200,
  message: "Success",
  data: {
    username: "123456789",
    password: "987654321"
  }}

連接到 MirrorFly 服務器

步驟 1：使用您從上述步驟中獲得的憑據(jù)并開始與 MirrorFly 服務器連接。 

第 2 步：如果連接成功，您將給出“statusCode of 200”的批準消息。否則，將會出現(xiàn)執(zhí)行錯誤。 步驟3：這樣，您可以使用connectionListener回調(diào)函數(shù)跟蹤React Native軟件APP的連接狀態(tài)。

await SDK.connect(`USERNAME`, `PASSWORD`);

響應示例：

{
  message: "Login Success",
  statusCode: 200}

呼叫會話期間生成的操作

“React Native 與 WebRTC 結(jié)合教程可以開發(fā)整個通話會話”

每當用戶計劃撥打電話時，只有幾種可能的結(jié)果，例如撥打電話、接聽電話、然后結(jié)束通話或掛斷電話。讓我們從技術(shù)角度來研究一下，

1) 已接聽電話 

在這種情況下，軟件APP收到呼叫并且已將其作為傳入呼叫請求接受?，F(xiàn)在，從技術(shù)角度來說，這可以通過會話 ID 的規(guī)范來實現(xiàn)，這里用戶需要接受此會話 ID 來接受呼叫。 

2) 來電被拒接 

當來電尚未接聽并被切斷時就會出現(xiàn)這種情況。此類情況將通過拒絕用戶想要拒絕的會話 ID 來通知軟件APP。

3) 掛斷電話 

這表示通話結(jié)束。在這里，軟件APP將通過結(jié)束會話 ID 來收到指令通知。

最后的接觸

“最終執(zhí)行具有無盡連接的React本機視頻聊天軟件APP”

按照說明執(zhí)行上述所有步驟后，用戶將能夠擁有功能齊全的 React Native視頻聊天軟件APP。然而，CONTUS MirrorFly 憑借其高度交互的 SDK 和指導文檔，使整個過程變得最簡單、容易。

帶走

好吧，上述技術(shù)內(nèi)容是在開發(fā) React 本機視頻通話軟件APP時在后端發(fā)生的技術(shù)內(nèi)容。這些是一些核心編碼步驟中的一些，但還有更多值得探索的地方。 

如果您有興趣開發(fā)您的 React Native 聊天軟件APP，請隨時聯(lián)系我們熟練的開發(fā)團隊，以進一步明確下一步操作

一切順利！

React Native 視頻通話應用常見問題解答

1. 如何使用react-native-video向React Native添加視頻？

要添加視頻以使用react-native-video組件進行原生反應，首先我們必須將視頻組件從庫導入到需要顯示視頻的位置。完成后，您可以命名這些視頻文件以供進一步使用。

2. 我可以在React Native中使用WebRTC嗎？

是的當然！ WebRTC 是一種用于創(chuàng)建清晰且安全的視頻通信的強大技術(shù)，它可以使用相同的瀏覽器 API 與 React Native 技術(shù)堆棧一起使用。 

3. 如何使用 MirrorFly 開發(fā) React Native 視頻聊天應用？

要使用 MirrorFly 開發(fā) React Native 視頻聊天軟件APP，您必須遵循以下步驟：

• 需要啟動一個新項目并安裝依賴項

• 要生成新項目，請根據(jù)所使用的設備選擇空白模板

• 設置 Firebase，Google 支持的云服務，用于處理身份驗證和數(shù)據(jù)庫存儲

• 現(xiàn)在，使用新目錄作為組件創(chuàng)建一個聊天屏幕

• 將 React Native 聊天軟件APP與 Firebase 連接起來

• 將登錄屏幕添加到聊天軟件APP并添加功能并做好準備

4. 如何在 React Native 中集成視頻通話？

要將視頻通話集成到 React Native 軟件APP中，請按照以下步驟操作：

• 安裝導航依賴項

• 添加用于視頻會議的 MirrorFly 庫。

• 安裝 Firebase 相關(guān)依賴項以進行用戶身份驗證和實時更新。

• 合并用于呼叫管理、推送通知和權(quán)限的庫。

5. 如何在 React 軟件APP上錄制視頻？

要在React軟件APP中錄制視頻，您需要首先獲得用戶的許可。您可以通過使用錄制庫來實現(xiàn)這一點。只需創(chuàng)建一個函數(shù)來請求權(quán)限并初始化用于視頻錄制的記錄器實例。

6. 如何在 React Native 軟件APP上播放視頻？

要在 React Native 軟件APP中播放視頻，您可以使用“react-native-video”庫。推薦使用該庫是因為它提供了優(yōu)秀的文檔、易于使用并且具有適應性。 

但是，要控制視頻播放，您可能還需要使用“react-native-media-controls”庫，因為“react-native-video”包本身缺乏用于播放和暫停視頻的內(nèi)置控件。

7. React Native 中有哪些視頻播放器庫可用？

在 React Native 中，有幾個可用的視頻播放器庫。流行的選項之一是“React Native Video”，它是一個功能豐富的視頻組件。它支持 MP4、WebM 和 Ogg 等多種視頻格式，并提供播放控制、全屏模式和字幕支持等功能。

8. 如何在 React Native 中預覽視頻？

要在 React Native 軟件APP中預覽視頻，您需要安裝一個視頻庫，例如“react-native-video”。導入庫，將視頻組件添加到軟件APP的 UI，指定視頻源（本地文件或遠程 URL），根據(jù)需要設置視頻組件的樣式，并可選擇實現(xiàn)播放控件和事件處理以進行用戶交互。

河南言鼎信息科技有限公司專業(yè)從事手機app軟件開發(fā)定制外包業(yè)務十年有余，設計領域：商城類、教育類、直播類、跑腿類、外賣類、社交類、醫(yī)療類、本地生活類、物聯(lián)網(wǎng)類、管理系統(tǒng)等app開發(fā)定制外包。如有需要請及時聯(lián)系我們言鼎科技。