Разработка системы уроков (текст, видео, аудио) для 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 для школ, университетов и корпоративных порталов. Все проекты сдаём в срок и сопровождаем до полной стабильности. Гарантируем, что трекинг будет работать при любых действиях пользователя (перемотка, пауза, повтор). Получите бесплатную консультацию по вашему проекту – свяжитесь с нами. Это бесплатно.

Услуги бэкенд-разработки: Laravel, Node.js, Go, Django, PostgreSQL

На production-сервере в 3:14 ночи очередь Laravel Jobs перестала обрабатываться. 40 000 необработанных задач в Redis. Причина: worker упал из-за memory leak в одном из Jobs (утечка через статическую переменную в Eloquent observer), supervisor не перезапустил его из-за misconfigured stopwaitsecs. Это не гипотетический сценарий — это вторник. Мы разбирали такой инцидент на проекте с нагрузкой 500 RPS: диагностика заняла 4 часа, фикс — 20 минут. Чтобы вы не теряли деньги на простоях, предлагаем услуги бэкенд-разработки с акцентом на production-grade надёжность. Оценим ваш проект за 2 дня.

Backend — это то, что работает когда никто не смотрит. Или не работает. Гарантируем, что у вас будет первый вариант.

Что мы делаем с первого дня правильно

Service Layer поверх Fat Controllers. Controller получает HTTP-запрос, валидирует его через Form Request, передаёт данные в Service, возвращает ответ. Бизнес-логика в Service, не в Controller. Это звучит банально, но большинство legacy-проектов — это контроллеры по 500 строк с SQL-запросами внутри.

Repository Pattern используем осторожно. Если вы просто оборачиваете Model::where(...) в метод репозитория — это бойлерплейт без пользы. Repository оправдан когда: нужно абстрагироваться от источника данных (БД + кеш + внешний API) или когда логика запросов достаточно сложна для изоляции.

Jobs, Events, Listeners. Всё, что можно сделать асинхронно — делаем асинхронно. Отправка email, генерация PDF, синхронизация с внешним API, пересчёт агрегатов — в Queue. Laravel Horizon для мониторинга очередей в Redis: видно throughput, failed jobs, время обработки по очередям.

Как Octane справляется с высокой нагрузкой

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

Что делать с N+1 запросами

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

Laravel Debugbar в dev-окружении показывает количество запросов на страницу. Более 20 запросов на одну страницу — сигнал для audit.

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

Telescope для профилирования в staging: логирует все запросы, jobs, mail, notifications с детализацией по времени. Цифры: после внедрения eager loading время загрузки страницы падает с 8 с до 0.3 с — в 27 раз.

PostgreSQL: индексы, которые реально нужны

PostgreSQL 14+ — основная БД на всех проектах. Используем связку PgBouncer + PostgreSQL. Опыт 10+ лет, более 50 backend-проектов, 5 лет на рынке.

Как PostgreSQL помогает избежать медленных запросов

Composite indexes для частых WHERE + ORDER BY. Если у вас WHERE user_id = ? AND status = ? ORDER BY created_at DESC — нужен (user_id, status, created_at DESC). Индекс по (user_id) отдельно плохо помогает с сортировкой.

Partial indexes. Если 95% запросов идут по WHERE status = 'active':

CREATE INDEX idx_orders_active ON orders (created_at DESC)
WHERE status = 'active';

Индекс маленький, быстрый, покрывает основную нагрузку.

GIN-индексы для JSONB и массивов. @> оператор без GIN-индекса — seq scan. С индексом — быстро даже на миллионах записей.

GIN для full-text search. to_tsvector + GIN вместо LIKE '%query%'. LIKE без индекса — всегда seq scan. С pg_trgm extension и gin_trgm_ops — поддержка LIKE с индексом, полезно для CRM-поиска по частичному совпадению.

Connection pooling: почему важнее чем кажется

Rails, Laravel, Django открывают новое соединение с PostgreSQL на каждый PHP/Python процесс. На 100 воркерах — 100 соединений. PostgreSQL начинает деградировать от 200–300 активных соединений — overhead на управление соединениями становится значительным.

PgBouncer — connection pooler перед PostgreSQL. Режим transaction pooling: соединение с PostgreSQL занято только на время транзакции, между запросами возвращается в пул. 1000 приложений-воркеров → 20–50 реальных соединений к PostgreSQL. Это снижает latency на 40% и уменьшает затраты на хостинг на 30%.

Node.js с Fastify: когда это лучше Laravel

Node.js оправдан для:

• Realtime: WebSocket-серверы, Server-Sent Events, чат, live-обновления
• Streaming: большие файлы, видео, данные потоком
• High I/O concurrency: много параллельных запросов к внешним API без тяжёлой бизнес-логики
• Serverless: Lambda/Cloud Functions — Node.js стартует быстрее PHP

Fastify вместо Express: в 2–3 раза быстрее на benchmarks, встроенная JSON Schema валидация, лучшая TypeScript поддержка, plugin-архитектура.

Типичная архитектура realtime: Laravel — основная бизнес-логика и REST API. Node.js + Socket.io или ws — WebSocket сервер. Laravel публикует события в Redis Pub/Sub, Node.js подписывается и транслирует клиентам. Это разделение позволяет масштабировать WebSocket-сервер независимо от основного приложения.

Go: микросервисы и высокая нагрузка

Go используем для:

• Высоконагруженных микросервисов (> 10 000 RPS)
• Фоновых воркеров с жёсткими требованиями к latency
• Инструментов DevOps и CLI
• gRPC-сервисов в микросервисной архитектуре

Goroutines — дешевле OS-потоков в тысячи раз. 10 000 конкурентных соединений на Go — норма на одном сервере.

Но Go — не волшебная таблетка. Разработка медленнее чем на Laravel: больше бойлерплейта, нет ORM уровня Eloquent, обработка ошибок через if err != nil везде. Оправдан только когда производительность — реальное требование, не предположение.

Django и Python backend

Django с DRF (Django REST Framework) — для задач где нужен Python: ML-пайплайны, обработка данных, интеграции с AI-инструментами.

Celery для фоновых задач — аналог Laravel Queue, но сложнее в конфигурации. Celery Beat для cron-задач.

Django ORM vs raw SQL: ORM удобен для CRUD. Для аналитических запросов с несколькими JOIN, оконными функциями и CTE — connection.execute() с raw SQL читаемее и предсказуемее.

Redis: не только кеш

Redis в наших проектах выполняет несколько ролей:

Redis Cluster для горизонтального масштабирования. Sentinel для автоматического failover на standalone установках.

Деплой и инфраструктура

Docker + docker-compose — стандарт для локальной разработки и production. Каждый сервис в контейнере: PHP-FPM/Octane, Nginx, PostgreSQL, Redis, Queue Worker, Scheduler.

CI/CD через GitHub Actions:

1. Прогон тестов (PHPUnit / Pest, Vitest, Playwright)
2. Сборка Docker-образа
3. Push в Container Registry
4. Deploy: docker pull → docker-compose up -d на сервере, или Kubernetes rolling update

Zero-downtime deploy для Laravel: php artisan down --secret=TOKEN не нужен при правильной настройке. Стратегия: новый контейнер стартует рядом со старым, Nginx переключает трафик после health check, старый контейнер останавливается.

Мониторинг: Sentry для exception tracking с alerting в Slack/Telegram. Grafana + Prometheus (или Grafana Cloud) для метрик: CPU, memory, request rate, queue depth, database connection count. Алерт на: error rate > 1%, p99 latency > 2s, queue depth > 1000 jobs.

Что входит в работу под ключ

• Архитектурное проектирование (документация API, схема БД, диаграмма сервисов)
• Реализация по согласованному ТЗ с code review
• Настройка CI/CD, мониторинга, алертинга
• Нагрузочное тестирование (k6, wrk) с отчётом
• Передача исходников, доступов, инструкция по деплою
• Обучение команды заказчика (2-3 сессии)
• Гарантийная поддержка 1 месяц после сдачи

Ориентиры по срокам

Стоимость рассчитывается индивидуально после анализа требований к нагрузке, интеграциям и бизнес-логике. Типичный бюджет backend-проекта — от 500 000 до 2 000 000 рублей в зависимости от сложности. Свяжитесь с нами для бесплатного аудита вашего текущего backend — получите план оптимизации за 2 дня. Закажите консультацию.