Розробка системи уроків (текст, відео, аудіо) для LMS

Уявіть: студент на слабкому інтернеті намагається додивитися відеоурок, але плеєр гальмує, а після перемотування прогрес обнуляється — доводиться передивлятися заново. Саме з такими проблемами стикаються багато LMS, зібрані без продуманої архітектури. Розробка системи уроків — це комплексне завдання: потрібно забезпечити стабільний трекінг для відео, тексту та аудіо, адаптивну доставку контенту та відмовостійкість. Ми розробляємо систему уроків, де кожен тип контенту має надійний трекінг та адаптивну доставку. На основі досвіду 50+ навчальних порталів ми виділили ключові технічні проблеми: крихкий трекінг при перемотуванні відео, довге завантаження великих файлів, відсутність синхронізації аудіо з транскрипцією. Нижче — як ми їх вирішуємо.

Які технічні проблеми вирішує система уроків?

Трекінг прогресу відео — користувач може мотати назад, і прогрес має фіксувати лише максимальну позицію. Ми зберігаємо її кожні 10% і завершуємо урок при 90%+ перегляду, а не тільки при закінченні.

Транскодування великих файлів — прямий MP4 гальмує на повільному інтернеті. Ми переганяємо відео в HLS з декількома бітрейтами (360p–1080p) і використовуємо фонові воркери (Bull) для асинхронної обробки.

Текстові уроки без позначки про прочитання — просто пролистати до кінця недостатньо. Ми використовуємо Intersection Observer для детекції 90% прокрутки та автоматично завершуємо урок.

Аудіо без синхронізації — слухач втрачає нитку без тексту. Ми виводимо транскрипцію поруч із плеєром і підсвічуємо поточне слово (опціонально).

Розробка системи уроків: як забезпечити надійний трекінг прогресу?

Ключова складність — користувач може перемотувати назад, але прогрес має тільки зростати. У компоненті ReactPlayer ми запам'ятовуємо максимальне значення played (0–1) і зберігаємо його кожні 10%.

import ReactPlayer from 'react-player';
import { useState, useRef, useCallback } from 'react';

function VideoLesson({ lesson, enrollmentId, onComplete }) {
  const playerRef = useRef<ReactPlayer>(null);
  const [played, setPlayed] = useState(0);
  const [completed, setCompleted] = useState(lesson.progress?.completed ?? false);
  const maxPlayedRef = useRef(lesson.progress?.progress ?? 0);

  const handleProgress = useCallback(async ({ played: p }) => {
    setPlayed(p);
    if (p > maxPlayedRef.current) {
      maxPlayedRef.current = p;
      if (Math.floor(p * 10) > Math.floor((p - 0.01) * 10)) {
        await saveProgress(enrollmentId, lesson.id, p);
      }
    }
  }, []);

  const handleEnded = useCallback(async () => {
    if (!completed) {
      setCompleted(true);
      await fetch(`/api/enrollments/${enrollmentId}/lessons/${lesson.id}/complete`, {
        method: 'POST',
      });
      onComplete?.(lesson.id);
    }
  }, [completed]);

  const handleProgress2 = useCallback(({ played: p }) => {
    handleProgress({ played: p });
    if (p >= 0.9 && !completed) {
      handleEnded();
    }
  }, [handleProgress, handleEnded, completed]);

  return (
    <div className="space-y-4">
      <div className="relative aspect-video bg-black rounded-xl overflow-hidden">
        <ReactPlayer
          ref={playerRef}
          url={lesson.content.videoUrl}
          width="100%"
          height="100%"
          controls
          onProgress={handleProgress2}
          onEnded={handleEnded}
          config={{
            file: {
              tracks: lesson.content.subtitles.map(s => ({
                kind: 'subtitles',
                src: s.url,
                srcLang: s.lang,
                label: s.label,
              })),
            },
          }}
        />
      </div>
      {lesson.content.chapters?.length > 0 && (
        <div>
          <h3 className="font-semibold text-gray-800 mb-2">Содержание</h3>
          <ul className="space-y-1">
            {lesson.content.chapters.map((ch, i) => (
              <li key={i}>
                <button
                  onClick={() => playerRef.current?.seekTo(ch.time)}
                  className="text-sm text-blue-600 hover:underline"
                >
                  {formatTime(ch.time)} — {ch.title}
                </button>
              </li>
            ))}
          </ul>
        </div>
      )}
      {completed && (
        <div className="flex items-center gap-2 text-green-600 text-sm">
          <span>✓</span> Урок завершён
        </div>
      )}
    </div>
  );
}

Чому ми використовуємо HLS замість прямого MP4?

Прямий MP4 завантажується цілком — при поганому з'єднанні користувач чекає хвилини. HLS ріже відео на 6-секундні сегменти: плеєр починає показ одразу, перемикаючи якість залежно від швидкості. HLS починає відтворення в 3-10 разів швидше MP4, а в умовах слабкого інтернету різниця сягає 15 разів. Ми транскодуємо завантажене відео через ffmpeg у фоні.

Стандарт HTTP Live Streaming описує адаптивну передачу відео та забезпечує плавне відтворення.

import { createReadStream } from 'fs';
import ffmpeg from 'fluent-ffmpeg';

async function transcodeToHLS(inputPath: string, outputDir: string): Promise<string> {
  await fs.promises.mkdir(outputDir, { recursive: true });

  return new Promise((resolve, reject) => {
    ffmpeg(inputPath)
      .outputOptions([
        '-profile:v baseline',
        '-level 3.0',
        '-start_number 0',
        '-hls_time 6',
        '-hls_list_size 0',
        '-f hls',
      ])
      .output(path.join(outputDir, 'index.m3u8'))
      .outputOptions([
        '-vf scale=-2:720',
        '-b:v 2500k',
      ])
      .on('end', () => resolve(`${outputDir}/index.m3u8`))
      .on('error', reject)
      .run();
  });
}

videoProcessingQueue.process(async (job) => {
  const { uploadedPath, lessonId } = job.data;
  const outputDir = `storage/lessons/${lessonId}/hls`;

  await job.progress(10);
  const hlsPath = await transcodeToHLS(uploadedPath, outputDir);

  await job.progress(80);
  const url = await uploadHLSToS3(outputDir, `lessons/${lessonId}`);

  await db.lessons.update(lessonId, {
    content: { videoUrl: url, status: 'ready' }
  });

  await job.progress(100);
});

Текстові та аудіоуроки

Як працює Intersection Observer для фіксації прочитання?

Для текстових уроків використовуємо редактор Tiptap (на базі ProseMirror). Контент зберігається в HTML або Markdown. Щоб зарахувати прочитання, відстежуємо прокрутку до кінця через Intersection Observer.

import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import Image from '@tiptap/extension-image';
import { Youtube } from '@tiptap/extension-youtube';

function TextLessonViewer({ content, onComplete }) {
  const editor = useEditor({
    content: content.body,
    editable: false,
    extensions: [StarterKit, Image, Youtube],
  });

  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) onComplete?.();
      },
      { threshold: 0.9 }
    );

    const marker = containerRef.current?.querySelector('.lesson-end-marker');
    if (marker) observer.observe(marker);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={containerRef} className="prose prose-lg max-w-none">
      <EditorContent editor={editor} />
      {content.attachments?.length > 0 && (
        <div className="mt-8 border-t pt-6">
          <h3 className="font-semibold">Матеріали уроку</h3>
          <ul className="space-y-2 mt-3">
            {content.attachments.map(att => (
              <li key={att.url}>
                <a href={att.url} download className="flex items-center gap-2 text-blue-600 hover:underline">
                  <span>📎</span>
                  <span>{att.name}</span>
                  <span className="text-gray-400 text-sm">({formatFileSize(att.size)})</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}
      <div className="lesson-end-marker h-1" />
    </div>
  );
}

Аудіоуроки з транскрипцією

Аудіоуроки простіші: використовуємо нативний audio з кастомним оформленням. Транскрипція виводиться під плеєром, що допомагає слабочуючим і тим, хто не може ввімкнути звук.

function AudioLesson({ lesson, onComplete }) {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [currentTime, setCurrentTime] = useState(0);

  return (
    <div className="space-y-6">
      <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-2xl p-8">
        {lesson.content.thumbnailUrl && (
          <img src={lesson.content.thumbnailUrl}
            className="w-32 h-32 rounded-full mx-auto mb-6 object-cover" alt="" />
        )}
        <audio
          ref={audioRef}
          src={lesson.content.audioUrl}
          controls
          className="w-full"
          onTimeUpdate={() => setCurrentTime(audioRef.current?.currentTime ?? 0)}
          onEnded={onComplete}
        />
      </div>
      {lesson.content.transcript && (
        <div className="prose">
          <h3>Транскрипція</h3>
          <p className="text-gray-700 whitespace-pre-line">
            {lesson.content.transcript}
          </p>
        </div>
      )}
    </div>
  );
}

Порівняння форматів

При переході на HLS ви економите до 50% трафіку порівняно з MP4, а використання адаптивного бітрейту знижує витрати на пропускну здатність на 30-50%.

Процес роботи та строки

1. Аналітика — вивчаємо ваші вимоги: типи контенту, необхідна кількість уроків, інтеграції (SCORM, SSO).
2. Проектування — малюємо архітектуру: моделі даних, API-ендпоінти, компоненти фронтенду.
3. Реалізація — пишемо код з нуля або на основі вашої CMS. Використовуємо TypeScript, React, Next.js, Laravel (або ваш стек).
4. Тестування — перевіряємо трекінг на всіх типах контенту, емулюємо повільний інтернет, тестуємо завантаження великих файлів.
5. Деплой — розгортаємо на вашому хостингу або нашій інфраструктурі. Даємо доступ до вихідного коду та документації.

Орієнтовні строки: від 1 до 2 тижнів на базову систему з відео (HLS), текстом та аудіо. Якщо потрібні додаткові типи (SCORM, live-уроки) або складна аналітика — строк обговорюється окремо. Вартість розраховується індивідуально. Замовте розробку системи уроків – ми підготуємо індивідуальну комерційну пропозицію протягом 24 годин.

Що входить та гарантії

• Вихідний код системи уроків (фронтенд + бекенд)
• API для інтеграції з існуючою LMS
• Документація з розгортання та доопрацювання
• Консоль адміністрування уроків (завантаження, редагування, порядок)
• Підтримка після запуску: 2 тижні безкоштовно

Більше 5 років ми розробляємо LMS для шкіл, університетів та корпоративних порталів. Всі проєкти здаємо в строк і супроводжуємо до повної стабільності. Гарантуємо, що трекінг працюватиме при будь-яких діях користувача (перемотування, пауза, повтор). Отримайте безкоштовну консультацію по вашому проєкту – зв'яжіться з нами. Це безкоштовно.

Послуги бекенд-розробки: production-grade надійність

На production-сервері о 3:14 ночі черга Laravel Jobs перестала оброблятися — 40 000 необроблених завдань у Redis. Причина: worker упав через memory leak у статичній змінній Eloquent observer, supervisor не перезапустив через misconfigured stopwaitsecs. Ми розбирали такий інцидент на проекті з 500 RPS: діагностика 4 години, фікс — 20 хвилин. Щоб ви не втрачали гроші, пропонуємо послуги бекенд-розробки з акцентом на production-grade надійність — 10+ років досвіду, 50+ проектів, 5 років на ринку. Оцінимо ваш проект за 2 дні.

Які проблеми вирішуємо

N+1 запити: головний вбивця швидкості

N+1 — найпоширеніша причина повільних сторінок у Laravel-додатках. Стандартна історія: сторінка працювала нормально на dev з 10 записами, на production з 10 000 — 8-секундне завантаження.

Laravel Debugbar у dev-оточенні показує кількість запитів. Більше 20 — сигнал для audit.

Model::preventLazyLoading(! app()->isProduction());

Telescope для профілювання: логує всі запити, jobs, mail, notifications з деталізацією. Після впровадження eager loading час завантаження сторінки падає з 8 с до 0.3 с — у 27 разів.

Memory leak у статичних змінних

У Laravel Octane або Swoole додаток тримається в пам’яті між запитами. Статичні змінні не скидаються — призводять до неконтрольованого росту пам’яті. Використовуємо defer-функції та контейнерні біндинги для коректного скидання стану.

Неправильний connection pool

Rails, Laravel, Django відкривають нове з'єднання PostgreSQL на кожен PHP/Python процес. 100 воркерів — 100 з'єднань. PostgreSQL деградує від 200+ активних з'єднань через overhead на управління.

PgBouncer у transaction pooling: 1000 воркерів → 20–50 реальних з'єднань. Це знижує latency на 40% та зменшує витрати на хостинг на 30% — при середній вартості хостингу $2,000/міс економить $600/міс. GIN-індекс для JSONB до 100 разів швидший за B-tree при пошуку.

Як Octane справляється з високим навантаженням?

Laravel Octane (RoadRunner або Swoole) прибирає overhead bootstrap на кожен HTTP-запит. Приріст: 3–8x на синтетичних бенчмарках, 2–4x на реальних додатках. Важливо: не зберігати стан у статичних змінних — застосовуємо це на проектах >1000 RPS.

Як PostgreSQL допомагає уникнути повільних запитів?

Використовуємо composite indexes для WHERE + ORDER BY, partial indexes для фільтрів з високою селективністю, GIN-індекси для JSONB та full-text search. to_tsvector + GIN замість LIKE '%query%' — запобігає seq scan навіть на мільйонах записів. Аналізуємо плани через EXPLAIN ANALYZE та pg_stat_statements.

Як обрати стек для вашого проекту?

Node.js виправданий для realtime: Laravel публікує події в Redis Pub/Sub, Node.js підписується та транслює клієнтам. Go — для goroutines (10k з'єднань на сервер — норма), але розробка повільніша, ніж Laravel.

Чому Redis критичний для продуктивності?

Redis виконує кілька ролей:

Redis Cluster для горизонтального масштабування, Sentinel для автоматичного failover. Замовте консультацію щодо оптимізації Redis для вашого проекту.

Що входить в роботу під ключ

• Архітектурне проектування (документація API, схема БД, діаграма сервісів)
• Реалізація за узгодженим ТЗ з code review
• Налаштування CI/CD (GitHub Actions, Docker), моніторингу (Sentry, Grafana), алертингу
• Навантажувальне тестування (k6, wrk) зі звітом
• Передача вихідних кодів, доступів, інструкція з деплою
• Навчання команди замовника (2–3 сесії)
• Гарантійна підтримка 1 місяць після здачі

Орієнтири по термінах

Вартість розраховується індивідуально після аналізу вимог до навантаження, інтеграцій та бізнес-логіки. Зв'яжіться з нами для безкоштовного аудиту вашого поточного backend — отримайте план оптимізації за 2 дні. Замовте консультацію та дізнайтеся, як знизити витрати на інфраструктуру на 30% без втрати продуктивності.