ZegoCloud UIKits UniApp Mobile

https://github.com/zegocloud/zego_uikit_uniapp_native
Admin
This project provides ZegoCloud UIKits for integrating real-time audio/video and instant messaging...
Tokens:5,648
Snippets:13
Trust Score:8.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Start Development Server

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/README.md

Starts the development server which watches for changes in the zego-uikit-native and zego-uikit-prebuilt-call source files. It automatically rebuilds the plugins upon detecting modifications, facilitating a rapid development cycle.

```bash
pnpm run dev
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/README.md

Installs project dependencies using pnpm and automatically builds the necessary packages for the Uniapp environment. This step ensures that the zego-uikit-native and zego-uikit-prebuilt-call packages are correctly bundled into the uni_modules directory.

```bash
pnpm i
```

--------------------------------

### uni-app Integration Guide

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/zego-uikit-prebuilt-call/readme.md

Guides on integrating the audio and video call UIKit uniapp SDK into a uni-app project. It covers environment setup, prerequisites, and the implementation flow for quick audio and video call functionality.

```APIDOC
Project Setup:
  - Create project using [uni-app documentation](https://zh.uniapp.dcloud.io/quickstart-hx.html).
  - Requires HBuilderX 3.0.0 or above.

Environment Requirements:
  - iOS:
    - Xcode 15.0 or above.
    - iOS 12.0 or above with audio/video capable device.
  - Android:
    - Android Studio 2020.3.1 or above.
    - Android SDK 25, Build-Tools 25.0.2, Platform-Tools 25.x.x or above.
    - Android 4.4 or above with audio/video capable device.
  - Device must be connected to the Internet.

Prerequisites:
  - Obtain AppID and AppSign from [ZEGO Console](https://console.zego.im) -> Project Information.
  - Contact ZEGO technical support to enable UIKit services.

Implementation Flow:
  - Follow the steps outlined in the project documentation to implement audio and video calls.
```

--------------------------------

### Build and Publish Plugins

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/README.md

Commands to build all project components and publish them to the plugin market. This process is essential for distributing the ZegoUIKit plugins for use in other Uniapp projects.

```bash
yarn build:all
```

--------------------------------

### Initialize and Join Call

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/zego-uikit-native/readme.md

Demonstrates the basic steps to initialize the ZEGO UIKit, log in with user credentials, and join a call room. It includes setting up listeners for room state changes and controlling camera and microphone.

```javascript
import { ZegoLayoutMode, ZegoViewPosition } from "@/uni_modules/zego-UIKitCore";

const appID = YOUR_APPID;
const appSign = YOUR_APPSIGN;
const userID = YOUR_USERID;
const userName = YOUR_USERNAME;
const callID = YOUR_CALLID;

const LISTENER_ID = makeListenerID() // 生成回调ID

// 初始化
await ZegoUIKit.init(appID, appSign, ZegoUIKitScenario.StandardVideoCall)

ZegoUIKit.addRoomStateChangedListener(LISTENER_ID, {
    onRoomStateChanged(roomID, reason, errorCode, jsonObject) {
        zloginfo(TAG, 'roomStateChangedListener onRoomStateChanged', roomID, reason, errorCode, jsonObject);
    },
})

// 登录
ZegoUIKit.login(userID, userName);


// 进房
ZegoUIKit.joinRoom(callID, false, (errorCode) => {
    if (errorCode === 0) {
        // 登录房间成功
        // 启动推流
        ZegoUIKit.useFrontFacingCamera(true);
        ZegoUIKit.turnCameraOn(userID, true)
        ZegoUIKit.turnMicrophoneOn(userID, true)
    } else {
        // 登录房间失败
    }
})
```

--------------------------------

### Uniapp Manifest Configuration (Cloud Plugins)

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/README.md

Configuration within the manifest.json file to select and enable cloud-based native plugins for the Uniapp application. This involves choosing the purchased ZEGO Real-time Video SDK.

```json
{
  "app": {
    "vueVersion": "3",
    "nvueCompiler": "uni-app",
    "compilerOptions": {
      "plugins": []
    },
    "plugins": {
      "__uniappx_native_plugins": [
        {
          "name": "zego-express-engine",
          "version": "*",
          "provider": "baidu"
        }
      ]
    }
  }
}
```

--------------------------------

### Uniapp Manifest Configuration (Local Plugins)

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/README.md

Configuration within the manifest.json file to select and enable local native plugins. This step is crucial for integrating the Zego ZPNs offline push SDK by pointing to the local plugin directory.

```json
{
  "app": {
    "vueVersion": "3",
    "nvueCompiler": "uni-app",
    "compilerOptions": {
      "plugins": []
    },
    "plugins": {
      "__uniappx_native_plugins": [
        {
          "name": "zego-zpns-uniapp",
          "version": "*",
          "path": "nativeplugins/zego-ZPNsUniPlugin"
        }
      ]
    }
  }
}
```

--------------------------------

### Audio Video Container Component

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/zego-uikit-native/readme.md

Shows how to use the ZegoAudioVideoContainer component in a Vue template for displaying video streams. It allows for custom rendering of avatar and foreground views.

```vue
<template>
   <view class="container fill-parent">
		<view class="fill-parent" pointer-events="auto">
			<ZegoAudioVideoContainer class="audio-video-view-container fill-parent"
				:audio-video-config="audioVideoViewConfig" :layout="layout">
				<template v-if="$slots.avatarView" #avatarView="{ userInfo }">
					<slot name="avatarView" :userInfo="userInfo"></slot>
				</template>
				<template v-if="$slots.audioVideoForeground" #audioVideoForeground="{ userInfo }">
					<slot name="audioVideoForeground" :userInfo="userInfo"></slot>
				</template>
				<template v-else #audioVideoForeground="{ userInfo }">
					<AudioVideoForegroundView :user-info="userInfo!"
						:show-camera-state-on-view="audioVideoViewConfig.showCameraStateOnView"
						:show-microphone-state-on-view="audioVideoViewConfig.showMicrophoneStateOnView"
						:show-user-name-on-view="audioVideoViewConfig.showUserNameOnView" />
				</template>
			</ZegoAudioVideoContainer>
		</view>
	</view>
</template>
```

--------------------------------

### UniApp pages.json Configuration for Call Page

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/zego-uikit-prebuilt-call/readme.md

This JSON configuration snippet shows how to add a new page entry for the 'base-call' page in the `pages.json` file. This is essential for the UniApp framework to recognize and render the new page.

```json
{
	"pages": [
        // 新增基础通话页
		{
		    "path": "pages/base-call/index",
		    "style": {
		        "navigationBarTitleText": "基础通话"
		    }
		}
	],
}
```

--------------------------------

### UniApp One-on-One Video Call Configuration

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/zego-uikit-prebuilt-call/readme.md

This Vue.js script demonstrates how to configure and use the ZegoUIKitPrebuiltCall component for a one-on-one video call in a UniApp project. It includes setting up essential parameters like AppID, UserID, CallID, and customizing various aspects of the call interface and behavior.

```vue
<template>
    <ZegoUIKitPrebuiltCall :appID="appID" :callID="callID" :appSign="appSign" :userID="userID" :userName="userName"
        :config="config">
    </ZegoUIKitPrebuiltCall>
</template>

<script>
import keyCenter from "@/common/KeyCenter";
import ZegoUIKitPrebuiltCall from "@/uni_modules/zego-PrebuiltCall/components/ZegoUIKitPrebuiltCall.nvue"
import { ZegoUIKitPrebuiltCallConfig } from "@/uni_modules/zego-PrebuiltCall"
import { ZegoLayoutMode, ZegoViewPosition } from "@/uni_modules/zego-UIKitCore";

const appID = ref(keyCenter.getAppID());
const appSign = ref(keyCenter.getAppSign());
const userID = ref(keyCenter.getUserID());
const userName = ref(keyCenter.getUserID() + '_Nick');
const callID = ref(keyCenter.getCallID());

const config: ZegoUIKitPrebuiltCallConfig = {
    ...ZegoUIKitPrebuiltCallConfig.oneOnOneVideoCall(), // 预设配置
    audioVideoViewConfig: {
        showMicrophoneStateOnView: true, // 显示麦克风状态
        showCameraStateOnView: true, // 显示摄像头状态
        showUserNameOnView: false, // 不要显示用户名
        showSoundWavesInAudioMode: false, // 关闭摄像头时, 头像四周不要显示声浪
    },
    turnOnCameraWhenJoining: true,
    turnOnMicrophoneWhenJoining: false,
    useSpeakerWhenJoining: true,
    layout: {
        mode: ZegoLayoutMode.PictureInPicture, // 画中画布局
        config: {
            smallViewPosition: ZegoViewPosition.TopLeft, // 小的视图显示在左上角
            switchLargeOrSmallViewByClick: true, // 点击小图会交换大小视图的画面
            smallViewSize: { width: 100, height: 180 }, // 设置小视图的尺寸
            smallViewBackgroundColor: '#007fff', // 蓝色
            largeViewBackgroundColor: '#ff7b00', // 橙色
        }
    },
    onHangUp: () => {
        // 挂断后返回上一页
        uni.navigateBack()
    },
};
</script>
```

--------------------------------

### UniApp Call Page Vue Component

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/zego-uikit-prebuilt-call/readme.md

This Vue component defines the structure for displaying a list of call options and handles navigation to the respective call pages. It uses `uni.navigateTo` for routing.

```vue
<template>
    <view v-for="item in list" :key="item.name" @click="navigateTo(item.url)">
        {{ item.name }}
    </view>
</template>
<script lang="ts" setup>
const list = [
    {
        name: "基础通话",
        url: "/pages/base-call/index",
    },
]
const navigateTo = (url: string) => {
    uni.navigateTo({
        url
    })
}
</script>
```

--------------------------------

### uni-sass Global Styles

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/uni_modules/uni-scss/readme.md

uni-sass provides a set of global styles for uni-ui, enabling simple page layout operations through class names and SASS variables. It helps manage common styling properties such as colors, margins, and border-radius.

```sass
/* uni-sass provides global styles for uni-ui */
/* Example usage: */
/* .uni-color-primary { color: #007bff; } */
/* .uni-margin-sm { margin: 10px; } */
/* .uni-border-radius-md { border-radius: 5px; } */
```

--------------------------------

### Uni-badge Component Usage

Source: https://github.com/zegocloud/zego_uikit_uniapp_native/blob/master/uni_modules/uni-badge/readme.md

The uni-badge component is used to display numerical badges, often in conjunction with other UI elements like lists or grids to indicate quantities. It defaults to a solid gray background.

```javascript
<!-- Example Usage -->
<template>
  <view>
    <u-badge :value="3"></u-badge>
    <u-badge :value="10" :max="9"></u-badge>
  </view>
</template>

<script>
export default {
  // Component logic here
}
</script>

<style>
/* Component styles here */
</style>
```
Tokens:
Raw