Введение

Привет, друзья!

В этой статье я покажу вам, как делать селфи в браузере.

Мы разработаем простое приложение со следующим функционалом:

• при инициализации приложение запрашивает у пользователя разрешение на захват медиапотока (далее также — поток) из видеокамеры его устройства;
• захваченный поток передается в элемент video;
• из потока извлекается видеотрек (далее также — трек), который передается в интерфейс для захвата изображений;
• из экземпляра интерфейса извлекается список поддерживаемых возможностей (capabilities) и настроек (settings) для фото;
• из трека также извлекается список поддерживаемых возможностей и настроек;
• формируется список диапазонных полей (<input type="range">) для установки настроек для фото;
• пользователь имеет возможность снимать фото (take photos) и захватывать фреймы (grab frames);
• фото выводится в элемент img, генерируется ссылка для его скачивания;
• фрейм инвертируется и отрисовывается на холсте (canvas), генерируется ссылка для его скачивания.

Репозиторий.

Приложение будет разработано на чистом JavaScript.

Для создания шаблона приложения будет использован Vite.

Если вам это интересно, прошу под кат.

Меня зовут Назим Гафаров, я разработчик интерфейсов в Mail.ru Cloud Solutions. На дворе 2020 год, а мы продолжаем обсуждать «нововведения» ES6-синтаксиса и преимущества MobX над Redux. Существует много причин использовать Redux в своем проекте, но так как я не знаю ни одной, расскажу о том, почему мы выбрали MobX.

Элементы заката

Уже два часа дня? Ничего за сегодня не сделал. Проснулся, потянулся, видел 6 голосовых сообщений — проигнорировал, принял душ, съел 3 вафли и улегся с мыслями, что мне 35, а я так и не выучил французский. Стоп, я не был в душе, это было вчера.

Попытался купить себе новые конверсы (кроссовки), но не смог выбрать между серым и обсидиановым, оба цвета мне не нравятся. Затем я отвлекся на лайфхаки на Medium, залип там минут на 90. Мне 35! Я думал, что уже давным-давно куплю себе крутую обувь и снимусь в фильме. Мой друг Сэнджей и то снялся в инди фильме. Все время рассказывает об этом.

Мои требования к идеальному движку:

• Желательно self-hosted — я пережил много закрытий сервисов, от narod.ru до google+ и точно знаю, что рано или поздно все протухает, поэтому надежнее всего держать контент у себя. Также посты могут удалять по каким-то фейковым жалобам или по DMCA, как это происходит на Medium и LiveJournal.
• Возможность подключения своего домена — мне нужен сайт-визитка со всеми проектами и ссылками в одном месте, где можно разместить портфолио, резюме, контакты.
• Минимум телодвижений и интерфейса — в идеале интерфейса CMS вообще не должно быть видно, админская панель не нужна, посты должны редактироваться, создаваться и просматриваться в одном месте.
• Полноценный WYSIWYG редактор — поддержка разметки Markdown и обработка её в реальном времени, подсветка кода, вставка картинок из буфера обмена.
• Нормальные комментарии — возможность оставлять анонимные комментарии и авторизовываться через максимум соц. сетей для персонифицированных комментариев.
• Минималистичный внешний вид — я не хочу заниматься версткой и темами, подходящее оформление должно быть из коробки.

Если вы делаете Ctrl+C каждый раз при создании нового компонента в реакте, то эта статья точно для вас!

У реакта нет своего CLI, и понятно почему. Не существует определенных правил, как именно должна выглядеть структура компонента, есть только общие рекомендации в документации. Все разработчики используют структуру, которая прижилась в их команде. А иногда и вовсе приходится поддерживать проекты в разных стилях.