Android uni-app实现音视频通话

╰半橙微兮° 2022-12-30 04:00 236阅读 0赞

## 前言 ##

> 上一篇讲解了怎么实现Android uni-app封装原生插件，这篇讲解一下，把anyRTC的RTC（音视频通讯）封装uni-app 实现音视频通话。

不了解anyRTC的小伙伴，可以点击下面链接：

[开发者官网][Link 1]

## 1.效果图 ##

先上图，后讲解！

1.1 首页

1.2 游客界面  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70][]  
1.3 主播界面  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70 1][]

## 2.GitHub地址 ##

uni-app demo: [点击下载][Link 2]

## 3.demo下载： ##

下载地址：[点击下载][Link 3]

扫码下载：  
![20201224100819612.png][]

## 4.代码 ##

4.1 集成插件

const RtcModule = uni.requireNativePlugin('AR-RtcModule');

*  AR-RtcModule：插件名称，首页集成插件

4.2 初始事件回调

//callback 接收
    callbackFn() { 
    	RtcModule.setCallBack((res) => { 
    		switch (res.engineEvent) { 
    			case "onWarning":
    				this.promptFn("warn", res.warningCode);
    				break;
    			case "onError":
    				res.errorCode != 18 ? this.promptFn("error", res.errorCode) : '';
    				break;
    			case "onJoinChannelSuccess": //用户加入成功
    				uni.hideLoading();
    				this.role == 1 ? this.PeerVideoUser.push(res.uid) : "";
    				this.videoShow = true;
    				setTimeout(() => { 
    					// this.videoShowBg = false;
    					this.promptText = ""
    					//扬声器
    					RtcModule.setEnableSpeakerphone({ 
    						"enabled": true
    					}, (res) => { })
    					setTimeout(() => { 
    						// 启用视频模块。
    						this.role == 1 ? this.setupLocalVideoFn() : RtcModule.enableVideo((res) => { });
    					}, 200)
    				}, 2000)
    				break;
    			case "onLeaveChannel": //离开频道回调
    				setTimeout(() => { 
    					this.closeAll()
    				}, 500)
    				break;
    			case "onUserJoined": //远端用户加入当前频道回调。
    				// this.promptFn("info", "远端用户加入当前频道回调");
    				this.PeerVideoUser.push(res.uid);
    				break;
    			case "onUserOffline": //远端用户离开当前频道回调。
    				this.PeerVideoUser = this.PeerVideoUser.filter((x) => x !== res.uid);
    				break;
    
    			case "onFirstLocalAudioFrame": //已发送本地音频首帧的回调。（页面上添加音频）
    				break;
    			case "onFirstLocalVideoFrame": //已显示本地视频首帧的回调。（页面添加本地视频）
    				// this.promptFn("error", "已显示本地视频首帧的回调");
    				break;
    			case "onFirstRemoteVideoDecoded": //已完成远端视频首帧解码回调。（页面添加远端视频）
    				// this.promptFn("info", "已完成远端视频首帧解码回调");
    				this.promptText = "请稍等。。。"
    				let uid = []
    				uid.push(res.uid)
    				setTimeout(() => { 
    					this.promptText = "";
    					// this.videoShowBg = false; //设置背景开关
    					setTimeout(() => { 
    						uid.map(item => { 
    							this.$refs[`popup${ item}`][0].setupRemoteVideo({ 
    								"renderMode": 1,
    								"channelId": this.chanel,
    								"uid": item,
    								"mirrorMode": 0
    							}, (res) => { })
    							//预览
    							RtcModule.startPreview((res) => { });
    						})
    					}, 500)
    
    				}, 2000)
    				break;
    		}
    
    	})
    },

*  res.engineEvent：接收各种回调，加入频道成功，离开频道，错误码等。

4.3 创建实例

await RtcModule.create({ 
    	"appId": this.appid  //anyRTC 为 App 开发者签发的 App ID。每个项目都应该有一个独一无二的 App ID。如果你的开发包里没有 App ID，请从anyRTC官网(https://www.anyrtc.io)申请一个新的 App ID
    }, (res) => { });

4.4 设置角色

setClientRole(num) { 
    	this.role = num;
    	//设置直播场景下的用户角色
    	RtcModule.setClientRole({ 
    		"role": Number(num) //1:为主播，2：游客
    	}, (ret) => { });
    },

4.5 加入频道

await RtcModule.joinChannel({ 
    	"token": "",
    	"channelId": this.channel,
    	"uid": this.uid
    }, (res) => { })

*  token: 注册不开启token验证，可以为空着。
 *  channelId: 你需要加入的频道ID。
 *  uid: 每个用户分配唯一UID,不能重复。

## 4.6 离开销毁 ##

RtcModule.leaveChannel((res) => { })； //离开频道
    RtcModule.destroyRtc((res) => { });    //销毁频道

## 5.总结 ##

基本重要的接口，在这里就基本上介绍完啦，如果大家还有什么疑问，可以在评论区留言！

作者：anyRTC-东慕雨

[点击查看原][Link 4]

[Link 1]: https://docs.anyrtc.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70]: /images/20221120/bfe27a46869b4d769809fd3509e8ff21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FueVJUQw_size_16_color_FFFFFF_t_70 1]: /images/20221120/012484b224f0455595dc60dfa38fc0ff.png
[Link 2]: https://github.com/anyRTC/uni-app-SDK
[Link 3]: https://www.pgyer.com/1I1B
[20201224100819612.png]: /images/20221120/36f81dc5afcc4de7bfc19ee929be1b6c.png
[Link 4]: https://juejin.cn/post/6908550550804627463