@trtc/calls-uikit-wx-uniapp

@trtc/calls-uikit-wx-uniapp-engine

TUICallKit WeChat mini-program UIKit for UniApp (Vue 3 + @trtc/call-engine-lite-wx).

Provides composable hooks, call service logic, Vue components, and static assets for building 1v1 and group audio/video call experiences on WeChat mini-programs via UniApp.

Installation

pnpm add @trtc/calls-uikit-wx-uniapp-engine

Peer Dependencies

This package requires the following peer dependencies to be installed:

pnpm add @trtc/call-engine-lite-wx @trtc/call-ring-wx @tencentcloud/lite-chat @tencentcloud/trtc-component-uniapp vue

Usage

Login

import { useLoginState } from '@trtc/calls-uikit-wx-uniapp-engine';

const { login, logout, loginUserInfo } = useLoginState();

await login({ userId: 'user1', userSig: '...', sdkAppId: 12345678 });

Call

import { useCallListState, useCallParticipantState, useDeviceState } from '@trtc/calls-uikit-wx-uniapp-engine';
import { CallMediaType } from '@trtc/call-engine-lite-wx';

const { calls, accept, reject, hangup, mediaType, duration } = useCallListState();
const { callParticipantInfo } = useCallParticipantState();
const { openLocalCamera, closeLocalCamera, switchCamera } = useDeviceState();

// Initiate a call
await calls({ userIDList: ['user2'], type: CallMediaType.VIDEO });

Vue Components

The package ships Vue SFC components as source files for the UniApp build toolchain:

<script setup>
import CallView from '@trtc/calls-uikit-wx-uniapp-engine/src/components/CallView/CallView.vue';
import GroupCallView from '@trtc/calls-uikit-wx-uniapp-engine/src/plugin/groupCall/components/GroupCallView.vue';
</script>

<template>
  <CallView />
  <GroupCallView />
</template>

UI Customization

import { TUICallKitAPI, FeatureButton, LayoutMode } from '@trtc/calls-uikit-wx-uniapp-engine';

// Hide the switch-camera button
TUICallKitAPI.hideFeatureButton(FeatureButton.SwitchCamera);

// Set layout mode
TUICallKitAPI.setLayoutMode(LayoutMode.LocalInLargeView);

// Set background images
TUICallKitAPI.setLocalViewBackgroundImage('https://example.com/bg.png');
TUICallKitAPI.setRemoteViewBackgroundImage('*', 'https://example.com/remote-bg.png');

Architecture

src/
├── index.ts                    # Main entry (composable hooks + exports)
├── index.d.ts                  # Type definitions
├── states/
│   ├── CallListState.ts        # Call operations composable
│   ├── CallParticipantState.ts # Participant info composable
│   ├── DeviceState.ts          # Device control composable
│   ├── UIConfigState.ts        # UI config composable
│   ├── LoginState.ts           # Login/logout composable
│   └── TUICallService/         # Core call service (singleton)
├── components/
│   ├── Avatar/Avatar.vue       # Avatar component
│   ├── CallView/CallView.vue   # 1v1 call view
├── plugin/
│   ├── ring/                           # Ring plugin
│   └── groupCall/                      # Group call plugin
│       ├── components/
│       │   └── GroupCallView.vue       # Group call view
├── constants/                  # Enums and constants
├── types/                      # TypeScript interfaces
├── utils/                      # Utilities (permission, format, etc.)
├── TUIBridge/                  # Event bus for Chat integration
└── assets/                     # Static images (svg, png)

Build

pnpm build

Produces:

• dist/index.esm.mjs — ES Module
• dist/index.cjs.js — CommonJS
• dist/index.mp.js — Minified CJS for mini-program
• dist/components/ — Vue SFC source files
• dist/assets/ — Static assets

License

MIT