前言
视频通话在如今的社交分发中尤其重要，因为视频可以增加真实感和互动性。而 Twilio 提供了一款便捷而全面的视频 API 来协助我们实现视频通话，其文档也很详尽，帮助我们快速接入。
本文将为大家介绍如何使用 npm 包 react-native-twilio-video-android 来搭建一个基本的视频通话应用。
准备工作
在开始之前，我们需要确保以下准备工作已经完成：
- 配置好并且运行 React Native 的开发环境
- 手机或者模拟器已经搭建好，并且支持 Android 数据
- 必要的图片、图标等资源已经准备好
正式开始
安装 react-native-twilio-video-android
我们先从 npm 安装 react-native-twilio-video-android：
npm install --save react-native-twilio-video-android
添加 Twilio 配置信息
在 android/app/src/main/res/values/strings.xml 文件中添加你的 Twilio 账户信息：
<string name="twilio_account_sid">YOUR_ACCOUNT_SID</string> <string name="twilio_auth_token">YOUR_AUTH_TOKEN</string> <string name="twilio_access_token">TOKEN_THAT_YOU_GENERATED</string>
然后在 MainApplication.java 中导入 RNTwilioVideoLibraryPackage 并添加：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNTwilioVideoLibraryPackage()
);
}创建基本的视频界面
我们用两个不同的 View 分别来展示远程的视频和本地的视频：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
-----------
-----
-----
- ---- ---------------
------ ----- ---- ------------------------------------
----- ----------- ------- --------- -
-------- -
------ -
----- -------------------------
------ -------------------------- ----------------- --
------ ------------------------- ---------------- --
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--
----------- -
--------- -----------
------- ---
------ ---
------ ----
------- ----
---------------- --------
--
------------ -
----- --
---------------- --------
-
---
------ ------- ------------初始化 SDK
我们需要在 TwilioVideo 的 componentDidMount 函数中初始化 SDK，这个过程需要提供一个 access token。
-- -------------------- ---- -------
------------------- -
-- ---
-----------------
----- -- -
--------------- ------------ ----- ---
--
----- -- -
--------------- --- ------ - - -------
-
--
-加入房间
在用户填写完房间号等信息后，我们调用 Video.connect 来加入房间：
-- -------------------- ---- -------
--------- -
--------------
-----------------------
-
----- --------------------
--
-----------------
----- -- -
------------------ - - -------
----------------------
-
--
-
----------- - -- -- -
-------------------
-
-------------- - -- -- -
--------------------
-视频回调事件
我们可以通过 video 的回调事件来监控视频状态的变化：
-- -------------------- ---- -------
---------------------- - ------------- -- -
------------------------- - - ----------------------
-
------------------------- - ------------- -- -
------------------------ - - ----------------------
-
---------------- - ------- -- -
------------------- - - -------
-
---------------------------- - ------------- ------ -- -
-------------------------------- - - ----------
--------------------------------------
---------- --------------
---------------- ---------------------
-------- -------------------
---
-
---------------------- - ------- -- -
-------------------------
-------------------------------------
---------- --------------
-------- ------------------
---
-离开房间
当我们需要离开房间时，调用 Video.disconnect 即可：
disconnect() {
Video.disconnect();
}总结
本文介绍了在 React Native 中如何使用 npm 包 react-native-twilio-video-android 来搭建视频通话应用。通过上述步骤，你已经可以顺利地进行视频通话，享受实时互动的乐趣。
不过在实际场景中，我们还需要考虑一些额外的细节，例如创建房间、邀请好友、调整视频质量等等。这些我们将在后续的文章中逐一介绍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8881e8991b448d927e