更新记录

1.0.0(2021-05-17)

新增 语音、视频通话,视频会议


平台兼容性

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

原生插件通用使用流程:

  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原生插件配置”->”云端插件“列表中删除该插件重新选择


## 插件介绍

插件集成声网sdk,实现功能有实时语音聊天、视频聊天、以及视频会议

插件使用说明

1.语音通话

1.1 初始化语音插件

const voiceModel = uni.requireNativePlugin('agora-voice');

1.2 判断录音语音权限

voiceModel.ischeckSelfPermission(res => {
                console.log(res);
            });

1.3 发起语音通话

传入form说明: 参数 说明
channelName 房间名
accessToken 频道内所有客户端均使用 Token 鉴权
voiceModel.startCall(this.form, res => {
                    console.log(res);
                    if (res.status == 200) {
                        console.log("正在连接中");
                        this.status = 'calling'
                    }
                    if (res.status == 300) {
                        console.log("正在拨打中");
                        this.status = 'doing'
                    }
                    if (res.status == 302) {
                        console.log("对方离开房间");
                        this.status = 'calling'
                    }
                })

1.4 切换听筒/扬声器

voiceModel.changeSpeaker(!this.speaker, res => {
                    console.log(res);
                    this.speaker = res.speaker;
                });

1.5 切换是否静音

    voiceModel.changeMute(!this.mute, res => {
                    console.log(res);
                    if (res.status == 200) this.mute = res.mute;
                });

1.6 停止通话

voiceModel.closeCall(res => {
                    console.log(res);`在这里插入代码片`
                    if (res.status == 200) {
                        this.status = 'common';
                    }
                })

2.视频通话 AgoraView

AgoraView 组件

在nvue页面中直接使用组件

<AgoraView ref="agoraView1" class="maxTxAgoraView" :style="{height:windowHeight}"
            @onJoinChannelSuccess="onJoinChannelSuccess" @onLeaveChannel="onLeaveChannel"
            @onRemoteVideoStateChanged="onRemoteVideoStateChanged" @onUserJoined="onUserJoined"
            @onUserOffline="onUserOffline"></AgoraView>

2.1 检查音视频权限

    var agoraView = this.$refs.agoraView1;
                agoraView.ischeckSelfPermission(res => {
                    console.log(res);
                });

2.2 create,创建RtcEngine实例

    agoraView.create(res => {});

2.3 设置视频编码配置

agoraView.setupLocalVideo({
                    channelName: this.channelName,
                    uid: this.uid
                }, res => {
                    console.log(res);
                })

2.4 加入房间

    agoraView.joinChannel({
                    token: this.token,
                    channelName: this.channelName,
                    uid: this.uid,
                }, res => {
                    console.log(res);
                })

2.5 切换是否静音

    this.$refs.agoraView1.onLocalAudioMuteClicked(this.mute);

2.6 切换前、后摄像头

this.$refs.agoraView1.onSwitchCameraClicked();

2.7 结束通话

this.$refs.agoraView1.leaveChannel();
this.$refs.agoraView1.destroy();

2.8 回调说明

回调方法 说明
onJoinChannelSuccess 本地用户成功加入频道回调事件
onLeaveChannel 本地用户离开直播频道回调事件
onRemoteVideoStateChanged 远端视频状态改变回调事件
onUserJoined 远端用户成功加入频道回调事件
onUserOffline 远端用户离线

2.9 设置远端视频

在远端用户加入房间回调事件执行设置远端视频回显

//远端用户成功加入频道回调事件
            onUserJoined(e) {
                let res = e.detail
                var uid = res.uid
                console.log(`远端用户成功加入频道回调事件${uid}`);
                uni.showToast({
                    title: '远端用户成功加入频道',
                    icon: 'none',
                    duration: 1500
                })
                //设置远端视频
                this.$refs.agoraView1.setupRemoteVideo({
                    channelName: this.channelName, // 频道名称
                    uid: uid, // 用户编号,int型
                    width: 270,
                    height: 360
                }, res => {
                    console.log(res);
                })
            },

3.视频会议 liveRoomMetting

liveRoomMetting组件

在nvue页面中直接使用组件

本地视频组件

    <view class="liveroom-cel liveroom-pusher">
                <liveRoomMetting class="liveroom-trtc" ref="agoraView" @onJoinChannelSuccess="onJoinChannelSuccess"
                    @onLeaveChannel="onLeaveChannel" @onRemoteVideoStateChanged="onRemoteVideoStateChanged"
                    @onUserJoined="onUserJoined" @onUserOffline="onUserOffline"></liveRoomMetting>
                <text class="liveroom-cel-name">我</text>
            </view>

远端用户视频组件

//远端用户回显

<view class="liveroom-cel liveroom-player" v-for="(item, index) in players" :key="index">
                <liveRoomMettingPlayer class="liveroom-trtc" :ref="'remoteUser' + item.uid"  :remoteUid="item.uid" 
                :channelName="channelName">
                </liveRoomMettingPlayer> 

                <text class="liveroom-cel-name">{{item.uid}}</text>
            </view>

3.1 切换是否静音

    this.$refs.agoraView.onLocalAudioMuteClicked(this.mute);

3.2切换前、后摄像头

this.$refs.agoraView.onSwitchCameraClicked();

3.3 结束通话

this.$refs.agoraView.leaveChannel();
this.$refs.agoraView.destroy();

...... 详细说明可下载示例项目进行参考

隐私、权限声明

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

<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.CAMERA" />

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

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

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