Uniapp uses the original child form for video chat

At present, most of the real-time audio and video chat apps developed by UniApp are developed on the NVUE page. While the difference between NVUE and VUE is not that great, there are differences.

After carefully checking the official website of Uniapp, we found that we can use the original child form for development. We can encapsulate the whole video chat into a original child form for easy transplantation.

First, the original form subNVue

The subNVue page communicates with the VUE page to inform the VUE page of user operations. Or data and status updates to subNVue via the VUE page. SubNVue communicates with nvUE pages as well as vUE pages.

Communication implementation mode

// Register event listening methods on the subNVue/vue page
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    vm.title = data.title;  
    vm.content = data.content;  
})  

// Trigger an event on the subNVue/vue page
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: 'I'm a title',  
    content: 'I'm data content'  
});
Copy the code

Storage location and related configurations

Because you want to encapsulate the entire module, it is recommended to place it under paltForm \ app-plus-subnvue, the outermost layer of the Pages file.

Specific to view website ask.dcloud.net.cn/article/359…

Second, the development of

(1) Introduce video chat plug-in

1. Use the UniApp plug-in provided by anyRTC

• AnyRTC audio and video SDK plug-in
• AnyRTC real-time message SDK plug-in

2. Register an anyRTC account and create an application to obtain the AppID
3. Make custom pedestals

(2) Configure the original form subNVue

• File location

• inpages.jsonThe configuration in

(3) Simple implementation

<script>
	// Introduce the RTC plug-in
	const RtcModule = uni.requireNativePlugin('AR-RtcModule');
	// Import the original form
	const subNVueLocation = uni.getSubNVueById('LocationCanvasView');
	const subNVueRemote = uni.getSubNVueById('RemoteCanvasView');
	export default {
		data() {
			return {
				appid: "2437529dd3ae7e238a7617c61f22daee",
				channel: "",
				uid: "",
				canvasView: {
					typeOption: "location".// Local/remote}}; },// Accept page parameters
		onLoad(option) {
			/ / channel
			this.channel = option.channel;
			/ / user
			this.uid = option.uid;
		},
		mounted() {
			this.init()
		},
		methods: {
			/ / initialization
			async init(a) {
				// Initialize callback
				await RtcModule.setCallBack(event => {
					switch (event.engineEvent) {
						case "onWarning":
							console.log("onWarning", event);
							break;
						case "onError":
							console.log("onError", event);
							break;
						case "onJoinChannelSuccess": // The user succeeded in joining
							console.log("User" + event.uid + "Join successful");	
							
							this.localAudioVideoFn()
							break;
						case "onLeaveChannel": // Leave channel callback

							break;
						case "onUserJoined": // Remote user joins current channel callback.
							// this.promptFn("info", "remote user joins current channel callback ");

							break;
						case "onUserOffline": // Remote user leaving the current channel callback.

							break;

						case "onFirstLocalAudioFrame": // A callback for the first frame of local audio has been sent. (Add audio to page)
							break;
						case "onFirstLocalVideoFrame": // The callback for the first frame of the local video is displayed. (Add local video to page)
							// this.promptFn("error", "callback for first frame of local video displayed ");
							break;
						case "onFirstRemoteVideoDecoded": // The first frame decoding callback of the remote video has been completed. (Add remote video to the page)
							// this.promptFn("info", "remote video first frame decoding callback completed ");
							this.remoteAudioVideoFn(event.uid, this.channel);
							break; }});// Initialize the appID
				await RtcModule.create({
					"appId": this.appid
				}, (res) => {});

				// Set the user role anchor in the live broadcast scenario
				await RtcModule.setClientRole({
					"role": 1
				}, (ret) => {});

				// Join the room
				await RtcModule.joinChannel({
					"token": ""."channelId": this.channel,
					"uid": this.uid
				}, (res) => {})
				// Hide the original form
				subNVueLocation.hide();
				subNVueRemote.hide();
			},
			// Collect video
			async localAudioVideoFn(a) {
				// Collect local video
				this.canvasView = await Object.assign(this.canvasView, {
					channelId: this.channel,
					uid: this.uid,
					RtcModule
				})
				// Open the local video Container subform
				await subNVueLocation.show();
				await uni.$emit('LocationCanvasViewFn'.this.canvasView);
			},
			// Remote video rendering
			async remoteAudioVideoFn(uid, channelId) {
				// Get nvUE child form by id
				this.open2 = true;
				// Open the remote video Container child form
				await subNVueRemote.show();
				await uni.$emit('RemoteCanvasViewFn', {
					uid,
					channelId,
					typeOption: "remote"
				});
			}
		}
	}
</script>

Copy the code

(4) The real machine is running

Simple use of the original form has been achieved, next time with you to encapsulate the audio and video into a original form, we should pay more attention to yo!