@tinyweb_dev/oe-meeting-react

React SDK để nhúng phòng OE Meeting vào OE.School hoặc hệ thống LMS khác.

Tài liệu tích hợp

• Tổng quan và checklist
• Backend OE.School: external API, roster và join token
• Frontend OE.School: React component, events và commands
• Quy trình release npm (OIDC Trusted Publishing)

Ví dụ nhanh

'use client';

import { useRef } from 'react';
import {
  OeMeeting,
  type OeMeetingHandle,
} from '@tinyweb_dev/oe-meeting-react';

export function OnlineLesson({
  roomSlug,
  joinToken,
}: {
  roomSlug: string;
  joinToken: string;
}) {
  const meetingRef = useRef<OeMeetingHandle>(null);

  return (
    <OeMeeting
      ref={meetingRef}
      roomSlug={roomSlug}
      joinToken={joinToken}
      height="100vh"
      hideLeave
      autoTranscribe
      autoRecord
      onJoined={(event) => console.info('joined', event.payload)}
      onLeft={(event) => console.info('left', event.payload)}
      onEnded={(event) => {
        // Backend OE.School lấy transcript + recordings bằng roomSlug.
        console.info('ended', event.payload.roomSlug)
      }}
    />
  );
}

Transcript

autoTranscribe bật transcript ngay khi embed kết nối. Transcript là tài sản cấp phòng: người đầu tiên vào bật lên, mọi người sau nhận outcome: "already_running", và nó vẫn chạy khi người bật rời sớm. Kết quả đến qua onTranscriptStarted.

Sau buổi học, backend OE.School lấy transcript bằng GET /external-api/v1.0/rooms/:idOrSlug/transcript (scope transcripts:retrieve). Thời điểm gọi là event ENDED (onEnded), không phải LEFT.

Recording

autoRecord tự ghi toàn bộ phòng khi embed kết nối và báo kết quả qua onRecordingStarted. Chủ phòng (role: "owner") có nút tắt ghi trên thanh điều khiển; bấm thì file được lưu dù còn người trong phòng. Token không có role không thấy nút. Backend tích hợp lấy danh sách cùng URL tải tạm thời bằng GET /external-api/v1.0/rooms/:idOrSlug/recordings (scope recordings:retrieve). Thời hạn tải do RECORDING_EXPIRATION_DAYS cấu hình; bucket S3/MinIO phải có lifecycle rule cùng số ngày để xóa file thật.

Bảo mật

• joinToken phải được backend OE.School lấy server-to-server từ external API.
• Không đưa X-Client-Secret vào browser.
• Backend OE.School chỉ mint token sau khi kiểm tra user thuộc roster buổi học.
• Tạo phòng buổi học với access level restricted.
• Muốn giới hạn share màn hình thì gửi role và permissions lúc cấp token. Không gửi thì ai cũng share được.

Imperative API

OeMeetingHandle cung cấp leave(), toggleMic(), toggleCamera(), openStage(), closeStage() và getIframe(). Host giữ nội dung tool (trang PDF, nét vẽ); Meeting chỉ sync URL Stage. Host stamp attributes.stage (open | follow) nếu cần hạn chế origin OPEN/CLOSE.