Abstract: A set of code, application of multiple platforms, to meet the needs of enterprises to quickly incubate hot products.
RTC SDK development team
For many small and medium-sized enterprises or pioneering projects, in the initial stage of product development and design, the priority is to meet the needs of rapid development, rapid iteration and improvement of business logic. However, traditional native App development is relatively slow in iteration, high ratio of staff and high cost of capital, so a simple, easy to use framework with excellent cross-performance becomes very necessary.
Uni-app is an official framework of DCloud that uses vue. js to develop all front-end applications. Developers write a set of code, which can be published to iOS, Android, Web, various small programs, quick applications and other platforms. It meets the needs of enterprises to quickly incubate hot products.
Prior to this, we launched the Express native plug-in for uni-App platform, supporting iOS and Android, to meet the needs of customers. However, due to the weak typed nature of JavaScript interface itself is not so user-friendly to customers, which increases the chance of error, so we optimized it. A full TypeScript refactoring of the interface, with full type constraints, support for Promise, and a full 1.0.0 release, makes the interface clearer and easier to use.
Main functional modules:
-
Basic real-time audio and video capabilities
-
Common Video Configuration
-
Room real-time message
-
Push-pull flow information monitoring
-
Codec and layered coding
-
Media player
-
Flow control and other advanced functions
Next, take a look at how to use it:
The preparatory work
-
ZEGO Developer Account (registered via ZEGO official website)
-
HBuilderX 3.0.5 and above
-
IOS 9.0 or later
-
Android 4.1 and later
-
IOS /Android real phone (or emulator with audio and video support)
Quick access to the
Apply for ZEGO AppID
Log in to the ZEGO official website to register an account, select a scenario based on your service requirements, and obtain the AppID and AppSign for engine initialization.
Create the Uni-app project
Use uni-App official IDE HBuilder to create uni-App type projects.
Obtain ZegoExpressEngine uniapp SDK
Get plugins from uniApp plugin market or ZEGO website and introduce the plugins into the project
Download the “JS package layer” code and introduce the project
ZEGO provides uni-App JS package layer interface, unifying the native SDK interfaces on both iOS and Android, eliminating the need to jump back and forth between native and front-end. Developers only need JS technology stack to develop audio and video applications on various platforms, providing smes with fast and low-cost access.
Download address
Storage. Zego. Im/express/vid…
Introduce the above “JS wrapper layer” into the UniApp project
Basic push-pull flow function realization
Initialize engine
import ZegoExpressEngine from 'zego-express-video-uniapp/lib/ZegoExpressEngine'; import { ZegoScenario } from 'zego-express-video-uniapp/lib/impl/ZegoExpressDefines' ZegoExpressEngine. CreateEngine (AppID AppSign, false, ZegoScenario. General);Copy the code
Log in to the room
ZegoExpressEngine.instance().loginRoom(t"room1", { userID: "user_id", userName: "user_name" });
Copy the code
Enable audio and video calls
After successfully logging in to the room, call startPreview to enable audio and video:
<template> <zego-local-view></zego-local-view> </template> ZegoExpressEngine.instance().startPreview();Copy the code
Push local video to the cloud
// Push streamID set by user let publishStreamID = 'publish-stream-1 '; ZegoExpressEngine.instance().startPublishingStream(publishStreamID);Copy the code
Pull other users audio and video
After logging in, you can actively monitor roomStreamUpdate and pull the audio and video streams launched by other users:
<template> <zego-remote-view :streamID="playStreamID" ></zego-remote-view> </template>... // Listen for roomStreamUpdate ZegoExpressEngine.instance().on('roomStreamUpdate', (roomID, updateType, streamList) => { this.playStreamID = streamList[0].streamID; }); ...... / / pull the StreamID audio-visual ZegoExpressEngine. The instance () startPlayingStream (enclosing playStreamID);Copy the code
Out of the room
/ / ZegoExpressEngine exit the room. The instance () logoutRoom (' room1 ');Copy the code
Destruction of the engine
/ / to exit the room ZegoExpressEngine. DestroyEngine ();Copy the code
Matters needing attention
To enable audio and video calls, you need to apply for permission configuration for microphone and camera in manifest.json of uniApp project.
When using the video function, the page must be built with. Nvue file, because the uniApp. Vue page is built with webView on the native end (iOS, Android), and does not support component plug-in
Please refer to
Nativesupport.dcloud.net.cn/NativePlugi…
conclusion
This gives you the flexibility to use the ZEGO Express SDK to give your UNI-App great basic audio and video capabilities.
For more advanced features, please refer to the official ZEGO documentation and sample source code (doc-zh.zego.im/article/777…