Кейс реалізації синхронізації та відеотранскодингу на проекі Education домену
22.09.2022 490Contents
Ми в компанії SDH вже робили багато складних та легких задач. Інколи на проектах є щось схоже, базові речі. Cаме ці фічі, які будуть у статті, не схожі на всі інші.
Проект - навчальна платформа з 50 тисячами користувачів.
Регіон - США.
Опис задачі
Замовник поставив перед нами задачу: спростити і полегшити завантаження пакетів навчальної інформації на сайт. Пакет - навчальний контент для вчителя, який допомагає вести заняття з учнями, свого роду методичний матеріал. Відповідальна за створення навчального контенту особа (назвем його Гаррі) повинен завантажувати його на сайт. У замовника на той час вже було рішення на базі Drupal з незручною адмін-панеллю. Гаррі створює пакет з HTML сторінок. Ці HTML сторінки мають яскравий дизайн, насичені анімацією та відео.
Наше завдання полягало у полегшенні цього процесу для Гарі, щоб він, не користуючись ftp та Drupal, міг легко завантажувати матеріали для вчителів.
Проблеми
У ході реалізації проекту ми вирішували такі основні проблеми:
- незручність роботи з адмін-панеллю Drupal;
- об’ємні пакети контенту;
- проблеми відтворення анімацій та відеофайлів різного формату;
- відеотранскодинг для перетворення відеофайлів у потокове відео.
Оцінка та план
Написання повністю всього проекту у нас зайняло трохи більше двох місяців на всі розділи і функціональність:
- Юзери;
- Environments;
- Packages;
- логування всіх подій в адмінці;
- права доступів в адмінці;
- збір аналітики на користувацькій частині;
- синхронізація web додатка з API Dropbox;
- попередній перегляд;
- публікація;
- відеотранскодинг.
На проекті були задіяні:
- backend dev (full-time)
- frontend dev (part-time)
- QA (part-time)
- PM
- BA (part-time)
- DevOps (part-time)
Вирішення проблеми №1
Незручність роботи з адмінкою Drupal та обʼємні пакети з контентом. Один пакет міг важити більше 2,5 Гб. Ми одразу відкинули ідею завантаження його через браузер на фронтенді. Тому що пакет міг би завантажуватися декілька годин, при цьому не можна було б закривати браузер (а якщо випадково закрити?). Щоб уникнути ризиків тривалого завантаження та помилок, ми запропонували розробити синхронізацію зі стороннім сервісом, який був встановлений на компʼютер Гаррі. Таким чином, процес завантаження на сервер не залежить від роботи браузера, а може протікати фоново.Після етапу investigation, ми зупинилися на Dropbox і його зовнішньому АРІ.
Флоу роботи такий
- Гаррі завантажує пакет на Dropbox в спеціальну папку.
- В адмінці на сторінці інформації про пакет він просто натискає одну кнопку “Синхронізувати”. Процес синхронізації пішов.Візуально це виглядає так, спочатку обчислення, потім прогрес бар показує відсоток завантаження:
- Після того, як процес завантаження завершиться, статус зміниться. Зʼявиться драфтова версія пакету, який Гаррі може передивитися перед тим, як версія стане доступною для вчителів.
- Якщо все добре, тоді можна переводити даний пакет з Draft в Production version, тобто, щоб вчителі бачили оновлений методичний матеріал.
Процесс синхронизації
При запуску синхронізації створюється список файлів в Dropbox, які треба скопіювати в S3.Цей процес виглядає так:
Перевіряється структура потрібної директорії (пакету) Dropbox.Якщо наступний елемент є файл, то з його метаданих береться інформація про час зміни на сервері Dropbox. Цей час порівнюється з часом останньої синхронізації в нашому додатку.
Якщо час зміни на сервері Dropbox більше ніж у нас на сервері, то путь до файлу додається в список на копіювання в S3. Вже в процесі формування цей список паралельно обробляється запущеною задачею, яка копіює файл з Dropbox в S3. Ключом в S3 сховище являється путь до файлу в Dropbox. Після завершення копіювання перевіряється які файли є в S3 та відсутні в Dropbox. Складається список і відсутні файли видаляються з S3.
Процес переводу пакета з Development version зі статусом Draft в Production відбувається за допомогою копіювання файлів в S3 (за окремим префіксом в файлі), але з іншим префіксом в ключах файлів.
Після етапу розробки ми запустили тестування. Тестування полягало в тому, щоб знайти підводні камені, при яких синхронізація могла не відбутися. Наприклад, файли в папці не такі, як потрібні чи пошкоджені. Позитивним кейсом було побачити повідомлення, що синхронізація успішна.
Вирішення проблеми №2
Відеотранскодінг. Продукт який ми розробляли, хоститься на AWS, тому Проблема №2 вирішувалась за допомогою його можливостей. Пакет з контентом містив багато відеофайлів. Вимоги до програвання відео були такими, щоб відео відтворювалось на всіх браузерах та на всіх девайсах. Раніше наш замовник зберігав відео у пакетах у двух форматах: .mp4 та .ogg, що подовжувало час на формування пакету. Ми запропонували перекодувати відео за допомогою AWS Elemental MediaConvert в потокове відео.
Плюси:
- при формуванні пакету, Гаррі мав зберігати відео в одному форматі .mp4;
- відтворення на у всіх браузерах та на всіх девайсах.
Як це працює?
Пакет має багато статичних файлів (HTML сторінок, CSS та JS файлів), які лежать на AWS S3.
При завантаженні пакету на S3, в корінь додається маніфест з кількістю відеофайлів у пакеті. При кожному створенні відеофайлу на AWS, спрацьовує тригер, який збільшує лічильник створених відео файлів. Коли створена кількість відеофайлів в AWS досягає кількості, заявленої в маніфесті, запускається job, в якому спрацьовує перекодування. Перекодування займає деякий час залежно від довжини відео. У випадку успіху чи навпаки, на endpoint відправляється запит про завершення.
Перед завантаженням пакету на S3, в нього додається js-файл, який ініціює програвач для для потокового відтворювання, а також необхідні зміни в корневому html (зазвичай index.html).
У момент запуску програвача, робиться запит на backend, відповідь містить потрібний плейлист.
Важливо сказати, що всі корневі html повинні мати схожу структуру, класи та ідентифікатори елементів, що спростило рішення.
Етап тестування був напряму з S3 прода, тобто у AWS не було пісочниці. Ми тягнули відео-файли з нашого тестового сервера. Тестування коштувало чимало грошей для замовника. Тому що треба було перевіряти, як перекодовуються реальні відеофайли, а кожна секунда перекодування мала свою ціну.
Technologies: Python, Django, Celery, Boto3, BeautifulSoup
Досягнуті результати
Команді проекту вдалося реалізувати задачу замовника, позбавивши Гаррі головного болю. Гаррі тепер має зручну адмін-панель для завантаження пакетів навчального контенту, у тому числі об’ємних файлів. Завдяки синхронізації з Dropbox, навчальна інформація потрапляє на платформу всього у кілька кліків, швидко та з можливістю фонового завантаження. Це значно економить час Гаррі.
Реалізована за допомогою AWS Elemental MediaConvert функція відеотранскодингу дозволяє користувачам уникнути проблеми невідтворення файлів різного формату. Таким чином, відтворені у потоковому режимі відеофайли коректно працюють на всіх браузерах і девайсах.
Маючи досвід реалізації різних веб-проектів та командою з більш ніж 100 фахівців, ми створюємо веб-додатки на замовлення (custom web application), що забезпечують максимальну гнучкість у розробці програмного забезпечення для проектів будь-якої складності та масштабу.
Discuss your project
Keeping up with evolving technology trends and practices, we create cutting-edge software solutions.
кейс розробка