Разработка системы вебинаров для LMS (интеграция с видеоконференциями)

Разработка системы вебинаров для LMS (интеграция с видеоконференциями)

Вебинарная система в LMS — это не просто ссылка на Zoom. Полноценная интеграция включает создание комнат через API, автоматическую отправку ссылок студентам, контроль посещаемости, запись вебинаров и сохранение записей в материалах курса.

Выбор видеоплатформы

BigBlueButton — рекомендуется для образовательных LMS: встроенный whiteboard, polls, breakout rooms, запись с разбивкой по участникам. Self-hosted.

Zoom — если клиенты уже им пользуются и не хотят менять привычки.

Daily.co — если нужно встроить видео прямо в интерфейс LMS без перехода на внешний сайт.

Интеграция с Zoom API

class ZoomIntegration {
  constructor(accountId, clientId, clientSecret) {
    this.tokenUrl = 'https://zoom.us/oauth/token';
    this.apiUrl = 'https://api.zoom.us/v2';
    this.credentials = { accountId, clientId, clientSecret };
  }

  async getAccessToken() {
    const response = await fetch(this.tokenUrl, {
      method: 'POST',
      headers: {
        'Authorization': `Basic ${Buffer.from(`${this.credentials.clientId}:${this.credentials.clientSecret}`).toString('base64')}`,
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `grant_type=account_credentials&account_id=${this.credentials.accountId}`,
    });
    const data = await response.json();
    return data.access_token;
  }

  async createMeeting({ topic, startTime, durationMin, agenda, hostEmail }) {
    const token = await this.getAccessToken();
    const response = await fetch(`${this.apiUrl}/users/${hostEmail}/meetings`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        topic,
        type: 2, // Scheduled meeting
        start_time: startTime.toISOString(),
        duration: durationMin,
        agenda,
        settings: {
          host_video: true,
          participant_video: false,
          waiting_room: true,
          auto_recording: 'cloud',
          mute_upon_entry: true,
          approval_type: 0, // Автоматическое подтверждение
        },
      }),
    });
    return response.json(); // { id, join_url, start_url, password }
  }
}

Интеграция с BigBlueButton

BBB имеет простой REST API на основе checksum:

class BigBlueButtonService {
    private string $url;
    private string $secret;

    public function createMeeting(string $meetingId, string $name, array $options = []): array {
        $params = array_merge([
            'meetingID' => $meetingId,
            'name' => $name,
            'record' => 'true',
            'autoStartRecording' => 'false',
            'allowStartStopRecording' => 'true',
            'webcamsOnlyForModerator' => 'false',
            'lockSettingsDisableMic' => 'false',
        ], $options);

        $queryString = http_build_query($params);
        $checksum = sha1('create' . $queryString . $this->secret);
        $params['checksum'] = $checksum;

        $response = Http::get("{$this->url}/api/create", $params);
        return $response->json();
    }

    public function getJoinUrl(string $meetingId, string $fullName, string $role, string $userId): string {
        $password = $role === 'moderator' ? $this->moderatorPw : $this->attendeePw;
        $params = "meetingID={$meetingId}&fullName=" . urlencode($fullName) .
                  "&password={$password}&userID={$userId}";
        $checksum = sha1('join' . $params . $this->secret);
        return "{$this->url}/api/join?{$params}&checksum={$checksum}";
    }
}

Отслеживание посещаемости

Zoom Webhooks отправляют события meeting.participant_joined и meeting.participant_left. BigBlueButton предоставляет детальные логи через Recording API.

// Zoom webhook обработчик
app.post('/webhooks/zoom', async (req, res) => {
  const { event, payload } = req.body;

  if (event === 'meeting.participant_joined') {
    await db.webinarAttendance.upsert({
      webinarId: payload.object.id,
      userId: await findUserByEmail(payload.object.participant.email),
      joinedAt: new Date(payload.object.participant.join_time),
    });
  }

  if (event === 'meeting.participant_left') {
    await db.webinarAttendance.update({
      webinarId: payload.object.id,
      userId: await findUserByEmail(payload.object.participant.email),
    }, {
      leftAt: new Date(payload.object.participant.leave_time),
      durationMin: payload.object.participant.duration,
    });
  }

  res.status(200).json({ status: 'ok' });
});

Записи вебинаров

После окончания вебинара Zoom/BBB генерирует запись. Процесс:

1. Webhook recording.completed → получаем ссылку на скачивание
2. Скачиваем и загружаем в S3 (Zoom хранит записи ограниченное время)
3. Создаём видео-урок в LMS со ссылкой на запись
4. Уведомляем студентов, пропустивших вебинар

async function processWebinarRecording(meetingId, downloadUrl, token) {
  const s3Key = `recordings/${meetingId}.mp4`;

  // Скачиваем запись с авторизацией
  const response = await fetch(downloadUrl, {
    headers: { Authorization: `Bearer ${token}` }
  });

  await s3.upload({ Bucket: process.env.S3_BUCKET, Key: s3Key, Body: response.body }).promise();

  const videoUrl = `https://${process.env.CDN_DOMAIN}/${s3Key}`;
  await db.webinars.update({ meetingId }, { recordingUrl: videoUrl });

  await notifyAbsentStudents(meetingId, videoUrl);
}

Встроенный видеозвонок через Daily.co

Если нужно встроить видео прямо в LMS без перехода на внешнюю страницу:

// React компонент с Daily.co
import DailyIframe from '@daily-co/daily-js';

function WebinarRoom({ roomUrl, token }) {
  const callFrame = useRef(null);

  useEffect(() => {
    callFrame.current = DailyIframe.createFrame({
      url: roomUrl,
      token,
      iframeStyle: { width: '100%', height: '600px' },
    });

    callFrame.current.on('participant-counts-updated', ({ present }) => {
      trackAttendance(present);
    });

    callFrame.current.join();
    return () => callFrame.current.destroy();
  }, [roomUrl]);

  return <div id="daily-container" />;
}

Роли участников

• Студент — может говорить по запросу (raise hand), смотрит стрим
• Преподаватель (host) — полный контроль над комнатой
• Ассистент (co-host) — может управлять участниками

Сроки

Интеграция с Zoom API: создание встреч, отправка ссылок студентам, базовая посещаемость — 4–5 дней. Запись вебинаров с загрузкой в S3 и уведомлениями — 2–3 дня. Self-hosted BigBlueButton с полной интеграцией и встройкой в LMS — 7–10 дней. Daily.co embedded-видео — 3–4 дня.