Uniapp implements audio and video communication

Still having trouble with uniApp audio and video communication? AnyRTC in order to meet the needs of developers, specially developed uniAPP version of audio and video communication.

AnyRTC real-time communication consists of two modules:

Real-time audio and video module – Audio and video communication
Real – time message module – signaling interaction, direct broadcast barrage communication

Let me take you to understand the real-time audio and video module first

Sample project running flow (this article uses a remote plug-in)

Go to the Uniapp plugin market
Download the sample demo
Open themanifest.jsonIf you select App native plug-in configuration => remote plug-in

Make custom pedestals
Select custom base after successful packaging
Go to Pages =>index =>index.nvue and add appID

Implement audio and video steps

Video rendering component

Must be in.nvueIn the file
Used when a video needs to be displayedAR-CanvasViewComponent, do not initially display, otherwise an error is reported
Need to set the width and height

Local video Remote video

Js related code

1. Introduce and use plug-ins

Refer to the instructions for the uni-App native plug-in

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

2. Initialize the plug-in

Initialization is performed when the page is initially loaded

Initialize the callback (monitor the callback), otherwise no callback will be received
Initialize the plug-in (fill in the APPID), otherwise the service cannot be used

Async onReady() {// Initialize callback await rtcmodule.setCallback ((res) => {switch (res.engineEvent) {case “OnWarning “: console.log(” warning “, res.warningcode); break; Case “onError”: console.log(” error “, res.errorCode); break; Case “onJoinChannelSuccess”: (local) console.log(” user “+ res.uid + “Joined successfully “); break; Case “onLeaveChannel” :(local) console.log(” user “+ res.uid + “leave channel “); break; Case “onUserJoined”: console.log(” Remote user “+ res.uid + “Join channel “); break; Case “onUserOffline”: console.log(” remote user “+ res.uid + “Off channel “); case “onUserOffline”: console.log(” remote user “+ res.uid +” off channel “); break; Case “onFirstRemoteVideoDecoded” : the console. The log (” complete remote user “+ res. Uid +” first frame video decoding “); break; . }})

/ / initialize the plug-in await RtcModule. Create ({” appId “:” * * * * * * * * * * “}, (res) = > {});

}

3. Set user roles (anchor is used in this article)

The plugin provides two role modes:

Audience (2) : Anchors can watch, but anchors cannot watch themselves
Anchor (1) : You can watch yourself on all channels

RtcModule.setClientRole({“role”: 1}, (ret) => {});

4. Join the channel

1. Use the joinChannel method to join a channel

Token: More secure authentication provided by anyRTC (it is recommended not to enable this function during development)
ChannelId: The name of the channel to which you have joined (users must join the same channel to watch each other)
Uid: user name (it is recommended to be randomly generated and cannot be the same)

RtcModule.joinChannel({“token”: “”,”channelId”: “uniappRTC”,”uid”: “666”}, (res) => {})

2. Enable the video in onJoinChannelSuccess in the monitoring callback

Use setupLocalVideo of ar-CanvasView component to render local video

This code cannot be used if the user role is an audience

Add this code to onJoinChannelSuccess

// Enable the rtcmodule. enableVideo((res) => {}); / / initialize local view this. $refs. Localvideo. SetupLocalVideo ({" renderMode ": 1," channelId ":" uniappRTC ", "uid" : "666", "mirrorMode": 0 }, (res) => {}); // Local preview rtcmodule. startPreview((res) => {});Copy the code

5. The remote user processes the monitoring callback

A remote user joins a channel

Monitor onUserJoined in the callback by monitoring

Enable ar-CanvasView remote video container

Decoded the first frame of the remote video

By monitoring the onFirstRemoteVideoDecoded rendering the remote video monitoring the callback

Add the code in the onFirstRemoteVideoDecoded

/ / initialize the remote view this. $refs. Remotevideo. SetupRemoteVideo ({" renderMode ": 1," channelId ":" uniappRTC ", "uid" : Res. The uid, "mirrorMode" : 0}, (res) = > {}) / / remote preview RtcModule startPreview ((res) = > {});Copy the code

The remote user leaves the channel

By monitoring onUserOffline in the callback

Close the AR-CanvasView remote video container

6. Leave the channel (hang up)

Leave the channel

RtcModule.leaveChannel((res) => {})
Destroying plug-in instances

You can manipulate presentations on a page without destroying instances

RtcModule.destroyRtc((res) => {})
Copy the code

Results show

When entering the host terminal, you can make video calls for single or multiple users by entering the same room number.

As is shown in

The visitor side can only be viewed and will not be displayed on the home screen.