前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >产品动态 | TRTC React Native SDK开挂辅助神器上线~

产品动态 | TRTC React Native SDK开挂辅助神器上线~

原创
作者头像
TCS-F
修改2022-02-18 13:10:02
1.1K0
修改2022-02-18 13:10:02
举报
文章被收录于专栏:云攻略专区云攻略专区

React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。通过 React Native,您可以使用 JavaScript 来访问移动平台的 API,以及使用 React 组件来描述 UI 的外观和行为:一系列可重用、可嵌套的代码。

图片
图片

TRTC React Native SDK 是基于腾讯云 iOS/Android 平台的 TRTC SDK 进行封装的,架构图整体跟Flutter类似。

图片
图片

TRTC React Native sdk类文件说明

  • trtc_cloud-腾讯云视频通话功能的主要接口类;
  • tx_video_view-视频渲染view;
  • tx_beauty_manager-美颜管理类;
  • tx_audio_effect_manager-腾讯云音视频通话功能音乐和人声设置接口;
  • tx_device_manager-设备管理类;
  • trtc_cloud_def-腾讯云音视频通话功能的关键类型定义;
  • trtc_cloud_listener-腾讯云音视频通话功能的事件回调监听接口。 集成SDK

ReactNative SDK 已经发布到 npm (https://www.npmjs.com/package/trtc-react-native),您可以通过配置 package.json 安装。

1. 在项目的 package.json 中写如下依赖:

代码语言:javascript
复制
"dependencies": {  "trtc-react-native": "^2.0.0"},

2. 配置摄像头麦克风的权限,即可开启音视频通话功能。

调用示例

1.初始化

代码语言:javascript
复制
// 创建 TRTCCloud 单例const trtcCloud = TRTCCloud.sharedInstance();// 获取设备管理模块const txDeviceManager = trtcCloud.getDeviceManager();// 获取音效管理类const txAudioManager = trtcCloud.getAudioEffectManager();// 获取美颜管理类const txBeautyManager = trtcCloud.getBeautyManager();

2.进退房

代码语言:javascript
复制
const params = new TRTCParams({        sdkAppId: SDKAPPID,//应用id        userId,//用户id        userSig,//用户签名        roomId: 2366,//房间Id      });//进房trtcCloud.enterRoom(params, TRTCCloudDef.TRTC_APP_SCENE_VIDEOCALL);//退房trtcCloud.exitRoom();

3.事件监听

代码语言:javascript
复制
//设置事件监听trtcCloud.registerListener(onRtcListener);
function onRtcListener((type: TRTCCloudListener, params: any) => {  //进房回调事件  if (type === TRTCCloudListener.onEnterRoom) {    if (params['result'] > 0) {      showToast('进房成功');    }  }  // 远端用户进房  if (type === TRTCCloudListener.onRemoteUserEnterRoom) {    //params['userId']参数为远端用户userId  }  //远端用户是否打开麦克风  if (type === TRTCCloudListener.onUserAudioAvailable) {    //param['userId']表示远端用户id    //param['visible'] true表示打开麦克风  }});//移除事件监听trtcCloud.unRegisterListener(onRtcListener);

4.显示本地视频

代码语言:javascript
复制
<TXVideoView.LocalView />

5.显示远端视频

代码语言:javascript
复制
<TXVideoView.RemoteView  userId={remoteUserId}  streamType={TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG}/>

6.显示远端屏幕分享

代码语言:javascript
复制
<TXVideoView.RemoteView  userId={remoteUserId}  streamType={TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_SUB}/>

如果您是一个前端发烧友,那TRTC React Native SDK是您实现音视频通话的不二之选,快来集成我们的SDK吧。

相关文档:

[快速集成SDK]:https://cloud.tencent.com/document/product/647/63791

[跑通Demo]:https://cloud.tencent.com/document/product/647/63790

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • TRTC React Native sdk类文件说明
  • 调用示例
  • 相关文档:
  • [快速集成SDK]:https://cloud.tencent.com/document/product/647/63791
  • [跑通Demo]:https://cloud.tencent.com/document/product/647/63790
相关产品与服务
实时音视频
实时音视频(Tencent RTC)基于腾讯21年来在网络与音视频技术上的深度积累,以多人音视频通话和低延时互动直播两大场景化方案,通过腾讯云服务向开发者开放,致力于帮助开发者快速搭建低成本、低延时、高品质的音视频互动解决方案。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档