uni-app技术分享| 10分钟实现一个简易uniapp视频通话_uniapp webrtc

视频讲解

视频地址

创建 uniapp 项目

• 创建 uniapp 项目
• 前往 anyRTC 控制台-项目管理 创建新项目，获取 appid

引入插件

• 前往 uniapp插件市场搜索 anyRTC，选中anyRTC音视频SDK插件
• 云打包购买插件(免费引入)引入创建的对应uniapp 项目
• uniapp项目的 manifest.json中 App原生插件配置选择云端插件选中anyRTC音视频SDK插件`
• 打包自定义基座
• 选择自定义基座运行

代码逻辑

必须在nvue 页面中

<view class="content">
		<button class="button" type="primary" @click="stepOne">步骤一：初始化回调</button>
		<button class="button" type="primary" @click="stepTwo">步骤二：初始化实例</button>
		<button class="button" type="primary" @click="stepThree">步骤三：启用视频模块</button>
		<button class="button" type="primary" @click="stepFour">步骤四：加入频道房间</button>
		<view class="video">
			本地用户 {{localuid}} 音视频渲染
			<AR-CanvasView ref="location" style="flex: 1;" />
		</view>
		<view class="video">
			远端 {{remotenableuid}} 音视频渲染
			<AR-CanvasView ref="remotenable" style="flex: 1;" />
		</view>
	</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// rtc 音视频引入
const rtcModule = uni.requireNativePlugin('AR-RtcModule');
export default {
		data() {
			return {
				appid: "177e21c0d1641291c34e46e1198bd49a",
				channel: "123456",
				localuid: "", // 本地用户
				remotenableuid: "", // 远端用户
			}
		},
		onLoad() {

		},
		methods: {
			// 步骤一：
			stepOne() {
				rtcModule.setCallBack(res => {
					switch (res.engineEvent) {
						// 发生警告回调
						case "onWarning":
							console.log("发生警告回调", res);
							break;
							// 发生错误回调
						case "onError":
							console.log("发生错误回调", res);
							break;
							// 加入频道成功回调
						case "onJoinChannelSuccess":
							console.log("加入频道成功回调", res);
							// 本地用户视频渲染
							this.localVideo();
							break;
							// 远端用户加入当前频道回调
						case "onUserJoined":
							uni.showToast({
								title: '用户' + res.uid + '加入频道',
								icon: 'none',
								duration: 2000
							});
							break;
							// 远端用户离开当前频道回调
						case "onUserOffline":
							uni.showToast({
								title: '远端用户' + res.uid + '离开频道',
								icon: 'none',
								duration: 2000
							});
							break;
							// 已显示远端视频首帧回调
						case "onFirstRemoteVideoDecoded":
							console.log("已显示远端视频首帧回调", res);
							// 远端视频渲染
							this.remotenableVideo(res.uid);
							break;
							// 远端用户视频状态发生已变化回调
						case "onRemoteVideoStateChanged":
							console.log("远端用户视频状态发生已变化回调", res);
							break;
					}
				});
			},
			// 步骤二：
			stepTwo() {
				rtcModule.create({
					"appId": this.appid
				}, res => {
					console.log('初始化实例 rtc', res);
				});
				// 智能降噪
				// rtcModule.setParameters({
				// 	Cmd: 'SetAudioAiNoise',
				// 	Enable: 1,
				// }, (res) => {
				// 	console.log('私人定制', res);
				// });
			},
			// 步骤三：
			stepThree() {
				rtcModule.enableVideo((res) => {
					console.log('RTC 启用视频 enableVideo 方法调用', (res.code === 0 ? '成功' : '失败：') +
						res);
				});
			},
			// 步骤四：
			stepFour() {
				this.localuid = this.randomFn(6);
				rtcModule.joinChannel({
					"token": "",
					"channelId": this.channel,
					"uid": this.localuid,
				}, (res) => {
					console.log('RTC joinChannel 方法调用', (res.code === 0 ? '成功' : '失败：') + res);
				});
			},
			// 本地视频渲染
			async localVideo() {
				// 渲染视频
				await this.$refs.location.setupLocalVideo({
					"renderMode": 1,
					"channelId": this.channel,
					"uid": this.localuid,
					"mirrorMode": 0
				}, (res) => {
					console.log('渲染视频', res);
				});
				// 本地预览
				await this.$refs.location.startPreview((res) => {
					console.log('本地预览', res);
				})
			},
			async remotenableVideo(uid) {
				this.remotenableuid = uid;
				this.$refs.remotenable.setupRemoteVideo({
					"renderMode": 1,
					"channelId": this.channel,
					"uid": uid,
					"mirrorMode": 0
				}, (res) => {
					console.log('渲染视频', res);
				});
			},
			// 随机生成
			randomFn(len, charSet) {
				charSet = charSet || 'abcdefghijklmnopqrstuvwxyz0123456789';
				let randomString = '';
				for (let i = 0; i < len; i++) {
					let randomPoz = Math.floor(Math.random() * charSet.length);
					randomString += charSet.substring(randomPoz, randomPoz + 1);
				}
				return randomString;
			},
		}
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134