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:

  1. Basic real-time audio and video capabilities

  2. Common Video Configuration

  3. Room real-time message

  4. Push-pull flow information monitoring

  5. Codec and layered coding

  6. Media player

  7. 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…