Веб-страница смотрит в камеру вживую — 30 кадров в секунду, офлайн и без сервера

Смотри, идея на одну строку: одна веб-страница включает камеру — и вживую обводит рамками всё, что видит: кружку, растение, твою руку. 30 кадров в секунду. Без сервера, без ключа, и в самолётном режиме тоже.

И вот что тут по-настоящему новое. Гонять модель по живому видео в браузере раньше не получалось — было медленно, кадры лагали, и все толковые проекты уезжали на сервер с видеопотоком. В июле 2026 Google выпустила LiteRT.js — тот самый движок, что крутит ИИ прямо в твоём телефоне на Android и iOS, теперь и в браузере. И, главное, он умеет считать на видеокарте через WebGPU — в разы быстрее прежних веб-раннеров, а на графике счёт идёт на десятки раз против обычного CPU. Вот на этом скачке скорости проект и едет: модель наконец успевает за видео.

Почему именно это

Это не встроенная в браузер модель, которая читает один кадр и отдаёт JSON. Там модель фиксированная — маленький чат, который «посмотрел на фото». А здесь ты берёшь свою специализированную модель — детектор объектов, трекер руки, апскейл — и гонишь её по потоку кадров. Это другой класс задач: не «разбери снимок», а «смотри и реагируй прямо сейчас».

И этим ты реально будешь пользоваться. Помахал рукой — перелистнулась презентация. Навёл камеру на стол — страница назвала всё, что там лежит. Причём картинка с камеры никуда не уходит: считается у тебя на устройстве, офлайн, бесплатно. Такое не стыдно показать и вправду хочется показать.

Чему научишься

• Своя модель в браузере. Впервые подключаешь не чужой облачный сервис, а конкретную модель-файл .tflite — готовую скачиваешь с Kaggle или Hugging Face. Открывается целый класс: детекция, поза тела, глубина, апскейл, распознавание речи — всё локально.
• GPU против CPU. Скажешь движку считать на видеокарте (webgpu) — и увидишь разницу вживую: те же кадры, но плавно. Поймёшь, почему «на устройстве» перестало значить «медленно».
• Цикл реального времени. Научишься гонять модель в петле по кадрам камеры и рисовать поверх результат. Это база любого «смотри и реагируй» — от игр до примерочных.

Готовый стартовый промпт

Не проси агента «сделай сайт, который распознаёт объекты с камеры» — он по привычке подключит облачный vision-API и ключ. Скажи прямо: модель локальная, .tflite, считает на GPU, по живому видео.

Сильный промпт не оставляет догадок: видно, что модель локальная и в формате .tflite, что считает на GPU, что вход — поток кадров, а не один снимок, и что есть фолбэк. Результат с первого раза ближе к тому, что ты задумал.

Что получится

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

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

План на выходные

• Вечер пятницы: заведи пустой index.html, подключи @litertjs/core и включи камеру в <video>. Цель — увидеть своё лицо на странице.
• Суббота: скачай готовую модель детекции .tflite, скомпилируй с webgpu, прогони один кадр и выведи рамки в консоль.
• Воскресенье: нарисуй рамки и подписи на <canvas> поверх видео, добавь счётчик FPS и плашку-фолбэк. Выложи как статическую страницу — сервер не нужен.

Это ровно тот масштаб, где за выходные получается законченная, живая штука — и ты впервые чувствуешь, что модель работает у тебя, а не где-то в облаке за деньги.

Источник: Google Developers Blog — LiteRT.js