即时通信 IM React Native(跑通 Demo)

这篇将介绍如何快速实现音视频通话演示,你将在10分钟内完成以下关键步骤,并最终获得一个具有全面用户界面的视频通话功能。

相关产品
即时通信 IM 产品页,含版本规格、价格与购买入口。

一、环境准备

·Node.js 16 及更高版本。

·两部手机。

二、开通服务

请参见 开通服务,获取 SDKAppID 和 SDKSecretKey,在后续的步骤(配置 Demo)中会用到。

三、下载 Demo

1. 从 GitHub 下载源码,或者直接在命令行运行以下命令:

git clone https://github.com/Tencent-RTC/TUICallKit.git

2. 进入 ./TUICallKit/ReactNative 目录,依赖 TUICallKit 组件。

cd ./TUICallKit/ReactNativeyarn install

四、跑通 Demo

我们推荐你将 Demo 分别在两台设备上使用两个用户登录,一方作为主叫,一方作为被叫,完成一次音视频通话体验。

五、步骤1:配置并运行 Demo

1. 打开 TUICallKit/ReactNative/src/debug/GenerateTestUserSig-es.js 文件,将开通服务时获取的 SDKAppID 和 SDKSecretKey 填入其中。

2. 通过以下命令运行 Demo。

# TUICallKit/ReactNativeyarn start

六、步骤2:登录

Demo 启动后,请你在 Login 处输入 ID ,完成登录。

登录用户:Charlie 登录用户:Jane
 

注意:提示:

注意:建议你尽量避免将你的 UserID 设置成“1”、“123”、“111”等简单字符串,在多人协作开发时,形如 “1”、“123”、“111” 这样的 UserID 很容易被你的同事占用,导致登录失败,因此我们建议你在调试的时候设置一些辨识度高的 UserID。

七、步骤3:拨打电话

1. 主叫方请点击界面上的 1V1 通话,在弹出的界面中输入被叫方的 UserID 并选择你想要的通话类型。

2. 单击发起通话。

Charlie 呼叫 Jane Jane 收到来电 Jane 点击"接听"后双方开始通话
  

注意:提示:

注意:发起通话需确认:被呼叫用户 ID 是已登录的有效 ID。

八、运行 Demo 提示签名错误或登录失败?

请检查你在 TUIKit_Android/application/debug/src/main/java/com/tencent/qcloud/tuikit/debug/GenerateTestUserSig.java 文件中填写的 SDKAppID 和 SDKSecretKey 是否正确,确保它们是你在 开通服务 时获取到的密钥。

九、拨打电话过程中出现需要购买套餐包的提示?

错误提示 解决方法
你当前未购买音视频通话能力套餐,请前往 IM 控制台开通免费体验或加购正式版。 你当前未购买音视频通话能力套餐,请前往 IM 控制台 开通免费体验 或 加购正式版。
你当前购买的音视频通话能力套餐不支持该功能,建议你升级套餐类型。 你当前购买的音视频通话能力套餐不支持该功能,建议你前往 IM 控制台 升级套餐类型。

十、React Native 环境问题如何确认?

如你需得知 React Native 的环境是否存在问题,请运行 npx react-native doctor 检测 React Native 环境是否装好。

npx react-native doctor

十一、交流与反馈

如果你在使用过程中,有什么建议或者意见,可以 联系我们,感谢你的反馈。

赞 (0)
上一篇 4天前
下一篇 4天前