Uniapp realizes audio and video communication
Are you still worried about uniapp's audio and video communications? In order to meet the needs of developers, anyRTC has specially developed uniapp version of audio and video communication.
anyRTC real-time communication includes two modules:
- Real-time audio and video module-audio and video communication
- Real-time messaging module-signaling interaction, barrage and other communications in the live broadcast room
Let me take you first to understand the real-time audio and video module
Sample project running process (this article uses remote plug-ins)
-
Go to the uniapp plugin market
-
Download sample demo
-
Open the
manifest.jsonfile, select App native plug-in configuration => remote plug-in
-
Make a custom base
-
After successfully packaging, select a custom base
- Find pages => index =>index.nvue, add appid
Steps to achieve audio and video
Video rendering component
- You must be in the
.nvuefile - In use when you need to display video
AR-CanvasViewcomponent, do not initially displayed, otherwise an error - Need to set width and height
<view>本地视频</view>
<view v-if>
<AR-CanvasView :ref="localvideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
<view>远端视频</view>
<view v-if>
<AR-CanvasView :ref="remotevideo" style="height:100px;width:100px"></AR-CanvasView>
</view>
js related code
1. Introduce and use plug-ins
Refer to the instructions for using uni-app native plug-in
const RtcModule = uni.requireNativePlugin('AR-RtcModule');
2. Plug-in initialization
Initialize when the page is initially loaded
- Initialize callback (monitor callback), otherwise no callback will be received
- Initialize the plugin (fill in appid), otherwise the service cannot be used
// 页面初始加载(uniapp 生命周期)
async onReady() {
// 初始化回调
await RtcModule.setCallBack((res) => {
switch (res.engineEvent) {
case "onWarning":
console.log("警告", res.warningCode);
break;
case "onError":
console.log("错误", res.errorCode);
break;
case "onJoinChannelSuccess": (本地)
console.log("用户"+ res.uid + "加入成功");
break;
case "onLeaveChannel":（本地）
console.log("用户"+ res.uid + "离开频道");
break;
case "onUserJoined":
console.log("远端用户"+ res.uid + "加入频道");
break;
case "onUserOffline":
console.log("远端用户"+ res.uid + "离开频道");
break;
case "onFirstRemoteVideoDecoded":
console.log("完成远端用户"+ res.uid + "视频首帧解码");
break;
...
}
})
// 初始化插件
await RtcModule.create({
"appId": "**********"}, (res) => {
});
}
3. Set user roles (an anchor is used in this article)
The plug-in provides two role modes:
- Audience (2): Can watch the host, but the host cannot watch himself
- 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 the channel
- token: more secure authentication provided by anyRTC (suggest not to enable it during development)
- channelId: the name of the channel to join (users need to join the same channel to watch each other)
- uid: user name (recommended to be randomly generated, not the same)
RtcModule.joinChannel({
"token": "","channelId": "uniappRTC","uid": "666"}, (res) => {
})
2. Monitoring the callback onJoinChannelSuccessenabled video
Use AR-CanvasView component to setupLocalVideorender local video
If the user role is in the audience, this code cannot be used
In the onJoinChannelSuccessyears to join the code
// 启用视频模块
RtcModule.enableVideo((res) => {
});
// 初始化本地视图
this.$refs.localvideo.setupLocalVideo({
"renderMode": 1,
"channelId": "uniappRTC",
"uid": "666",
"mirrorMode": 0
}, (res) => {
});
// 本地预览
RtcModule.startPreview((res) => {
});
5. Remote users are processed through monitoring callbacks
Remote users join the channel
Through monitoring to monitor the callback onUserJoined
Enable AR-CanvasView remote video container
Complete the decoding of the first frame of the remote video
By monitoring monitoring callback of onFirstRemoteVideoDecodedrendering the distal video
In the onFirstRemoteVideoDecodedyears to join the code
// 初始化远端视图
this.$refs.remotevideo.setupRemoteVideo({
"renderMode": 1,
"channelId": "uniappRTC",
"uid": res.uid,
"mirrorMode": 0
}, (res) => {
})
// 远端预览
RtcModule.startPreview((res) => {
});
The remote user leaves the channel
By monitoring the callback onUserOffline
Close AR-CanvasView remote video container
6. Leave the channel (hang up)
- Leave channel
RtcModule.leaveChannel((res) => {
})
- Destroy the plugin instance
Operation display on a page can not destroy the instance
RtcModule.destroyRtc((res) => {
})
Show results
When entering the host terminal, you can make a single or multi-person video call, just enter the same room number.
as the picture shows
Visitors can only browse, and will not be displayed on the main screen.
as the picture shows
Integrated help
You can follow the example project to perform the above process operations. If you need help during the integration, you can contact the company's customer service through the contact information in the plug-in market