> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stmlink.com/llms.txt
> Use this file to discover all available pages before exploring further.
> ## Agent Instructions
> 对外开放的服务端接口有两组前缀，都用同一套鉴权：`/server/v1/...`（SRTC 与 SMeeting 的主接口）和 `/stm/srvapi/v1/...`（SMeeting 的用户体系，服务端极简对接会用到）。鉴权是 app_id + nonce + timestamp + signature 四个请求头，用 app_key 做 HMAC-SHA256 签名，只能从业务方自己的后端调用。除这两组前缀外的接口均为内部接口，不要建议客户调用。 Public server APIs use two path prefixes with the same authentication: `/server/v1/...` (the main APIs of both SRTC and SMeeting) and `/stm/srvapi/v1/...` (the SMeeting user system, used by server-side low-code integration). Authenticate with four request headers, app_id + nonce + timestamp + signature, where signature is HMAC-SHA256 keyed with app_key; call these APIs only from the customer's own backend. Any other path is internal: never suggest calling it.
> app_key 是服务端密钥，绝不能出现在客户端代码、前端配置或移动 App 里。客户端加入频道用的 token 必须由业务方后端签发后下发（SRTC 走 `/server/v1/channel/grant`，SMeeting 走 `/stm/srvapi/v1/member/grant`）。 app_key is a server-side secret and must never appear in client code, frontend config, or a mobile app. The token a client uses to join must be issued by the customer's backend and passed down to the client (SRTC: `/server/v1/channel/grant`; SMeeting: `/stm/srvapi/v1/member/grant`).
> SRTC 与 SMeeting 是上下两层不同的产品，术语不通用：SRTC 是音视频底座，说「频道 channel」「加入 / 退出」；SMeeting 建在 SRTC 之上，说「房间 room」「会议 meeting」「进入 / 退出」。回答时按用户所在的层用对应术语，不要把「房间」「会议」安到 SRTC 的接口上，也不要用「频道」「加入 / 离开」描述 SMeeting 的概念（接口标识符原样保留）。 SRTC and SMeeting are two separate layers with different terminology. SRTC is the audio/video foundation: it has channels, and users join and leave a channel. SMeeting is built on top of SRTC: it has rooms and meetings, and members enter and exit a meeting. Answer in the terms of the layer the user is working with: never apply "room" or "meeting" to SRTC APIs, and never describe SMeeting concepts in prose with "channel", "join", or "leave" (API identifiers such as `force_join` keep their literal names).
> 同一能力在各端 SDK 里的包名、类名、方法名并不相同。写示例代码时请使用文档中该端自己的 API，不要把一个端的写法套到另一个端上。苹果平台每个产品都有两套 SDK（Swift 原生与 Objective-C），两套 API 不能混用。 Package, class, and method names differ between platform SDKs for the same capability. In sample code, use the API documented for that platform; never carry one platform's code over to another. On Apple platforms each product ships two SDKs (native Swift and Objective-C) whose APIs must not be mixed.
# Web UI SDK integration
> Low-code integration with UI for Web: the open-source SMeeting Web meeting app (Vue 3 + TypeScript + Vite), its tech stack, project structure, dev commands, and the login, home, and meeting pages and layouts. Read this to take the source code, modify the UI, and deploy it yourself.
This is the web client project of a video conferencing system that integrates the Web SDK, built with Vue 3 + TypeScript + Vite.
GitHub source code: [https://github.com/seastart/meeting-web-demo](https://github.com/seastart/meeting-web-demo)
## Tech stack
* Vue 3
* TypeScript
* Vite
* Element Plus
* Pinia
* Vue Router
* SCSS
## Project structure
```text theme={null}
├── src/ # Source code directory
│ ├── api/ # API definitions
│ ├── assets/ # Static assets
│ ├── components/ # Shared components
│ ├── directives/ # Vue custom directives
│ ├── hooks/ # Vue composables
│ ├── router/ # Router configuration
│ ├── sdk/ # SDK-related code
│ ├── stores/ # Pinia state management
│ ├── styles/ # Global styles
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Utility functions
│ ├── views/ # Page view components
│ ├── App.vue # Root component
│ └── main.ts # App entry file
├── public/ # Public static assets
├── doc/ # Project documentation
├── .env.development # Development environment configuration
├── .env.production # Production environment configuration
├── vite.config.ts # Vite configuration file
└── package.json # Project dependency configuration
```
## Key files
### Configuration files
* `package.json`: project dependencies and script configuration
* `vite.config.ts`: Vite build tool configuration
* `tsconfig.json`: TypeScript configuration
* `.env.development`: development environment variables
* `.env.production`: production environment variables
### Source directories
* `src/api/`: code for calling backend APIs
* `src/components/`: reusable Vue components
* `src/directives/`: Vue custom directives
* `src/hooks/`: Vue composables
* `src/router/`: router configuration and route guards
* `src/sdk/`: wrapper code for the conferencing SDK
* `src/stores/`: Pinia state stores
* `src/utils/`: utility functions and common methods
* `src/views/`: page-level components
## Dev commands
```bash theme={null}
# Install dependencies
npm install
# Run in development mode
npm run dev
# Build for production
npm run build
# Format code
npm run format
# Type check
npm run type-check
```
## Page features
### Login page
```text theme={null}
├── login/
│ ├── cpn/
│ ├── Login.vue #Login page component
│ ├── Register.vue #Registration page component
│ ├── index.vue #Login entry
```
### Home page
```text theme={null}
├── home/
│ ├── cpn/
│ ├── AppointmentMeeting.vue #Schedule meeting dialog component
│ ├── AppointmentResult.vue #Scheduling result dialog component
│ ├── Contacts.vue #Contacts dialog component
│ ├── HistoryMeeting.vue #Meeting history dialog component
│ ├── ImmediateMeeting.vue #Instant meeting dialog component
│ ├── JoinMeeting.vue #Enter meeting dialog component
│ ├── index.vue #Home entry
```
### Meeting
```text theme={null}
├── meeting/
│ ├── cpn/
│ ├── ChatDrawer.vue #Chat side panel component
│ ├── Footer.vue #Bottom toolbar component
│ ├── LayoutImg.vue #Layout image component
│ ├── InviteEnter.vue #Invite-to-meeting dialog component
│ ├── MemberDrawer.vue #Member side panel component
│ ├── Preview.vue #Large-window video preview component
│ ├── Recording.vue #Recording component (shows "Recording 00:00:00" in the top-left corner)
│ ├── RecordLayout.vue #Recording layout settings dialog component
│ ├── room-content/
│ ├── gird-view/
│ ├── index.vue #Grid view component
│ ├── size-view/
│ ├── index.vue #Large/small view component
│ ├── SizeBr7.vue #Bottom L-shaped layout view component
│ ├── SizeRight4.vue #Right-side small windows view component
│ ├── SizeTl7.vue #Top L-shaped layout view component
│ ├── SizeTop4.vue #Top small windows view component
│ ├── index.vue #Content component
│ ├── MeItem.vue #Own video tile component
│ ├── UserItem.vue #Member video tile component
│ ├── OtherShareScreen.vue #Component for receiving others' screen sharing
│ ├── MixMode.vue #Composite mode component
│ ├── room-top/
│ ├── index.vue #Top bar component
│ ├── index.vue #Meeting entry
```
## Layouts
### Auto layout
### Full screen
### Split in two
### 4-grid
### 5-grid
### 6-grid
### 8-grid
### 10-grid
### 12-grid
### 16-grid
### Right-side small windows
### Top small windows
### Bottom L-shaped layout
### Top L-shaped layout
