Реализация обрезки и редактирования видео в мобильном приложении
Мы сталкиваемся с задачей внедрения видеоредактора почти в каждом втором мобильном проекте. Клиенты хотят, чтобы пользователь мог обрезать лишние секунды, склеить несколько клипов или наложить текст — и всё это без зависаний на 30 секунд. Кажется, что API для работы с видео есть на каждой платформе, но подводных камней хватает: frame-accurate trimming, плавный таймлайн, быстрый экспорт без блокировки UI. Разберём, как мы решаем эти проблемы на iOS и Android.
Почему обрезка видео — не тривиальная задача?
Обрезка по времени (trimming). На iOS мы используем AVAssetExportSession с timeRange:
exportSession.timeRange = CMTimeRange( start: CMTime(seconds: startTime, preferredTimescale: 600), duration: CMTime(seconds: duration, preferredTimescale: 600) ) preferredTimescale: 600 — стандарт для видео, кратен 24/25/30/60 fps. Использование timescale: 1 даёт ошибки округления на фреймах. На Android — MediaMuxer + MediaExtractor для frame-accurate trimming без перекодирования (только если совпадают ключевые кадры). Если нет — Transformer из media3 с явным перекодированием. Такой подход гарантирует точность до кадра, что критично для профессионального монтажа.
Как объединить клипы без потери качества?
Объединение клипов. iOS: AVMutableComposition — добавляем AVMutableCompositionTrack для видео и аудио, вставляем через insertTimeRange(_:of:at:). Важно: аудиодорожки объединяются отдельно от видеодорожек, иначе рассинхронизация. Android: media3 Transformer с Composition API (1.2.x+). Последовательность клипов — EditedMediaItemSequence. Мы настраиваем аудиомикс так, чтобы переходы были бесшовными — никаких щелчков или задержек.
Текстовые оверлеи. iOS: AVVideoComposition + AVVideoCompositionCoreAnimationTool. Создаём CATextLayer, добавляем анимацию появления через CABasicAnimation, передаём в animationTool. На Android — OverlayEffect в media3 Transformer или рисуем через Canvas на каждом кадре (медленно, только для короткого контента). Для длинных видео мы предпочитаем нативные оверлеи через SurfaceView — это даёт до 3x прирост производительности по сравнению с Canvas.
Таймлайн-превью
Самая заметная пользователю деталь — полоска с кадрами видео под плеером. Генерируем через AVAssetImageGenerator на iOS:
generator.generateCGImagesAsynchronously(forTimes: times) { _, image, _, _, _ in // обновляем UI на главном потоке } requestedTimeToleranceBefore/After = .zero даёт точные кадры, но медленнее. Для таймлайна достаточно CMTime(seconds: 0.1, preferredTimescale: 600) — кадры ближайшие к отметке. На Android — MediaMetadataRetriever.getFrameAtTime() в IO Dispatcher. Мы кешируем сгенерированные кадры в LRU-кэше, чтобы при скролле не было подтормаживаний.
Экспорт
Всегда асинхронно, с прогрессом. iOS: exportSession.progress через Timer каждые 0.1 с. Android: Transformer.addListener с onProgress(progress: Float). Формат вывода: H.264 в MP4 — максимальная совместимость. H.265 (HEVC) — меньше размер, но не все серверы принимают без перекодирования.
| Пресет iOS | Разрешение | Битрейт (прим.) |
|---|---|---|
AVAssetExportPreset640x480 |
640×480 | ~1.5 Мбит/с |
AVAssetExportPreset1280x720 |
1280×720 | ~5 Мбит/с |
AVAssetExportPreset1920x1080 |
1920×1080 | ~10 Мбит/с |
| Кастомный AVVideoSettings | любое | контролируемый |
Сравнение производительности: нативная реализация на iOS через AVAssetExportSession в 2–3 раза быстрее аналогичного решения на FFmpeg (в силу аппаратного декодирования). На Android MediaCodec с H.264 даёт до 50% прироста скорости относительно программного кодирования.
Flutter: video_editor
video_editor (pub.dev) предоставляет UI-компоненты (таймлайн, кроппер) поверх ffmpeg_kit_flutter для реальных операций. Плюс — кросс-платформенный Flutter-код для UI. Минус — FFmpeg обрабатывает видео на CPU, что медленнее нативных AVFoundation/MediaCodec решений — разница может достигать 3–5 раз на длинных видео. Для MVP и несложного контента подходит, для production-редактора с частым использованием — предпочтительнее нативная реализация. У нас есть опыт миграции с Flutter-редактора на нативный, это сократило время экспорта с 45 до 12 секунд для 2-минутного ролика.
Что входит в работу
- Анализ требований к функциональности (обрезка, склейка, оверлеи, эффекты)
- Проектирование архитектуры: выбор фреймворков, настройка пайплайна обработки
- Реализация core-модулей: trimming, composition, export с unit-тестами
- Интеграция таймлайна с превью и обработкой жестов
- Оптимизация производительности: кэширование кадров, асинхронная обработка, аппаратное ускорение
- Тестирование на различных устройствах (iPhone SE — iPhone 15 Pro, Xiaomi Redmi — Samsung Galaxy S24)
- Сборка и деплой в App Store / Google Play с настройкой code signing и provisioning profiles
- Документация по интеграции (API схемы, примеры кода, инструкция по настройке store)
Мы гарантируем, что реализованный функционал пройдёт модерацию App Store (Section 4.2 — минимализм, 5.1 — конфиденциальность) и Google Play (политика использования медиа).
Сроки и оценка
Базовая обрезка по времени + экспорт — 2–3 рабочих дня. Полноценный редактор с таймлайном, объединением клипов и текстовыми оверлеями — 5–8 рабочих дней. Сроки уточняются после брифинга: на сложность влияет количество эффектов, поддержка HDR, работа с субтитрами. Пишите — оценим ваш проект бесплатно. За 5+ лет мы реализовали более 20 медиа-проектов для iOS и Android, включая потоковые видео-редакторы и приложения для UGC.