У меня есть друзья, которые присылают голосовые на три минуты. Содержание обычно умещается в одно предложение, но чтобы его достать, нужно прослушать «короче, слушай, тут такое дело…». Голосовое не пробежишь глазами, на созвоне его не включишь, а ночью рядом со спящим человеком тем более.

В какой-то момент я решил ответить им так же неудобно. Получился pleasejusttext.me: пишешь ответ текстом, а на выходе MP4, где мультяшные руки не спеша набирают его на телефоне. Меня заставили слушать, пусть теперь смотрят.

Набирать можно по-разному: обычно, с опечатками, с маникюром (длинные ногти, медленнее и иногда мимо) или как дед — одним дрожащим пальцем, подолгу зависая над каждой буквой. А на второй день после запуска в комментариях попросили «сделай большие паузы, будто он курит». Теперь есть и такой режим: посреди фразы правая рука уходит из кадра и возвращается то с латте, то с сигаретой.

Сразу решил, что сервера для рендера не будет. Видео рисуется и кодируется на телефоне пользователя: ничего не загружается, нет очереди, и если вдруг придёт много людей, платить мне будет не за что. Ниже про то, как это устроено.

Общая схема

текст
  → таймлайн (какая клавиша нажата в какой момент)
  → renderFrame(t) на canvas
  → WebCodecs, H.264
  → MP4
  → системное «Поделиться»

Стек обычный: Vite, TypeScript, Vitest. Кодированием и упаковкой в MP4 занимается Mediabunny. Для тестов в Node используется @napi-rs/canvas. Код я писал вместе с ИИ-ассистентом, и первая версия вместе с покупкой домена и настройкой деплоя заняла примерно вечер. Архитектура из следующего раздела тут сильно помогла: любой результат проверяется рендером одного кадра.

Таймлайн

Сначала текст превращается в список событий: «нажать h в 1.23 с», «shift в 2.10 с», «зависнуть над к в 4.5 с» (это дед ищет букву), в конце «нажать отправить».

Резать текст по length нельзя: "👍🏽".length равно 4, а для человека это одно нажатие. Поэтому текст делится на графемы через Intl.Segmenter:

const seg = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
export const graphemes = (s: string) =>
  Array.from(seg.segment(s), (x) => x.segment);

Этой же функцией считается счётчик символов под полем ввода. Поэтому maxlength у textarea я не ставил: браузер считает его в UTF-16, а не в том, что видит пользователь.

Сам таймлайн строит маленькая модель iOS-клавиатуры. В ней есть QWERTY, ЙЦУКЕН, испанская раскладка и AZERTY, страницы 123 и #+=, shift и caps lock (двойной тап, если подряд идут две заглавные и больше). Если набрать Hi! Привет, на экране видно, как рука жмёт глобус и клавиатура переключается на русскую. Это, пожалуй, самая бесполезная и самая любимая моя деталь.

Все задержки и опечатки берутся из генератора с сидом (mulberry32), поэтому одинаковый ввод всегда даёт одинаковое видео. Режимы отличаются только профилем:

const PROFILES: Record<Mode, Profile> = {
  normal:   { key: [0.09, 0.2],  typo: 0,    hover: 0   },
  grandpa:  { key: [0.5, 1.1],   typo: 0,    hover: 0.6 },
  typos:    { key: [0.07, 0.15], typo: 0.12, hover: 0   },
  manicure: { key: [0.12, 0.26], typo: 0.05, hover: 0   },
  breaks:   { key: [0.09, 0.2],  typo: 0,    hover: 0   },
  // плюс паузы между словами, смены раскладки и т. д.
};

Видео ограничено минутой. У деда лимит 30 символов: иначе его ответ получается длиннее голосового, на которое он отвечает.

Кадр как функция от времени

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

Пальцы двигаются по опорным точкам вида «быть на клавише X ровно в момент T», между ними позиция интерполируется с easing. Дрожь деда — две синусоиды сверху:

tip = {
  x: tip.x + 1.6 * Math.sin(t * 13.1) + 1.1 * Math.sin(t * 7.3),
  y: tip.y + 1.4 * Math.sin(t * 11.7 + 1),
};

Картинок в проекте нет вообще: клавиатура, пальцы, ногти, кружка, сигарета и дым рисуются путями Canvas 2D.

Раз функция чистая и не трогает DOM, она без изменений работает в Node. Тесты рендерят конкретные кадры, отдельный скрипт выгружает PNG для визуальной проверки, а OG-картинка сайта — это просто кадр из настоящего видео.

Как появились перекуры

Когда попросили паузы «будто курит», перекраивать анимацию не пришлось.

Перерыв — это просто интервал в таймлайне, рядом с событиями:

interface Break {
  kind: 'coffee' | 'smoke';
  t0: number;
  t1: number;
}

Генератор вставляет его после какого-нибудь слова (ближе к пробелу, чтобы рука не уходила посреди слова), и кофе с сигаретой чередуются. Внутри перерыва поза руки зависит от прогресса p от 0 до 1, а не от секунд:

const p = (t - brk.t0) / (brk.t1 - brk.t0);
// 0.00–0.10  рука уходит за кадр
// 0.13–0.25  возвращается с кружкой или сигаретой
// 0.36–0.46  подносит ко рту
// 0.56–0.66  опускает
// 0.74–0.82  снова уходит
// 0.86–1.00  возвращается пустой и печатает дальше

Если видео не влезает в минуту и таймлайн целиком сжимается, перерывы сжимаются вместе с ним, и хореографию это не ломает.

Самое интересное было в рисовании. В первой версии рука поднимала кружку к верхнему краю экрана и протаскивала её через весь кадр. Но камера смотрит на телефон сверху, а рот находится где-то под нижним краем. Теперь рука уезжает вниз и увеличивается примерно в 1,6 раза, как будто приближается к лицу, а после затяжки снизу поднимается дым.

Сигарета сначала была палкой, приклеенной к пальцу. Между пальцами она с такого ракурса проходит над одним пальцем и под другим, так что всё решил порядок слоёв:

const SMOKE = [
  FOREARM, PINKY, RING, 'hand', THUMB,
  MIDDLE, 'cig', INDEX, // сигарета между средним и указательным
];

С кофе забавно вышло: «правильная» розетта, как у бариста, на маленькой картинке читалась как папоротник или ёлочка. Победило самое банальное: белая чашка, латте и сердечко, повёрнутое обратно на угол руки, чтобы не лежало на боку.

Одна строчка, которая сломала всё остальное

Перед выкаткой я сравнил старую и новую версии: сгенерировал таймлайны и кадры старых режимов на нескольких текстах и сравнил хеши. Отличалось почти всё, хотя старые режимы я не трогал. Виновата была эта строчка:

let nextKind = rng() < 0.5 ? 'coffee' : 'smoke';

Она вызывала генератор во всех режимах, сдвигала последовательность случайных чисел, и у всех менялись тайминги. Видео при этом оставались вполне правдоподобными, просто другими, так что глазами такое не заметить. Исправление:

let nextKind = breakAt.length && rng() < 0.5 ? 'coffee' : 'smoke';

После этого из 36 сравнений не отличалось ни одно. Если у вас детерминированная генерация, такое сравнение со старой версией дешёвое и очень полезное.

Кодирование: WebCodecs через Mediabunny

Основной цикл выглядит так:

const output = new Output({
  format: new Mp4OutputFormat({ fastStart: 'in-memory' }),
  target: new BufferTarget(),
});
const source = new CanvasSource(canvas, {
  codec: 'avc',
  bitrate: QUALITY_MEDIUM,
  keyFrameInterval: 2,
});
output.addVideoTrack(source, { frameRate: fps });
await output.start();

for (let i = 0; i < frameCount; i++) {
  if (signal?.aborted) {
    await output.cancel();
    throw new DOMException('Render cancelled', 'AbortError');
  }
  const t = i * dt;
  renderFrame(ctx, timeline, t, opts);
  await source.add(t, dt); // энкодер может притормозить цикл
  onProgress?.((i + 1) / frameCount);
}
await output.finalize();

Самое важное здесь — await на каждом кадре. Так энкодер сам притормаживает цикл, и кадры не копятся в памяти, что на телефонах особенно важно.

Ещё пара моментов. Поддержку лучше проверить заранее через canEncodeVideo('avc', { width, height }): если устройство не умеет H.264 в таком размере, человек увидит понятное сообщение, а не битый файл. H.264 в MP4 с fastStart выбран потому, что так видео показывается прямо в чате и в Telegram, и в WhatsApp. Отмена сделана через обычный AbortSignal: закрыл окно, и рендер остановился.

Почему не captureStream() и MediaRecorder? Он пишет в реальном времени, то есть 40 секунд видео пишутся 40 секунд. И формат зависит от браузера: часто это WebM, который мессенджеры показывают не везде. WebCodecs работает быстрее реального времени и всегда отдаёт MP4. MediaRecorder я оставил в планах как запасной вариант для устройств без WebCodecs.

На выходе 720×720 при 30 fps.

Мелочи, о которых полезно знать

Шрифты. Canvas рисует тем шрифтом, который загружен прямо сейчас. Если Inter ещё не успел подгрузиться, первые кадры получаются системным шрифтом, а потом текст «прыгает». Поэтому начертания загружаются явно через FontFace (латиница и кириллица отдельно) и ждать их перед рендером.

Отправка. На телефоне удобнее всего системное меню «Поделиться»:

const file = new File([blob], 'reply.mp4', { type: 'video/mp4' });
if (navigator.canShare?.({ files: [file] })) {
  await navigator.share({ files: [file] });
} else {
  // ссылка на скачивание
}

Только share() можно вызвать лишь в ответ на действие пользователя, а рендер идёт несколько секунд, и за это время браузер уже «забывает» про нажатие. Поэтому кнопок две: «Сделать видео», а когда оно готово — «Отправить».

Встроенные браузеры. Instagram, TikTok и Facebook открывают ссылки в своём браузере, а он часто не умеет делиться файлами. Сайт их узнаёт и предлагает открыть страницу в нормальном браузере, на Android сразу ссылкой в Chrome.

Вес. Рендерер, Mediabunny и шрифты грузятся лениво, так что первая загрузка весит около 11 КБ в gzip. Модуль видео подтягивается заранее, пока браузер простаивает или когда человек ставит курсор в поле ввода.

Хостинг — статика на Cloudflare и один маленький Worker, который считает анонимные события: сколько видео сделали, сколько отправили, сколько было ошибок. Cookies нет, тексты на сервер не уходят. Обходится всё это чуть дороже домена.

Что дальше

Главная дыра — устройства без WebCodecs H.264: сейчас они видят «не поддерживается», и запасной вариант через MediaRecorder покрыл бы часть из них. И, конечно, я проверил всё на куда меньшем числе реальных телефонов, чем хотелось бы.

Попробовать можно здесь: pleasejusttext.me. Бесплатно и без регистрации, интерфейс на русском, английском, испанском и французском. Исходники под MIT: github.com/lgordey/typing-reply.

И чтобы без обид: голосовые — нормальная штука, когда ты за рулём или руки заняты. Шутка про другое — про две минуты «короче, слушай» вместо одной строчки. И отправлять такое стоит тем, кто посмеётся вместе с вами.

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