更新记录

1.0.0(2021-12-06)

  • 音频通话(双人/多人语音通话,包含静音/免提等功能)
  • 视频通话(双人/多人语音通话,包含静音/免提等功能)
  • 视频互动直播
  • 语音互动直播
  • 自定义业务、自定义UI

平台兼容性

Android Android CPU类型 iOS
适用版本区间:4.4 - 11.0 armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 适用版本区间:9 - 15

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


前言

腾讯云 实时音视频 TRTC https://cloud.tencent.com/product/trtc

功能

  • 音频通话(双人/多人语音通话,包含静音/免提等功能)
  • 视频通话(双人/多人语音通话,包含静音/免提等功能)
  • 视频互动直播
  • 语音互动直播
  • 自定义业务、自定义UI

快速入门

参照官网文档https://cloud.tencent.com/document/product/647/32396注册账号,完成实名认证,登录实时音视频控制台创建应用,记录下sdkAppId、secretKey, 替换demo的sdkAppId、secretKey即可打包运行

wrs-tencentCloudTRTCVideoView组件

显示视频画面的组件,不能有子节点,需要设置id属性,用来标识查找,此组件需要位于wrs-tencentCloudTRTCView父组件的子节点下

组件

wrs-tencentCloudTRTCView是业务控制组件,不能有子节点,包含进入房间、退出房间、摄像头切换、免提、mic等等控制,不需要在界面上显示,用来通过其父节点往下遍历找到wrs-tencentCloudTRTCVideoView节点


wrs-tencentCloudTRTCView ref='TRTCView'
                @onUserVideoAvailable="onUserVideoAvailable">

方法

  • 进入房间

roleType: 20:主播端,可以随时发布自己的音视频流,但人数有限制,同一个房间中最多只允许 50 个主播同时发布自己的音视频流。 21:观众端,只能观看其他用户的音视频流,要发布音视频流,需要先通过 {@link switchRole} 切换成主播,同一个房间中最多能容纳10万观众 roomId: 房间ID,是int类型,跟strRoomId二选一传一个就可以 strRoomId:房间ID,是String类型,跟roomId二选一传一个就可以 appScene: 0:视频通话场景,支持720P、1080P高清画质,单个房间最多支持300人同时在线,最高支持50人同时发言。适用于[1对1视频通话]、[300人视频会议]、[在线问诊]、[教育小班课]、[远程面试]等业务场景。 1:视频互动直播,支持平滑上下麦,切换过程无需等待,主播延时小于300ms;支持十万级别观众同时播放,播放延时低至1000ms。适用于[低延时互动直播]、[大班课]、[主播PK]、[视频相亲]、[在线互动课堂]、[远程培训]、[超大型会议]等业务场景。 2:语音通话场景,默认采用 SPEECH 音质,单个房间最多支持300人同时在线,最高支持50人同时发言。适用于[1对1语音通话]、[300人语音会议]、[语音聊天]、[语音会议]、[在线狼人杀]等业务场景。 3:语音互动直播,支持平滑上下麦,切换过程无需等待,主播延时小于300ms;支持十万级别观众同时播放,播放延时低至1000ms。适用于[语音俱乐部]、[在线K歌房]、[音乐直播间]、[FM电台]等业务场景。

  • 开启本地摄像头的预览画面,即开启摄像头
                var localPreviewParams = {};
                localPreviewParams.frontCamera = true; // 是否使用前摄像头
                localPreviewParams.viewId = "localView"; // 从其父节点往下遍历找到id为localView的wrs-tencentCloudTRTCVideoView组件来显示本地画面
                this.$refs.TRTCView.startLocalPreview(localPreviewParams);

frontCamera: true/false,是否使用前摄像头 viewId:从其父节点往下遍历找到id为localView的wrs-tencentCloudTRTCVideoView组件来显示本地画面

  • 停止本地摄像头预览,即关闭摄像头
 this.$refs.TRTCView.stopLocalPreview();
  • 订阅远端用户的视频流,并绑定视频渲染控件,即显示同个房间内其他用户的视频画面

    var params = {};
    params.userId = "xxx";
    params.viewId = "xxx";// 从其父节点往下遍历找到id为localView的wrs-tencentCloudTRTCVideoView组件来显示本地画面
    params.streamType = 15;
    this.$refs.TRTCView.startRemoteView(params);

    userId:用户ID viewId:从其父节点往下遍历找到id为localView的wrs-tencentCloudTRTCVideoView组件来显示本地画面 streamType: 0:高清大画面,一般用来传输摄像头的视频数据。 1:低清小画面:小画面和大画面的内容相互,但是分辨率和码率都比大画面低,因此清晰度也更低 2:辅流画面:一般用于屏幕分享,同一时间在同一个房间中只允许一个用户发布辅流视频,其他用户必须要等该用户关闭之后才能发布自己的辅流。

  • 停止订阅远端用户的视频流,并释放渲染控件,即关闭同一个房间内其他用户的视频画面

var params = {};
params.userId = "xxx";
params.streamType = 15;
 this.$refs.TRTCView.stopRemoteView(params);

userId:用户ID streamType: 0:高清大画面,一般用来传输摄像头的视频数据。 1:低清小画面:小画面和大画面的内容相互,但是分辨率和码率都比大画面低,因此清晰度也更低 2:辅流画面:一般用于屏幕分享,同一时间在同一个房间中只允许一个用户发布辅流视频,其他用户必须要等该用户关闭之后才能发布自己的辅流。

  • 切换前置或后置摄像头

    var params = {};
    params.frontCamera = false;
    this.$refs.TRTCView.switchCamera(params);
  • 开启本地音频的采集和发布

var params = {};
params.quality = 3;
 this.$refs.TRTCView.startLocalAudio(params);

quality: 1:人声模式:采样率:16k;单声道;编码码率:16kbps;具备几个模式中最强的网络抗性,适合语音通话为主的场景,比如在线会议,语音通话等。 2:默认模式:采样率:48k;单声道;编码码率:50kbps;介于 Speech 和 Music 之间的档位,SDK 默认档位,推荐选择。 3:音乐模式:采样率:48k;全频带立体声;编码码率:128kbps;适合需要高保真传输音乐的场景,比如在线K歌、音乐直播等。

  • 停止本地音频的采集和发布
this.$refs.TRTCView.stopLocalAudio();
  • 打开/关闭麦克风
var params = {};
params.mute = true;
this.$refs.TRTCView.muteLocalAudio(params);
  • 免提(扬声器)/听筒,
var params = {};
params.audioRoute = 0;
this.$refs.TRTCView.setAudioRoute(params);

audioRoute: 0:Speakerphone,使用扬声器播放(即“免提”),扬声器位于手机底部,声音偏大,适合外放音乐。 1:Earpiece,使用听筒播放,听筒位于手机顶部,声音偏小,适合需要保护隐私的通话场景。

  • 设置视频编码器的编码参数
    var params = {};
    params.videoResolution = 108;
    params.videoBitrate = 550;
    params.videoFps = 15;
    params.resMode = 0;
    params.minVideoBitrate = 0;
    params.enableAdjustRes = false;
    this.$refs.TRTCView.setVideoEncoderParam(params);

    videoResolution:视频分辨率 1:宽高比 1:1;分辨率 120x120;建议码率(VideoCall)80kbps; 建议码率(LIVE)120kbps。 3:宽高比 1:1 分辨率 160x160;建议码率(VideoCall)100kbps; 建议码率(LIVE)150kbps。 5:宽高比 1:1;分辨率 270x270;建议码率(VideoCall)200kbps; 建议码率(LIVE)300kbps。 7:宽高比 1:1;分辨率 480x480;建议码率(VideoCall)350kbps; 建议码率(LIVE)500kbps。 50:宽高比4:3;分辨率 160x120;建议码率(VideoCall)100kbps; 建议码率(LIVE)150kbps。 52:宽高比 4:3;分辨率 240x180;建议码率(VideoCall)150kbps; 建议码率(LIVE)250kbps。 54:宽高比 4:3;分辨率 280x210;建议码率(VideoCall)200kbps; 建议码率(LIVE)300kbps。 56:宽高比 4:3;分辨率 320x240;建议码率(VideoCall)250kbps; 建议码率(LIVE)375kbps。 58:宽高比 4:3;分辨率 400x300;建议码率(VideoCall)300kbps; 建议码率(LIVE)450kbps。 60:宽高比 4:3;分辨率 480x360;建议码率(VideoCall)400kbps; 建议码率(LIVE)600kbps 62:宽高比 4:3;分辨率 640x480;建议码率(VideoCall)600kbps; 建议码率(LIVE)900kbps。 64:宽高比 4:3;分辨率 960x720;建议码率(VideoCall)1000kbps; 建议码率(LIVE)1500kbps。 100:宽高比 16:9;分辨率 160x90;建议码率(VideoCall)150kbps; 建议码率(LIVE)250kbps。 102:宽高比 16:9;分辨率 256x144;建议码率(VideoCall)200kbps; 建议码率(LIVE)300kbps。 104:宽高比 16:9;分辨率 320x180;建议码率(VideoCall)250kbps; 建议码率(LIVE)400kbps。 106:宽高比 16:9;分辨率 480x270;建议码率(VideoCall)350kbps; 建议码率(LIVE)550kbps。 108:宽高比 16:9;分辨率 640x360;建议码率(VideoCall)500kbps; 建议码率(LIVE)900kbps。 110:宽高比 16:9;分辨率 960x540;建议码率(VideoCall)850kbps; 建议码率(LIVE)1300kbps。 112:宽高比 16:9;分辨率 1280x720;建议码率(VideoCall)1200kbps; 建议码率(LIVE)1800kbps。 114:宽高比 16:9;分辨率 1920x1080;建议码率(VideoCall)2000kbps; 建议码率(LIVE)3000kbps。 ///【推荐取值】 /// - 手机视频通话:建议选择 360 × 640 及以下分辨率,resMode 选择 Portrait,即竖屏分辨率。 /// - 手机在线直播:建议选择 540 × 960,resMode 选择 Portrait,即竖屏分辨率。 /// - 桌面平台(Win + Mac):建议选择 640 × 360 及以上分辨率,resMode 选择 Landscape,即横屏分辨率。

resMode:分辨率模式(横屏分辨率 or 竖屏分辨率) 0:横屏分辨率,例如:TRTCVideoResolution_640_360 + TRTCVideoResolutionModeLandscape = 640 × 360。 1:竖屏分辨率,例如:TRTCVideoResolution_640_360 + TRTCVideoResolutionModePortrait = 360 × 640。 【推荐取值】手机平台(iOS、Android)建议选择 Portrait,桌面平台(Windows、Mac)建议选择 Landscape。

videoBitrate:目标视频码率,SDK 会按照目标码率进行编码,只有在弱网络环境下才会主动降低视频码率。 ///【推荐取值】请参考本 TRTCVideoResolution 在各档位注释的最佳码率,也可以在此基础上适当调高。 /// 比如:TRTCVideoResolution_1280_720 对应 1200kbps 的目标码率,您也可以设置为 1500kbps 用来获得更好的观感清晰度。

videoFps:视频采集帧率,15fps或20fps。5fps以下,卡顿感明显。10fps以下,会有轻微卡顿感。20fps以上,会浪费带宽(电影的帧率为24fps)。 ///【推荐取值】15fps或20fps。5fps以下,卡顿感明显。10fps以下,会有轻微卡顿感。20fps以上,会浪费带宽(电影的帧率为24fps)。

minVideoBitrate:最低视频码率,SDK 会在网络不佳的情况下主动降低视频码率以保持流畅度,最低会降至 minVideoBitrate 所设定的数值。 ///【推荐取值】您可以通过同时设置 videoBitrate 和 minVideoBitrate 两个参数,用于约束 SDK 对视频码率的调整范围: /// - 如果您追求“弱网络下允许卡顿但要保持清晰”的效果,可以设置 minVideoBitrate 为 videoBitrate 的 60%; /// - 如果您追求“弱网络下允许模糊但要保持流畅”的效果,可以设置 minVideoBitrate 为一个较低的数值(比如 100kbps); /// - 如果您将 videoBitrate 和 minVideoBitrate 设置为同一个值,等价于关闭 SDK 对视频码率的自适应调节能力。

enableAdjustRes:是否允许动态调整分辨率(开启后会对云端录制产生影响)。该功能适用于不需要云端录制的场景,开启后 SDK 会根据当前网络情况,智能选择出一个合适的分辨率,避免出现“大分辨率+小码率”的低效编码模式。 ///【推荐取值】该功能适用于不需要云端录制的场景,开启后 SDK 会根据当前网络情况,智能选择出一个合适的分辨率,避免出现“大分辨率+小码率”的低效编码模式。 ///【特别说明】默认值:关闭。如有云端录制的需求,请不要开启此功能,因为如果视频分辨率发生变化后,云端录制出的 MP4 在普通的播放器上无法正常播放。

事件

  • onUserVideoAvailable 某远端用户发布/取消了主路视频画面,即对方关闭/打开了摄像机 参数resp
    var data = resp.detail;
    var userId = data.userId; // 用户ID
    var available = data.available; // 该用户是否发布(或取消发布)了主路视频画面,true: 发布;false:取消发布。

支持定制,联系方式 QQ:252797991

如果觉得可以就点个👍吧,欢迎粉丝收藏,土豪打赏,您的关注就是我们创作的动力!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

Android: "android.permission.INTERNET", "android.permission.ACCESS_NETWORK_STATE", "android.permission.ACCESS_WIFI_STATE", "android.permission.WRITE_EXTERNAL_STORAGE", "android.permission.READ_EXTERNAL_STORAGE", "android.permission.RECORD_AUDIO", "android.permission.MODIFY_AUDIO_SETTINGS", "android.permission.BLUETOOTH", "android.permission.CAMERA", "android.permission.READ_PHONE_STATE" ios: "NSCameraUsageDescription", "NSMicrophoneUsageDescription", "NSPhotoLibraryAddUsageDescription", "NSPhotoLibraryUsageDescription"

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用的 腾讯云实时音视频TRTC SDK会采集数据,详情可参考:https://cloud.tencent.com/product/trtc

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问