Web UI SDK integration

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

Tech stack

Vue 3
TypeScript
Vite
Element Plus
Pinia
Vue Router
SCSS

Project structure

├── 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

# 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/                	
│   ├── cpn/ 
│      ├── Login.vue     #Login page component
│      ├── Register.vue 	#Registration page component
│   ├── index.vue       #Login entry

Home page

├── 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

├── 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