Упрощаем вставку видео с YouTube

📖 Когда компьютер – это основной рабочий инструмент, а множество программ и сайтов используются ежедневно, то незаметно для самого себя формируются шаблоны поведения с тем или иным интерфейсом. Уже не задумываясь, автоматически тянется курсор к крестику, чтобы закрыть окно, жмем enter для отправки формы, F12 для вызова консоли в браузере, а при загрузке аватарки выбираем файлы с расширениями png или jpeg, но никак не exe. И еще много подобных мелочей, которые становятся рефлексами, а не осмысленными действиями. Такой же эффект может случиться и при разработке любого функционала, с которым взаимодействует пользователь. Для разработчика, который регулярно реализовывает один и тот же кусочек логики, такой функционал становится предельно очевидным и уже интуитивно понятным в использовании. Но это совсем не значит, что такой же опыт имеют и пользователи, для которых строится приложение. Об этом важно помнить и осмысленно подходить к отладке, оптимизации и валидации функционала, с которым будут работать живые люди.

📌 Хороший пример, который демонстрирует то, что я описал в первом абзаце, это вставка видео с YouTube в каком-нибудь пользовательском интерфейсе. Это может быть как админка для контентщиков, так и пользовательский кусок приложения. Для разработчика, который обрабатывает, хранит и выводит потом контент, очевидно – нужно вставлять iframe. Четыре клика: открыл ролик, под видео нажать «Поделиться», потом кнопку «Встроить» и скопировать html-код сгенерированный YouTube. А для пользователя это ЦЕЛЫХ четыре клика, и они совсем не интуитивные. Нужно найти все эти кнопки и потом понять, что конкретно скопировать и куда потом вставить в интерфейсе управления контентом. Очуметь можно, если делать такое в первый раз.

📌 По опыту могу сказать, что в контент пихают все, что только можно, а код iframe всегда в последнюю очередь. Запихнуть можно четыре разных вариации данных: просто ссылка на сам ролик, которая открывается в адресной строке браузера. Ссылка, которая сразу появляется в попапе «Поделиться». Третье – ссылка из кода iframe. И только четвертым будет весь код вставки, который и ожидается в интерфейсе.

❗️ Все эти вариации можно провалидировать при вставке и ругаться на пользователя, просить вставить корректные данные. А пользователь в ответ будет плеваться и ругать разработчиков логики и интерфейса. Но пользователя не обязательно мучать, и не дергаться каждый раз на сообщения, что вставка видео не работает. Такую ситуацию легко обработать – пусть суют все что угодно, из всех этих данных можно получить то, что нужно для дальнейшей обработки.
Для вывода видео с YouTube достаточно иметь только ID видео. Он хранится во всех вариациях ссылки, который могут притащить пользователи. Просто обрабатываем эти варианты и дергаем из данных ID, а уже при выводе или при сохранении контента формируем остатки ссылки в валидном формате.

👨‍💻 К примеру, у нас есть ролик с ютуба, который нужно вставить фреймом в контент. Вытаскиваем ID видео из любого варианта данных, для этого хватит одной регулярки:

const regex = /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]+)/;
const id1 = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'.match(regex)[1];
const id2 = 'https://youtu.be/dQw4w9WgXcQ?si=3oKOZGyuwtdmvpMa'.match(regex)[1];
const id3 = 'https://www.youtube.com/embed/dQw4w9WgXcQ?si=3oKOZGyuwtdmvpMa'.match(regex)[1];
const id4 = '<iframe ... src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=3oKOZGyuwtdmvpMa" ...'.match(regex)[1];
console.log(id1, id2, id3, id4);

Получив id, можно сформировать любую ссылку или обертку, которая точно будет валидной. И все довольны – валидные данные сохранили, а пользователь пихает все, что ему удобно и привычно взять для вставки.
Все тоже самое применимо и к любым другим сервисам и вставкам, не только к видео с ютуба.

👻 Бонус
По id видоса можно дернуть с ютуба картинку-превью, сформировав ссылку по шаблону:
https://img.youtube.com/vi/dQw4w9WgXcQ/0.jpg, где dQw4w9WgXcQ – это id.

Обработка анимированных webp изображений

📖 Недавно в рабочем проекте на бекенде столкнулись с необходимостью обработки webp, которые содержат несколько кадров – анимированные картинки. Ранее анимацию передавалась через gif-ки, но прогресс не стоит на месте и теперь картинки двигаются и в формате webp. А также скоро и png будут содержать анимацию, недавно вышла новая спецификация, но это совсем свежее обновление и браузеры их еще толком не поддерживают – это проблема нас будущих. Пока нужно разобраться с webp.

Для обработки картинок чаще всего на сервере используется библиотека ImageMagick, с ней можно работать во многих языках бекенда. Но если напрямую, без специальных флагов, начать ресайзить анимированный webp, то картинка становится статичной – теряются кадры анимации, а иногда и вовсе ломается обработка. Поэтому сперва нужно определить, какого типа будем обрабатывать изображение: статичное или анимированные.

📌 Из спецификации webp узнаем, какую структуру имеют заголовки и как там указывается тип. Первые байта заголовка имеет следующую структуру:
– RIFF – магическое число (52 49 46 46), которое обозначает начало файла формата RIFF (Resource Interchange File Format)
– Далее четырехбайтовое целое число, указывающее размер всего файла минус первые восемь байт (52 49 46 46 + size)
– Следующее магическое число – (57 45 42 50), оно определяет формат файла webp
– Далее идет четыре байта VP8X, которые определяют особенности webp.
– И сразу после VP8X идет один байт, который как раз и указывают особенности картинки: анимация, альфа-канал и так далее
По битовой маске 17-го байта можно определить особенности картинки:

– 0b00000001 Есть альфа-канал (прозрачность)
– 0b00000010 Есть анимация
– 0b00000100 Есть EXIF-метаданные
– 0b00001000 Есть XMP-метаданные
– 0b00010000 Есть ICC-профиль

❗️ Также анимацию можно определить по заголовку ANIM, который обозначает в каком месте файла начинаются кадры анимации. Но в данном примере будет определять через битовую маску 17го байта.

📌 Теперь разберемся с ImageMagick. Ему для корректной работы с анимированными изображениями нужно передавать флаг -coalesce, тогда будут обработаны все кадры внутри изображения. А для оптимизации кадров можно использовать флаг -layers CompareAny. Таким образом для ресайза по ширине в 500 пикселей команда для ImageMagick будет такая:

magick anim.webp -coalesce -resize 500x -layers CompareAny output-anim.webp

👨‍💻 Всех вводных хватает и остается только написать код обработки, который определит тип webp(статичный или анимированный) и выполнит ресайз изображения. Код можно писать на любом языке, но под рукой был python, на нем приведу пример.

# Проверка, содержит webp анимацию или нет
def is_animated_webp(file_path):
    with open(file_path, "rb") as f:
        data = f.read(17)
    
    # Проверяем сигнатуру анимированного WebP (RIFF + WEBPVP8X + ANIM)
    is_riff = data.startswith(b'RIFF')
    is_webp = data[8:12] == b'WEBP'
    is_vp8x = data[12:16] == b'VP8X'
    has_animation = (data[16] & 0b00000010) != 0  # Проверка флага анимации
    
    return is_riff and is_webp and is_vp8x and has_animation

И функция для вызова ImageMagick, которая сделает ресайз изображения:

def resize_webp(input_path, output_path, target_width):
    if is_animated_webp(input_path):
        # Анимированный WebP: обрабатываем с учетом кадров
        command = [
            'magick',
            input_path,
            '-coalesce', # Восстанавливаем полные кадры
            '-resize', f'{target_width}x', # Ресайз по ширине
            '-layers', 'CompareAny', # Оптимизация анимации
            output_path
        ]
    else:
        # Статичный WebP
        command = [
            'magick',
            input_path,
            '-resize', f'{target_width}x',
            output_path
        ]
    
    # Запускаем ImageMagick
    subprocess.run(command, check=True)

На этом пока все, ждем теперь появления анимированного PNG, чтобы и с ним покопаться и разобраться, как обрабатывать.

Социальный опрос в БАГодельне

❗️ Чтобы получше понять, какие посты интереснее и нет ли какого-то перекоса по формату, появилось несколько вопросов ко всем участникам канала. Следом выйдет два анонимных опроса, где можно выбрать по несколько вариантов ответов. Помогите прояснить интерес и понять, на сколько вообще тот или иной формат востребован. Возможно, какие-то корректировки стоит сделать. А то мне самому стало казаться, что появилась «пердозировка» задачками и их разборами.

❗️ Если есть, что добавить помимо опроса, то пишите в комментарий к посту , в группе-чатике или мне в личку @ipatove.

❤️ Заранее всем спасибо за ответы, и за то, что читаете, реагируете на посты и пробуете решать задачки.

⁉️ А теперь внимание, опрос!

Итоги CTF-задач августа и анонс новых

📖 За месяц мы запустили и порешали все вместе четыре задачи. Это немного, но и не мало. А судя по статистке ответов на опросы, которые были на прошлой неделе, стало понятно, что нужно немного сбавить обороты и не забывать про основную тематику – посты с разборами задач и материалами по разработке в целом. Да и мне самому выпускать по задаче в неделю не всегда удобно, одна задача из-за других дел, сползла на будний день, хотя изначально планировал публиковать их только по выходным. По активности решения, очевидно, что задачи в выходные дни гораздо активнее решаются.

❗️Поэтому новые задачи будут выходить только по выходным и немного реже – раз в две недели, чередуясь с разборами прошлых задач. Это поможет получше готовить задачи, чтобы не было промахов, как было с подключением, также появится время на подготовку задач из разных категорий – поискать референсы и идеи. И самое главное, что появится время на посты про разработку.
Чтобы было интереснее решать и появился дух соперничества, я планировал ввести небольшие призы, которые будут выдаваться по итогам месяца. Однако с новым графиком, раз в месяц нечего считать – всего две задачи. Поэтому символические призы будут за каждую задачку – за 1-3 места. Призы будут в виде звезд и премиума в телеграм, так проще всего отправлять призы.

Однако за август задания были каждую неделю и за них можно собрать турнирную таблицу. И выдать призы так, как изначально задумывалось. Про это не было анонса, поскольку не был уверен, что получится выпустить все четыре задачи и что вообще кто-то будет решать.

🎉 Результаты задач августа, публикую только Топ-3 участника из каждой задачи:

Jail / Задача «Побег с помощью Brainfuck» // Решение
🥇 Евгений Курмыса
🥈 xof
🥉 zzz3230

Misc / Задача «Vibe Shell» // Решение
🥇 Евгений Курмыса
🥈 zzz3230
🥉 xof

Osint / Задача «Отголосок прошлого» // Не будет разбора
🥇 nof
🥈 xof
🥉 Евгений Курмыса

Misc & Reverse / Задача «Тихий страж» // Решение 1 и Решение 2
🥇 Евгений Курмыса
🥈 нет решения
🥉 нет решения

Победители:
🥇 Евгений Курмыса – приз 6 мес премиума в телеграм
🥈 xof – приз 3 мес премиума в телеграм
🥉 zzz3230 – приз 3 мес премиума в телеграм

🎉 Призы уже разослал победителям.

Итоговые результаты считал по формуле: 1-е решение – 3 балла, 2-е – 2 балла, 3-е – 1 балл, 4 и ниже – 0.5 баллов