uni-app技術分享| 10分鍾實現一個簡易uniapp視頻通話

視頻講解

視頻地址

創建 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>

// 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;
			},
		}
	}