实时音视频 实时语音通话(小程序) - 场景实践

效果展示

主动呼叫	被叫接听

如需快速实现语音的通话功能，您可以直接基于我们提供的 Demo 进行修改适配，也可以使用我们提供的 TRTCCalling 组件并实现自定义 UI 界面。

复用 Demo 的 UI 界面

步骤1：创建新的应用

1. 登录实时音视频控制台，选择【开发辅助】>【快速跑通Demo】。
2. 输入应用名称，例如 TestVideoCall ，单击【创建】。

注意：

本功能同时使用了腾讯云 实时音视频 TRTC 和 即时通信 IM 两个基础 PaaS 服务，开通实时音视频后会同步开通即时通信 IM 服务。 即时通信 IM 属于增值服务，详细计费规则请参见 即时通信 IM 价格说明。

步骤2：下载 SDK 和 Demo 源码

1. 根据实际业务需求下载 SDK 及配套的 Demo 源码。
2. 下载完成后，单击【已下载，下一步】。
   

步骤3：配置 Demo 工程文件

1. 进入修改配置页，根据您下载的源码包，选择相应的开发环境。
2. 找到并打开 WXMini/TRTCScenesDemo/trtc-calling-miniapp/debug/GenerateTestUserSig.js 文件。
3. 设置 GenerateTestUserSig.js 文件中的相关参数：
   • SDKAPPID：默认为0，请设置为实际的 SDKAppID。
   • SECRETKEY：默认为空字符串，请设置为实际的密钥信息。
   
4. 粘贴完成后，单击【已复制粘贴，下一步】即创建成功。
5. 编译完成后，单击【回到控制台概览】即可。

注意：

• 本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。
• 正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

步骤4：开通小程序类目与推拉流标签权限

出于政策和合规的考虑，微信暂未放开所有小程序对实时音视频功能（即 <live-pusher> 和 <live-player> 标签）的支持：

• 小程序推拉流标签不支持个人小程序，只支持企业类小程序。
• 小程序推拉流标签使用权限暂时只开放给有限 类目。
• 符合类目要求的小程序，需要在【微信公众平台】>【开发】>【接口设置】中自助开通该组件权限，如下图所示：

步骤5：编译运行

1. 打开微信开发者工具，选择【小程序】，单击新建图标，选择【导入项目】。
2. 填写您微信小程序的 AppID，单击【导入】。
   

   注意：

   此处应输入您微信小程序的 AppID，而非 SDKAppID。

3. 单击【预览】，生成二维码，通过手机微信扫码二维码即可进入小程序。

   说明：

   小程序 <live-player> 和 <live-pusher> 标签需要在手机微信上才能使用，微信开发者工具上无法使用。为了小程序能够使用腾讯云房间管理服务，您需要在手机微信上开启调试功能：手机微信扫码二维码后，单击右上角【...】>【打开调试】。

   

修改组件模版 UI

小程序的实时音视频能力依赖 live-pusher 和 live-player 这两个小程序的原生组件，如果您需要定制化自己的 UI 界面，可以修改 components/TRTCCalling/template/audio-template 下的文件，根据您的业务场景进行修改。

组件 API 列表

TRTCCalling 组件的 API 接口列表如下：