8-битная вебкамера в стиле Speccy

[Алексей Мартынов]

Хочу представить Вам свой небольшой pet-проект, сделанный для души и для отработки некоторых современных веб-технологий.

Проект называется «8-bit Camera» и позволяет делать фото и обрабатывать изображения в пиксельном стиле прямо в Вашем браузере. Адрес сайта проекта: 8bitcam.ru (https://8bitcam.ru).

Для чего это нужно? Ну, например, чтобы делать крутые фотки и аватарки, как в старых играх. Ещё можно делать иллюстрации и спрайты для своих инди-игр в олдскульном стиле. Да и просто «Just for fun».

Некоторые возможности, которые реализованы в данный момент:


Десять 8-битных фильтров, которые можно применять к фото или видео «на лету».
Три разрешения изображения.
Режим Interlaced (эмуляция чересстрочной развёртки).
Режим Mirroring (зеркалирование изображения).
Захват видео в режиме «Selfie camera» с помощью вебкамеры ПК или камер смартфона. Выберите «Разрешить» при запросе браузера про использование камеры.
Загрузка своих фото и видео для обработки фильтрами в режиме «Upload image/video».
Скачивание загруженного изображения или текущего кадра видео (кнопка «Take a picture!» или клавишей Enter).
Просмотр видео в полноэкранном режиме на ПК и планшетах (квадратик в правом нижнем углу видео).
Включение/отключение звука видео (кружочек в левом нижнем углу видео).
Работа сайта без интернета (естественно, после его полной загрузки).

Работоспособность протестирована в Chrome, Safari и Firefox, а также на iPhone и iPad. В Firefox есть проблемы с загрузкой видеофайлов.

Пара комментариев по работе с сайтом:


Снимки и видео отображаются только локально в Вашем браузере и никуда не передаются.
Управлять воспроизведением видео можно кликом на нём или клавишей пробел.

Пример обработки фото фильтрами:

Оригинальное фото

https://8bitcam.ru/examples/original.jpg

Classic (цвета Speccy без знакомест)

https://8bitcam.ru/examples/classic.png

Speccy (со знакоместами)

https://8bitcam.ru/examples/speccy.png

Sepia

https://8bitcam.ru/examples/sepia.png

Grayscale

https://8bitcam.ru/examples/grayscale.png

Black & White

https://8bitcam.ru/examples/blackwhite.png

Dithering

https://8bitcam.ru/examples/dithering.png

Marsport

https://8bitcam.ru/examples/marsport.png

Matrix

https://8bitcam.ru/examples/matrix.png

Saboteur

https://8bitcam.ru/examples/saboteur.png

Fairlight

https://8bitcam.ru/examples/fairlight.png

[Алексей Мартынов]

В режим "Speccy" добавил поддержку знакомест, а режим без знакомест, только с классической палитрой ZX Spectrum, переименовал в "Classic".
Картинки выше обновил.
Пилю сохранение в SCR.

P.S. А ещё подправил палитру Speccy.

[Алексей Мартынов]

Добавил сохранение в формате SCR для фильтров Speccy, Black & White, Dithering и Fairlight (появляется кнопочка .SCR снизу-справа от картинки). Работает как для вебкамеры, так и для загруженных изображений.
И сделал добавление картинок в онлайн галерею в один клик.

[newart]

Зашел в надежде на то что кто-то прикрутил Game Boy Camera к спектруму...
(могло бы быть популярно на всяческих пати где непримернно есть живой спектрум, в связке с принтером конечно)

- - - Добавлено - - -

Классический режим понравился, вот бы можно было его к Zoom подрубать и включать на собеседованиях ))

[Алексей Мартынов]

Ну, зум не зум, а сохранение видеороликов хочу сделать.

[Алексей Мартынов]

Добавил регулировку яркости.

[Алексей Мартынов]

Нашлось немного времени и добавил эффект в стиле ASCII Art.
Как фото, конечно, не очень (в силу небольшого разрешения), как видео - довольно забавно)
На сайте https://8bitcam.ru вместо Classic надо выбрать ASCII Art. И можно поиграться с яркостью.

P.S. В галлерее за это время появилось несколько забавных картинок)

[Алексей Мартынов]

Проект переехал на адрес 8bitcam.ru (https://8bitcam.ru) по причине нежелания ГоуДэдди обслуживать клиентов из РФ.
Всё работает без изменений, но теперь будет меньше буржуйских рож в галерее.