Много лет я пытался убедить друзей-разработчиков создать сайт для дайверов, где мы с товарищами по погружениям могли бы делиться видео. Мне даже казалось, что в этом кроется зародыш лайфстайл-стартапа: видео об экстремальных видах спорта в сочетании с метаданными и обогащением контента под конкретную активность. Беседы за чашкой кофе и пивом ни к чему не приводили. Около полутора лет назад я начал изучать «вайб-кодинг» (vibe coding) и копирование кода из ChatGPT. До появления специализированных инструментов для программирования процесс был не совсем гладким. Затем, прошлой весной, я возобновил работу над проектом с помощью Claude Code. Месяц и примерно 200 коммитов спустя у меня был рабочий сайт для обмена видео для меня и моих друзей. Я назвал его ScubaTube, и с тех пор продолжаю его дорабатывать.
Похоже на другой популярный видеохостинг, но полностью посвященный дайвингу.
Я много лет не занимался разработкой ПО, но в прошлом руководил продуктовыми командами и скучал по возможности замарать руки вот так.
— это небольшой видеосайт для подводных съемок, по умолчанию работающий в приватном режиме: загружаешь клип, отмечаешь место погружения на глубоководном глобусе, добавляешь глубину и температуру воды и делишься им с теми, кто был на лодке. Мне не нравится термин "догфудинг" (dogfooding), но создание ScubaTube стало фантастическим способом по-настоящему познакомиться с новейшими возможностями Mux, включая Mux Robots и Video.js v10.
LinkТребования
Ни YouTube, ни Facebook мне не подошли, по тем же причинам, по которым клиенты Mux создают собственные видеопродукты, вместо того чтобы отдавать свой контент агрегаторам.
Я хотел владеть видео. И дело не в философии. Я хотел, чтобы файлы принадлежали мне и находились под моим контролем. Чтобы они были переносимыми и экспортируемыми, чтобы я мог использовать их так, как сочту нужным в будущем.
Я хотел делиться ими с реальными людьми. Меня не волновали лайки и подписчики. Речь шла о том, чтобы делиться напрямую с местными дайверами и дайв-сообществом, с большим контекстом, чем позволяет социальная лента. У меня есть видение будущего функционала, который поддержит сообщество более глубоко. Я хотел бы использовать сайт для помощи организациям, которые я поддерживаю, таким как Sunflower Star Lab и Giant Giant Kelp Restoration Project.
Я хотел, чтобы качество держалось на уровне. Подводные съемки — это серьезное испытание для кодеров: сине-зеленые цветовые оттенки (часто просто зеленые на моей домашней базе в Монтерее), слабое освещение, взвесь в толще воды и постоянное движение. Если пайплайн сделан спустя рукава или подгоняется под один шаблон, хорошее погружение будет выглядеть как плохое.
Я хотел, чтобы проект пережил меня. За каждым видео на ScubaTube стоит скачиваемый файл MP4. Если сайт закроется, если мне станет скучно, если Mux переключится на производство соковыжималок, видеозаписи все равно останутся переносимыми и доступными для просмотра. Я также хотел реального контроля над встраиванием (embeds) и шерингом, а не иллюзии контроля. Я могу представить, как мой любимый дайв-шоп или инструкторы используют этот сервис и размещают видео на своих собственных сайтах.
Мне также нужны были данные о погружении. Глубина, температура воды, было ли это погружение с лодки или с берега, а также конкретное название места погружения (оно отличается от общего географического положения). Несколько мест погружения часто имеют практически одинаковую точку входа или координаты, и ни одна универсальная платформа не имеет структурированного места для этих данных. Дайв-компьютеры фиксируют все это на протяжении всего погружения, и я хотел, чтобы эти данные тоже были на видео. Подробнее об этом ниже.
LinkКурируемый стек видеоприложения Claude Code
Я выбрал две вещи: Mux для видео и Vercel для хостинга. Я начал с примерного приложения Next.js от Mux, которое включало в себя Next.js и Tailwind. Claude Code порекомендовал все остальное, и я последовал его рекомендациям, почти не споря. Вот большая часть стека:
- Next.js (App Router) для самого приложения, отличное сочетание с Vercel. Я выбрал Vercel из-за давней интеграции с Mux.
- Tailwind CSS для стилизации
- Cloudflare для Turnstile (альтернатива CAPTCHA) и защиты домена
- Resend для электронной почты (партнер Mux, и не зря)
- Mapbox для глобуса мест погружений и геопоиска
- Clerk для аутентификации и управления пользователями
- API Claude от Anthropic для написания SEO-описаний к каждому видео
- Upstash Redis и Vercel Blob для хранения вместо настоящей базы данных. Если все станет сложнее, я рассмотрю партнеров Mux Sanity или Contentful (у обоих теперь есть плагины, интегрированные с Mux Robots)
Большинство из этих сервисов имеют щедрый бесплатный тариф для любителей, что позволило мне создавать проект на ранних этапах с минимальными затратами.
Интеграция с Mapbox для визуализации мест погружения на карте.
Мой главный вывод из выбора платформ заключается в том, что у этих сервисов много общего: хорошая документация, универсальность и отличный опыт разработчика (который все больше становится опытом агента). Claude, ChatGPT и Replit обычно рекомендуют Mux для подобных стриминговых интеграций. Когда Claude порекомендовал другие сервисы, я подозреваю, что ключевым фактором был опыт агента и совместимость. Продукты, которые уважали мое время, — это те, о которых мне никогда не приходилось задумываться.
LinkВкус и направление продукта имеют значение
Я выполнял роль редактора больше, чем инженера. Я задавал видение и направление, выстроил базовую структуру сайта, а затем добавлял более сложные функции по одной за раз. Когда я не был уверен, чего именно хочу, я просил варианты. Селектор миниатюр — отличный пример: я попросил Claude создать несколько версий, опробовал каждую и оставил лучшую. В других случаях я задавал вопросы с открытым финалом и позволял ответам формировать следующий этап. Моя работа заключалась в том, чтобы понимать, что выглядит хорошо, и направлять процесс до тех пор, пока мы не дойдем до хорошей точки остановки. Именно поэтому я теперь ненавижу термин «вайб-кодинг». Он умаляет намеренность и креативность, которые вкладываются в проект, и создает впечатление, будто все полезное создается в результате случайного стечения обстоятельств.
Редактура также означала устранение множества багов. Некоторые были интересными: логотип обрезался так, что на его исправление ушло гораздо больше попыток, чем следовало; мой ИИ-теггинг запускался дважды, так как страница загрузки и вебхук инициировали его одновременно; а глобус Mapbox поначалу зависал.
Большинство исправлений были лишены какого-либо гламура. Процесс загрузки прошел через три отдельные итерации: добавление таймера прошедшего времени и оверлея статуса, перевод этапа анализа в неблокирующий режим и разбор ситуации с редиректом против поллинга. Это не драматическая история. Это просто повседневная рутина разработки.
Just-in-time кодирование от Mux работает быстро, и я добавил две маленькие приятные детали, чтобы время ожидания казалось еще короче. Во-первых, немного интересных фактов о дайвинге во время обработки видео перед его просмотром. Во-вторых, письмо через Resend, подтверждающее, что видео обработано.
Моя любимая история связана с инструментом обрезки клипов (clip trimmer). Я создал его в марте с визуальным таймлайном и маркерами перетаскивания, а затем полностью ударил, потому что реализация была негладкой, а UX — неуклюжим. Мы пересоздали его с нуля в сентябре с поддержкой нескольких сегментов, и потребовалось три исправления в тот же день, чтобы все заработало как надо. Понимание того, когда нужно выбросить что-то готовое, — это такая же продуктовая задача, как и понимание того, что именно нужно создать.
LinkЧто позволил мне создать Mux: Mux Robots, Mux Data и оверлей данных о погружении
Одними из лучших моментов в проекте были те, когда появлялась новая возможность, и я мог использовать ее в ту же неделю.
is now GA. Я перевел ScubaTube с Mux Player еще во время бета-тестирования в августе и перешел на финальный релиз (GA), когда он вышел 1 октября. Это заняло всего несколько минут, и, на мой взгляд, плеер выглядит более отточенным и работает быстрее. Я также участвовал в бета-тестировании Video.js с момента весеннего релиза, сообщая по пути о нескольких багах, включая конфликт CSS между скином Video.js и Tailwind 3, который исчез после обновления до Tailwind 4. Я все еще нахожу пограничные случаи, специфичные для моего стека. Поскольку Video.js — это проект с открытым исходным кодом, вносить вклад в него было очень приятно.
Одной из главных побед при миграции на Video.js v10 неожиданно стала возможность реализовать одну из функций моей мечты: оверлей с данными о погружении поверх видео. Мой подводный компьютер Shearwater — «AI» (air integrated, с интеграцией подачи воздуха), из времен, когда аббревиатура AI еще не была в тренде. Он фиксирует ключевые метрики на протяжении всего погружения. Они синхронизируются с моим приложением журнала погружений Submersion и экспортируются в стандартном формате обмена данными о погружениях UDDF (Universal Dive Data Format), который также поддерживается Subsurface, MacDive и другими приложениями. Теперь эти данные отображаются поверх видео, показывая глубину, расход воздуха и температуру во время погружения. Video.js позволил легко создать этот интерактивный оверлей без необходимости «вшивать» его прямо в видеофайл.
Каждый, кто загружает видео, может видеть вовлеченность и процент отвала зрителей для своих роликов — то, что привычно на YouTube, и отличная функция для любительского сайта. Визуализация времени просмотра построена на основе метрики video_completion от Mux Data для каждого просмотра, усредненной по 100 самым свежим просмотрам видео.
Просмотр показателей отвала и относительного процента досмотра в интерфейсе автора на сайте.
По мере того как я добавляю главы и более длинные видео, я рассчитываю, что эта аналитика вовлеченности станет еще более интересной.
Mux Robots, облачные ИИ-процессы, разворачивались постепенно, пока я вел разработку, поэтому я смог интегрировать несколько функций по мере их появления:
- Теги, заголовки и описания предлагаются автоматически на основе того, что распознано в видео.
- Лучший значок видео выбирается автоматически, и владелец может изменить его в редакторе значков прямо на странице просмотра, перемотав до нужного кадра или перебирая варианты.
- Субтитры и перевод доступны для видео со сценами диалогов. В моих видео диалогов почти нет, поэтому я использовал другие рабочие процессы.
- Главы создаются визуально, а не на основе речи. Mux Robots разбивает каждое погружение на сцены (теперь с помощью процесса analyze_structure), а сайт превращает эти сцены в трек глав формата WebVTT для плеера Video.js.
Новый плагин Mux Robots для Adobe Premiere отлично показывает себя в режиме монтажа и продакшена. Я могу извлекать лучшие значки и автоматически разбивать длинные видео о погружениях на отдельные сегменты в зависимости от происходящего в кадре. Это очень помогает при разборе многочасовых записей погружений из поездки.
Link: TV-режим: бесшовное воспроизведение с Video.js v10
Мой друг Майк хотел режим «для дивана» (lean-back) для своего телевизора, поэтому мы создали TV-режим: плавное, бесшовное, полноэкранное воспроизведение без элементов управления. Он предназначен для Smart TV, AirPlay и трансляций.
Первые версии были неуклюжими. Один плеер, загружающий каждый новый клип, оставлял слишком большую паузу между погружениями, а режим просмотра без рук с заметным стыком каждые 90 секунд — это не совсем то, что нужно. Мы с Claude обдумали несколько подходов, протестировали их и остановились на том, который сработал. Это отличный пример того, как ощущается такое сотрудничество: я понимал, что выглядит неправильно, и мы итерировали до тех пор, пока всё не стало как надо.
Под капотом используются Video.js v10 (через @videojs/react) и Mux, но весь фокус в том, как скрываются паузы между переходами. Вместо того чтобы один плеер перезапускался между клипами, ScubaTube держит активными сразу два плеера, расположенных друг над другом. Пока вы смотрите одно видео, следующее из перемешанной очереди бесшумно буферизуется в фоновом режиме. Когда клип заканчивается, приложение выполняет плавное перекрытие (crossfade) между двумя слоями и начинает воспроизведение предзагруженного видео. Никакого индикатора загрузки, никаких черных вспышек и задержек. Одна сцена погружения плавно перетекает в следующую, дополненная плашкой с названием и локацией в стиле MTV.
Link: Пробел в SEO
Еще в марте я думал, что настроил всё правильно: чистые ЧПУ (slugs), robots.txt, карту сайта, разметку VideoObject JSON-LD и стандартное изображение OG. Учебная базовая SEO-подготовка.
А затем я не проверял всё это в течение шести месяцев.
Когда я наконец провел аудит, я исправил около дюжины вещей за один день: индексацию дубликатов страниц, 404-е ошибки из-за битых ссылок, медленный TTFB главной страницы, отсутствующие канонические ссылки на себя, регрессию OG-изображений, баг с приоритетом описаний и многое другое. На вид все было правильно и всё это время оставалось без проверки — что, как я теперь считаю, является характерной проблемой такого подхода к разработке. Сгенерированный код может выглядеть корректным и при этом ни разу не тестироваться в реальных условиях. Обнаружить это помогла более новая модель, проверившая старую реализацию.
Link: Что я получил из того, чего не ожидал
Теперь я понимаю Mux и окружающую его экосистему гораздо лучше, чем когда был человеком из коммерческого отдела компании. Наши API и документация сделали процесс увлекательным и итеративным.
Я также получил практический опыт разработки агентов, требующий иного набора навыков, чем традиционное программирование, что дало мне личное представление о том, как наши клиенты создают продукты сегодня.
И я на собственном опыте узнал, почему Mux постоянно всплывает при поиске ИИ-инструментов. Когда я спросил ChatGPT, Replit и Claude, как создать продукт для потокового видео, Mux был первым, что предложил каждый из них. Создав проект на его основе, я все понял.
Последние рекомендации ChatGPT по видеоплатформам.
Link: Идея, которую я передаю нашей продуктовой команде
Я хотел улучшить поиск, нахождение и метаданные для видео. Mux Robots взяли на себя теги, заголовки и значки, а субтитры могут работать только с тем, что произносится вслух, чего практически нет в молчаливых видеозаписях погружений.
А теперь представьте субтитры, сгенерированные на основе того, что находится в кадре, а не того, что произносится. «Морской лев плывет сквозь водоросли». «Дайвер заплывает в грот». Эта одна функция дала бы мне навигацию, маркеры глав, поиск, SEO и настоящую доступность — и всё это на основе видеоряда, в котором нет диалогов для создания субтитров. Любой, у кого есть видео подводного мира, дикой природы, систем наблюдения, спорта или с дронов, выиграл бы от этого точно так же.
Я и не знал, что хочу этого, пока не создал сайт, полный видео без звука, и не попытался сделать его находимым. Новый процесс Analyze Structure в Mux Robots уже частично решает эту задачу: он дает каждой сцене короткое название, которое для видео без речи формируется почти полностью из того, что находится на экране. Превратите это в полноценный трек субтитров с привязкой по времени и объедините с мультимодальным поиском, запланированным в дорожной карте Mux, — и немое видео станет таким же легко находимым через поиск, как подкаст.
Link: Планы на будущее
Сейчас сайт находится в отличном состоянии. Я надеюсь, что еще больше дайверов присоединятся и вдохновят на следующий виток идей. По мере роста аудитории я, скорее всего, добавлю модерацию публикаций с помощью Mux Robots, чтобы контент оставался тематическим и подходящим для всей семьи.
Преграды исчезают для новых видов продуктов и небольших SaaS-компаний. Это напоминает мне бум доткомов, когда запуск сайта электронной коммерции требовал 1 миллион долларов на оборудовании от Sun, Oracle и Cisco. Позже эта сумма сократилась до 1000 долларов на LAMP, а затем до 10 долларов на Shopify. Сейчас трафик на сайте очень низкий, и я в основном пользуюсь бесплатными тарифами. Если сайт будет расти, я, вероятно, буду тратить несколько сотен долларов в месяц. Будем надеяться, что снижение этих барьеров стимулирует творческий подход и возможности для разработчиков и предпринимателей любого масштаба.
