UI Kit and custom interfaces

Integration choices

Choice	Host owns	SDK owns
Official UI Kit	Business login, entry configuration, page presentation/dismissal and host permissions	Classroom layout, controls, subscriptions, state display and internal cleanup
Headless custom UI	Views, subscriptions, video/whiteboard mounting and lifecycle cleanup	Classroom state, permission policy, entry/exit and provider orchestration

Web uses Vue 3, Android uses Compose, iOS uses SwiftUI/UIKit and Qt uses Qt Widgets. Electron reuses Web UI. See Client SDK overview for installation and entry points.

Web controller

ClassroomController from @eduskit/ui/core supports non-Vue views. entry uses Web classroom Options; render is your view-update function:

import { ClassroomController } from '@eduskit/ui/core';

const controller = ClassroomController.create(entry);
const unsubscribe = controller.subscribe((snapshot) => {
  render(snapshot);
});
await controller.initialize();
// On route unmount:
unsubscribe();
controller.destroy();

Read classroom state and permissions from snapshot; the SDK handles IM deduplication. With Headless, use the client APIs to subscribe and read state.

Theme and language

Web Options support themeMode: 'system' | 'light' | 'dark', locale and messages. Update them with controller setThemeMode and setLocale. Built-in locales are zh-CN and en-US.

Android and iOS use EduThemeMode and localeTag. Follow each platform's constructors and enums instead of passing Web configuration objects to native SDKs.

Operations and state

A successful mute/unmute command means the request was accepted. Display actual device state from stream callbacks. Re-read interaction policies after permissions, stage membership or classroom state change.

getClassroomInteractionPolicy() returns available and reason. Explain disabled permissions explicitly, and explain waiting, ended-class or unavailable-capability restrictions according to the current state. Keep an action available to close devices that are already open.