Разработка Reels (короткие видео) в мобильном приложении

Разработка Reels (короткие видео) в мобильном приложении

Клиент жалуется: лента вертикальных видео тормозит на iPhone 8 со старым iOS — переключение между роликами занимает секунду, звук запаздывает, а при быстром свайпе приложение вылетает из-за нехватки памяти. Знакомая проблема? Мы решаем её: реализуем плавный paging-скролл на основе shared плеера, предзагрузку видео за три позиции и кэш AVPlayerItem для пяти соседних роликов — всё это даёт стабильные 60 fps даже на устройствах с 2 ГБ ОЗУ. Вертикальный видеофид — технически один из самых сложных UI-паттернов: требуется синхронизация аудио, видео и касаний, минимизация задержки при скролле и правильное управление памятью. Мы реализовали более 50 проектов с видеофидом, используя Swift 5.9+, Kotlin 1.9+, Combine и Coroutines. Наши инженеры сертифицированы Apple и Google, имеют опыт работы с App Store Review Guidelines (Section 4.2, 5.1) и Google Play Console. Ключевое решение — использование единственного экземпляра AVPlayer (iOS) или ExoPlayer (Android) с переназначением плеера между ячейками. Это исключает задержки, связанные с инициализацией плеера, и снижает нагрузку на GPU. Предзагрузка AVPlayerItem за три видео до отображения сокращает время переключения до 80 мс. Оценим ваш проект бесплатно — свяжитесь с нами.

Вертикальный paging-скролл

Основа Reels — UICollectionView с UICollectionViewCompositionalLayout + UICollectionLayoutSectionOrthogonalScrollingBehavior.paging (iOS) или RecyclerView с PagerSnapHelper (Android). Каждый элемент занимает весь экран (bounds.size).

На iOS пагинационный скролл через UICollectionView с isPagingEnabled = true — работает, но не даёт контроля над deceleration. Лучше: кастомный UICollectionViewFlowLayout с переопределённым targetContentOffset(forProposedContentOffset:withScrollingVelocity:), который snap'ает к ближайшему видео с нужной анимацией.

Velocity-based переключение: быстрый свайп переключает на следующий Reel независимо от того, насколько далеко проскролили. sqrt(velocity.x² + velocity.y²) > threshold → snap к следующему элементу.

Как переключать видео без задержек?

Критическое решение — один shared AVPlayer с переназначением AVPlayerItem при скролле. При scrollViewDidEndDecelerating забираем плеер из предыдущей ячейки и назначаем текущей. AVPlayerLayer.player = avPlayer — мгновенно. Плеер не пересоздаётся — переключение без пауз.

На Android — один ExoPlayer на всю активность/фрагмент. PlayerView.player = exoPlayer переназначает. Используем MediaItem с preload: exoPlayer.addMediaItem(nextMediaItem) для следующего видео — ExoPlayer начинает буферизацию до фактического переключения. ExoPlayer с предзагрузкой работает быстрее стандартного MediaPlayer в 4 раза.

Предзагрузка: держим в памяти AVPlayerItem для текущего, следующего и предыдущего видео. Создание AVPlayerItem из URL занимает время — делаем это при начале скролла к соседнему элементу, не при завершении.

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) { // Предзагружаем AVPlayerItem для этого индекса let item = AVPlayerItem(url: videoURLs[indexPath.row]) playerItemCache[indexPath.row] = item } 

Согласно Apple AVFoundation Guide, такой подход минимизирует задержки.

Как реализовать запись с мультисегментами?

Камера для записи Reels — кастомный AVCaptureSession. AVCaptureVideoPreviewLayer отображает live preview на весь экран. Запись через AVCaptureMovieFileOutput с ограничением: maxRecordedDuration = CMTime(seconds: 60, preferredTimescale: 600).

Мультисегментная запись (несколько коротких клипов в один Reel) — на каждую запись создаём отдельный AVAsset, в конце объединяем через AVMutableComposition. AVMutableCompositionTrack.insertTimeRange() вставляет сегменты последовательно.

Фильтры в реальном времени — Core Image с CIFilter применяем к CMSampleBuffer в методе делегата captureOutput(_:didOutput:from:). Рендерим через CIContext с Metal (CIContext(mtlDevice: MTLCreateSystemDefaultDevice()!)). OpenGL для этой задачи — устаревший подход с худшей производительностью.

Звук, текст, эффекты

Аудиотрек — своя музыка из медиатеки через MPMediaPickerController (iOS) или ACTION_PICK с MediaStore.Audio (Android), или треки из каталога приложения. Аудио накладываем на видео через AVMutableComposition с двумя треками: видео + аудио.

Текст поверх видео — не UILabel поверх UIImageView, а запекаем в видео через AVVideoCompositionCoreAnimationTool + CATextLayer. Это даёт корректное отображение текста при экспорте и публикации.

Производительность ленты

UICollectionView.prefetchDataSource на iOS — запрашиваем метаданные следующих 3 видео при скролле. RecyclerView.setRecycledViewPool() на Android — общий пул вью для переиспользования, снижает число inflate-операций.

Память: храним декодированные AVPlayerItem максимум для 5 соседних видео. При прокрутке дальше — освобождаем AVPlayerItem.asset явно. Без этого при просмотре 20+ Reels память вырастает до 300–500 МБ и iOS отправляет memory warning. Наши инженеры сертифицированы Apple и Google, гарантируем плавную работу даже на устройствах с 2 ГБ ОЗУ.

Что входит в работу

• Документация архитектуры и API.
• Исходный код с комментариями.
• Настройка CI/CD и доступов к сторам (App Store Connect, Google Play Console).
• Обучение команды заказчика (2–3 сессии).
• Поддержка 30 дней после релиза.

Сроки и стоимость

Просмотр ленты с автовоспроизведением, предзагрузкой и пагинацией — 1–2 недели. Полный цикл (запись, редактирование, фильтры, публикация, лента) — 3–6 недель. Стоимость рассчитывается индивидуально в зависимости от сложности интеграций и требуемого функционала. Свяжитесь с нами для оценки вашего проекта.

Пошаговая инструкция: как внедрить shared плеер

1. Создайте один AVPlayer / ExoPlayer в вашей Activity/ViewController.
2. В каждой ячейке используйте playerLayer.player = player / PlayerView.player = player.
3. В scrollViewDidEndDecelerating назначьте плеер ячейке, которая теперь видна.
4. Для предзагрузки реализуйте prefetchDataSource (iOS) или addMediaItem (Android).
5. Протестируйте на устройствах с 2 ГБ ОЗУ.