Web / H5 integration

The Web SDK requires a browser with WebAssembly support. Camera and microphone access require a secure context and user permission; see Host requirements. Validate media, autoplay and screen sharing in your target mobile browsers.

Install published packages

npm install @eduskit/ui@0.1.1 @eduskit/sdk@0.1.1 vue@^3.5.0

Custom interfaces only need @eduskit/sdk. The default UI uses Vue 3; consuming the compiled package does not require rewriting your host application in Vue. @eduskit/ui/core provides a framework-independent controller. There is no official React Default component.

UI Kit

entry is the entry configuration returned by your backend after login and enrollment checks. Call after mounting the route, then call the returned cleanup function when unmounting:

import { EduClassroom } from '@eduskit/ui';
import '@eduskit/ui/styles.css';

export function mountClassroom(container, entry) {
  const classroom = EduClassroom.mount(container, {
    appId: entry.appId,
    backendUrl: entry.backendUrl,
    classroomId: entry.classroomId,
    userId: entry.userId,
    userToken: entry.userToken,
    displayName: entry.displayName,
    themeMode: 'system',
    locale: 'zh-CN',
  });
  return () => classroom.destroy();
}

Give the container a definite height, for example width: 100%; height: 100dvh. mount initializes and enters the classroom automatically; do not call join HTTP separately. In SSR applications, import and create the SDK only in the browser mounting phase.

Vite assets

Use the exported plugin to retain DrawsKit's dynamically loaded JS/WASM assets:

import { defineConfig } from 'vite';
import { eduSdkAssets } from '@eduskit/sdk/vite';

export default defineConfig({
  plugins: [eduSdkAssets()],
});

Build and preview the production host application. Check that WASM, dynamic JS, fonts and whiteboard assets return actual files. WASM must use the correct MIME type; an SPA fallback must not return HTML for asset requests.

For npm installations, use the asset plugin above. The examples/web-classroom source example also requires the Vue compiler plugin and aliases to local whiteboard build artifacts.

Headless

The Web SDK reads classroomId and initiates entry in initialize. Register events with sdk.on('eventName', listener).

import { EduSdk } from '@eduskit/sdk';

export async function connectClassroom(entry, render, reportError) {
  const sdk = EduSdk.create({
    appId: entry.appId,
    backendUrl: entry.backendUrl,
    userToken: entry.userToken,
  });
  sdk.on('onClassInfoChanged', render);
  sdk.on('onError', reportError);
  sdk.on('onJoinProgress', (progress) => {
    console.log(progress.phase);
  });
  try {
    await sdk.initialize({
      classroomId: entry.classroomId,
      userId: entry.userId,
      displayName: entry.displayName,
    });
  } catch (error) {
    sdk.destroy();
    throw error;
  }
  return async () => {
    try {
      await sdk.leaveClassroom();
    } finally {
      sdk.destroy();
    }
  };
}

The host supplies render and reportError. Subscribe to onJoinSuccess and onJoinProgress for entry results and connection-stage status. Web installs IM and RTC adapters by default. Connect Headless whiteboard rendering through createWhiteboardAdapter; UI Kit includes this integration.

Source example

In edu-sdks, set VITE_EDUSDK_USER_ID, VITE_EDUSDK_CLASSROOM_ID, VITE_EDUSDK_USER_TOKEN and the endpoint in examples/web-classroom/.env, then run make dev-web. These demo variables enter the browser bundle and are for temporary demo tokens. Production applications obtain current-user credentials from their backend.