Web / H5 集成

Web SDK 需要支持 WebAssembly 的浏览器。摄像头和麦克风需要安全上下文及用户授权，详见宿主权限与网络。H5 的媒体、自动播放及屏幕共享能力需在目标浏览器验证。

安装发布包

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

自绘界面只需 @eduskit/sdk。UI Kit 的默认界面使用 Vue 3；安装编译后的 npm 包时无需将宿主应用整体改为 Vue。@eduskit/ui/core 提供框架无关控制器，尚无官方 React Default 组件。

UI Kit

entry 是经过业务登录和选课校验后由业务后端返回的进课配置。在路由页面挂载后调用，保存返回的清理函数并在路由卸载时调用：

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();
}

容器必须具有明确高度，例如 width: 100%; height: 100dvh。mount 会自行初始化并进课，业务无需再调用 join HTTP。SSR 工程只在浏览器挂载阶段导入并创建 SDK。

Vite 静态资源

使用 SDK 导出的插件保留 DrawsKit 动态加载的 JS/WASM 文件：

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

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

上线前执行宿主应用的生产构建和预览，确认 Network 中 .wasm、动态 JS、字体和白板资源均返回实际文件。WASM 需正确的 MIME 类型；不能由 SPA fallback 返回 HTML。

从 npm 安装时使用上述资源插件。源码示例 examples/web-classroom 还需要 Vue 编译插件，以及指向本地白板构建产物的路径别名。

Headless

Web SDK 通过 initialize 接收 classroomId 并发起进课。使用 sdk.on('事件名', 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();
    }
  };
}

render、reportError 由宿主实现。订阅 onJoinSuccess 和 onJoinProgress 获取进课结果及各连接阶段的状态。Web 默认装配 IM、RTC；Headless 白板渲染通过 createWhiteboardAdapter 接入，官方 UI Kit 已包含该连接。

本地源码示例

在 edu-sdks 仓库配置 examples/web-classroom/.env 的 VITE_EDUSDK_USER_ID、VITE_EDUSDK_CLASSROOM_ID、VITE_EDUSDK_USER_TOKEN 及环境地址，再运行 make dev-web。这些演示变量会进入浏览器，仅适合临时演示 Token；正式应用从业务接口获取当前用户凭证。