Реализация наложения фильтров на видео в мобильном приложении

Реализация наложения фильтров на видео в мобильном приложении

Разработка видеофильтров для мобильных приложений — это всегда баланс между качеством изображения и производительностью. Однажды клиент пришёл с задачей: наложить LUT-фильтры на видео 4K 60fps в реальном времени. На iPhone 14 Pro первые тесты давали 12 fps — пропуск каждого второго кадра. Проблема была в создании CIContext на каждый кадр. После оптимизации utilisation GPU снизилась до 30%, fps стабилизировались на 60. Мы используем GPU-шейдеры для обработки кадров. На iOS — Swift с Metal, на Android — GLSL или Vulkan. Для кросс-платформенных проектов — нативные модули через платформенные каналы.

Два режима: предпросмотр и экспорт

Предпросмотр в реальном времени (во время воспроизведения) требует обработки на GPU без записи результата в файл. Экспорт — финальная запись с применённым фильтром, может занять секунды, но результат должен быть покадрово точным.

Почему важен один CIContext на всё приложение?

Создание нового CIContext на каждый кадр — смерть производительности. На iPhone 13 это даёт 3–4 fps вместо 30. Контекст создаётся один раз и переиспользуется. CIContext с Metal бэкендом обязателен — CIContext(mtlDevice: MTLCreateSystemDefaultDevice()!). Без явного указания на некоторых устройствах используется CPU-рендеринг, и видео зависает.

Как избежать падения fps при экспорте?

CVPixelBuffer из renderContext.newPixelBuffer() должен быть возвращён сразу после finish(withComposedVideoFrame:). Удержание ссылки ведёт к утечке пула буферов и крэшу с kCVReturnInvalidArgument. На Android: GPUImageFilter не thread-safe — нельзя применять к одному экземпляру из нескольких потоков одновременно.

Сравнение платформ

Производительность: CPU против GPU

iOS: AVVideoComposition + Core Image

AVVideoCompositionCoreAnimationTool для статичных оверлеев — подходит для текста и логотипов. Для пиксельных фильтров — AVVideoComposition с кастомным AVVideoCompositing:

class FilterCompositor: NSObject, AVVideoCompositing {
    func startRequest(_ asyncVideoCompositionRequest: AVAsynchronousVideoCompositionRequest) {
        guard let frame = asyncVideoCompositionRequest.sourceFrame(byTrackID: trackID) else { return }
        let ciImage = CIImage(cvPixelBuffer: frame)
        let filtered = applyFilter(ciImage)
        let output = asyncVideoCompositionRequest.renderContext.newPixelBuffer()!
        ciContext.render(filtered, to: output)
        asyncVideoCompositionRequest.finish(withComposedVideoFrame: output)
    }
}

Для LUT-фильтров — CIColorCubeWithColorSpace с 64×64×64 таблицей. Подробнее о Core Image.

Android: GPUImage и media3 Effects

Предпросмотр в реальном времени — GPUImageView с кастомным GPUImageFilter. Шейдер пишется на GLSL:

precision mediump float;
uniform sampler2D inputImageTexture;
varying vec2 textureCoordinate;
void main() {
    vec4 color = texture2D(inputImageTexture, textureCoordinate);
    float luma = dot(color.rgb, vec3(0.299, 0.587, 0.114));
    gl_FragColor = vec4(mix(vec3(luma), color.rgb, 1.3), color.a);
}

Для экспорта с фильтром — media3 Transformer с GlEffect. MatrixTextureProcessor принимает шейдер и применяет его к каждому кадру при перекодировании.

Flutter. Полноценные видеофильтры в реальном времени требуют платформенного кода. Нативные плагины с MethodChannel — единственный рабочий подход для production-приложений.

Применение фильтра к записи с камеры в реальном времени

Ещё более требовательный сценарий — фильтр при съёмке. На iOS: AVCaptureSession + AVCaptureVideoDataOutput → SampleBufferDelegate → Metal-шейдер → рендер в MTKView. Задержка цепочки должна быть < 16 мс для 60fps. kCVPixelBufferPixelFormatTypeKey: kCVPixelFormatType_420YpCbCr8BiPlanarFullRange — формат YUV из камеры быстрее конвертируется в текстуру Metal, чем BGRA.

На Android: CameraX Analysis + ImageAnalysis.Analyzer → GLES-шейдер → GLSurfaceView. ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST — отбрасываем старые кадры, если GPU не успел обработать предыдущий.

Процесс работы

1. Аналитика: оценка требований к фильтрам, целевые устройства, fps.
2. Проектирование: выбор архитектуры (нативный/кросс-платформа), прототипирование шейдеров.
3. Реализация: написание GPU-шейдеров, интеграция с AVFoundation/Media3, оптимизация производительности.
4. Тестирование: на реальных устройствах (iPhone 8–14, Samsung Galaxy S10–S23), измерение fps, проверка артефактов.
5. Деплой: публикация в App Store/Google Play, настройка TestFlight/App Distribution.

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

• Исходный код шейдеров и интеграции (Swift, Kotlin, Dart).
• Документация по интеграции и настройке.
• Инструкция по добавлению новых фильтров.
• Поддержка в течение 1 месяца после сдачи.
• Тестирование на 3+ реальных устройствах.

Сроки и гарантии

5–7 рабочих дней: разработка шейдеров для 5–8 фильтров, интеграция предпросмотра и экспорта на iOS и Android. Flutter-версия с нативным кодом — плюс 2 дня. Стоимость рассчитывается индивидуально — ориентировочный бюджет от нескольких тысяч долларов. Свяжитесь для оценки вашего проекта.

Мы гарантируем стабильную работу фильтров на устройствах от iPhone 8 и Android 10. Наш опыт — 5+ лет в мобильной разработке, более 30 проектов с видеообработкой. Пишите — поможем реализовать видеофильтры для вашего приложения.

Как выбрать подход к камере на мобильных платформах

Приложения, где пользователи снимают, слушают или смотрят, технически одни из самых требовательных. Мы сталкиваемся с этим каждый день. Не из-за сложности API, а из-за разницы в железе: на флагмане камера работает идеально, на бюджетном устройстве с нестандартным Camera HAL возникают артефакты и сбои. На iOS стабилизация одного поколения отличается от другого. Платформенные различия формируют 80% всей сложности медиа-разработки. Наш опыт — 7+ лет в мобильных медиа и более 40 реализованных проектов с камерой, аудио и видео.

CameraX против Camera2 и AVFoundation

На Android долгое время Camera2 API был единственным адекватным выбором для кастомных камер. Это низкоуровневый API с CaptureRequest, CameraCharacteristics, ImageReader — мощный, но многословный. Только preview с корректным aspect ratio и правильной ориентацией занимает несколько сотен строк кода.

CameraX (Jetpack) — обёртка поверх Camera2 с автоматической адаптацией под устройство. Preview, ImageCapture, ImageAnalysis, VideoCapture — четыре use case, которые комбинируются. Он решает за вас проблему ориентации, aspect ratio и lifecycle: привязываете к LifecycleOwner и не думаете о закрытии камеры при сворачивании. В последних версиях CameraX получил Extensions API для боке, ночного режима, HDR — нативные алгоритмы производителей через единый интерфейс.

Когда нужен Camera2 напрямую: RAW-съёмка через ImageFormat.RAW_SENSOR, ручной контроль ISO/выдержки/фокуса или когда CameraX Extensions API не поддерживается и требуется кастомный ML-пайплайн в ImageAnalysis.

На iOS AVFoundation — единственный путь для кастомной камеры. AVCaptureSession с AVCaptureDeviceInput и нужным output (AVCapturePhotoOutput, AVCaptureVideoDataOutput, AVCaptureMovieFileOutput). Для реал-тайм обработки видео — AVCaptureVideoDataOutput + CVPixelBuffer в captureOutput(_:didOutput:from:) на фоновой очереди. Именно тут CoreML-модели получают кадры для инференса.

Типичная ошибка с AVFoundation: конфигурировать сессию на main thread. beginConfiguration() / commitConfiguration() должны вызываться на фоновом потоке. Иначе preview фризит, пользователь видит заморозку интерфейса. Эта ошибка встречается в 70% проектов, которые мы аудировали.

Почему AudioFocus критичен для Android приложений

Аудио на мобильных платформах требует корректного управления жизненным циклом звука. AudioFocus — механизм координации между приложениями. AudioManager.requestAudioFocus() с OnAudioFocusChangeListener. Если не обрабатывать AUDIOFOCUS_LOSS_TRANSIENT (паузировать) и AUDIOFOCUS_LOSS (останавливать) — ваше приложение будет играть поверх телефонного звонка. Это гарантированный плохой отзыв в Google Play. Android Developer Guide: AudioFocus

На iOS AudioSession категории определяют поведение: playback — для плееров (продолжает играть при заблокированном экране), record — для записи с отключением других источников, playAndRecord — для голосовых сообщений. Неправильная категория — приложение заглушает фоновую музыку пользователя при старте.

AVAudioEngine — современный API для обработки аудио: граф нод (микшеры, эквалайзеры), tap-ы для захвата буфера. Для речи в реальном времени — SFSpeechRecognizer + inputNode.installTap.

На Android для записи с шумоподавлением — NoiseSuppressor.isAvailable() + create(audioRecord.audioSessionId). Работает не на всех устройствах, нужен fallback.

Видео: воспроизведение и стриминг

ExoPlayer (Media3) — стандарт для Android. Поддерживает HLS, DASH, SmoothStreaming, прогрессивное воспроизведение. DefaultTrackSelector с Parameters позволяет выбирать качество вручную или адаптивно. DRM через DefaultDrmSessionManager с Widevine L1/L3.

Проблема, с которой сталкиваются почти все: ExoPlayer в RecyclerView при быстром скролле. Нужен PlayerPool — пул переиспользуемых плееров. Без пула каждый новый экземпляр создаёт MediaCodec инстанс, что дорого и приводит к MediaCodec$CodecException: Error -19 на некоторых Android 10 устройствах при >3 одновременных инстансах.

AVPlayer / AVPlayerViewController на iOS — для воспроизведения. Для кастомного UI — AVPlayerLayer + собственные контролы. HLS работает нативно через AVPlayer(url:) с m3u8. FairPlay DRM требует серверной части: AVContentKeySession, CKC-ответ от KSM-сервера, делегат ресурсов.

Для Flutter — video_player как базовый слой, chewie для UI. Для серьёзных задач — platform channel к нативному ExoPlayer/AVPlayer (из-за DRM и субтитров).

WebRTC на мобильных — через нативные фреймворки или flutter_webrtc. Реальная сложность — не в самом протоколе, а в сигналинге и TURN-серверах. Без TURN клиенты за симметричными NAT не установят соединение — это примерно 15–20% трафика. Coturn — стандартный open-source сервер.

RTMP публикация на мобильных: LFLiveKit для iOS, HaishinKit как более современная альтернатива. На Android — rtmp-rtsp-stream-client-java или через FFmpeg с JNI. Последнее даёт максимальную гибкость, но бинарник растёт на 10–15 МБ.

Обработка медиа: компрессия и транскодирование

Видео в ProRes может занимать 6 ГБ/минуту. Перед загрузкой нужна компрессия. На iOS — AVAssetExportSession с пресетом 1920×1080 или кастомный AVVideoComposition. VideoToolbox для аппаратного кодирования H264/HEVC — быстрее и экономнее по батарее.

На Android — MediaCodec напрямую или Transformer (Media3) — высокоуровневый API для трансформаций (обрезка, ресайз, эффекты через GlEffectsFrameProcessor). Для изображений — BitmapFactory.Options.inSampleSize для даунсемплинга, Glide / Coil для кеширования. Coil на Coroutines хорошо вписывается в Compose. Загружать оригинал 12 МП в ImageView 200×200dp — классический OutOfMemoryError на устройствах с 2 ГБ RAM.

Как реализовать стриминг на мобильных устройствах: пошаговый план

1. Определить требования: целевая задержка, количество одновременных пользователей, необходимость P2P.
2. Выбрать протокол и стек: WebRTC для видеозвонков, RTMP/HLSLive для вещания.
3. Настроить сигналинг (SIP, WebSocket, MQTT) и TURN-сервер.
4. Реализовать публикацию/просмотр через нативный API или кроссплатформенный плагин.
5. Провести тестирование на реальных устройствах с разными камерами и сетевыми условиями.
6. Оптимизировать битрейт и разрешение в зависимости от пропускной способности.

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

Процесс разработки медиафункциональности

Сложность нелинейна: базовое воспроизведение видео — 1–2 дня, кастомная камера с обработкой кадров и стримингом — 3–5 недель. Начинаем с прояснения требований: DRM, форматы, минимальная OS, поддержка фоновых режимов. Тестирование на железе обязательно — эмулятор не воспроизводит проблемы с Camera HAL, аппаратным кодеком и AudioFocus. Минимальный набор: последний iPhone, iPhone SE, флагман Samsung, бюджетный Android, Android Go (если целевая аудитория — развивающиеся рынки).

Сроки ориентировочно: от 5 рабочих дней (базовое воспроизведение) до 8 недель (комплексная камера со стримингом и DRM). Стоимость рассчитывается индивидуально после анализа ваших требований — свяжитесь с нами для консультации.

Фраза услуги: «Работа с медиа в мобильных приложениях» — это наш профиль. Каждый проект начинается с аудита текущей реализации, выявления узких мест и предложения оптимального стека.

Коммерческие сигналы: закажите аудит вашей медиа-функциональности, получите консультацию инженера без обязательств.