На canvas транслируется видео поток с камеры. Необходимо:

1. Сверстать внешний вид представления, согласно изображению "main view.jpg" (вывод камеры сделать серым, в центре овал, вокруг которого затемненное пространство до краев), все надписи, присутствующие на изображении и кнопка в 2х состояниях – active / disabled

2. Вокруг овала есть рамка, в нескольких цветовых вариантах, согласно изображению "states-and-tips.jpg". Над кнопкой есть блок подсказок, в который могут погружаться 1-10 строк текста с подсказками. Блок растет вверх. Цвет блока подсказок может быть серым полупрозрачным или зеленым, как на картинке.

3. Рамка вокруг овала может принимать вид таймлайна, с заданным временем заполнения и несколькими режимами внешнего вида – первый изображен на рисунке timeline_error.jpg, второй режим (timelines.jpg) – это плавное заполнение с изменением цвета по мере заполнения. Время заполнения и все цвета бэкграундов и самих линий задаются константами.

4. Центральный овал нужно представить как объемный стеклянный цилиндр заданного радиуса (переменная), по которому должны перемещаться две линии, координаты перекрестия которых задаются скриптом. Нужно геометрически правильно, с использованием кривых Безье отрисовать эти линии при любой координате пересечения. При изменении координаты пересечения линий они должны плавно с заданной скоростью (переменная) переместиться в новую точку.

Вся анимация должна быть максимально легковесной с применением RequestAnimationFrame. Детали в личке.

Proposals 2

Andrey Chvil

Winning proposal

5 1

Projects -
Rating -
Rating 430

Budget: 8500 RUB Deadline: 2 days

Здравствуйте, готов приступить к реализации этой задачи. Нужно будет еще обсудить некоторые моменты и технические нюансы. Обращайтесь.

The list does not show proposals concealed by the client or freelancer with a Plus profile, as well as proposals violating rules

Current freelance projects in the category HTML & CSS

Pet Food

Testing & QA 17 proposals 11:13

Not specified
Transfer of the finished main page from Bolt.new to WordPress/Elementor Pro

Web Programming 69 proposals 4 August

Not specified
Automation based on Google Sheets for signing up for trial classes (online language school)

Javascript and Typescript 63 proposals 4 August

Not specified
Page layout on WordPress (ACF) according to the existing site style

Web Programming 104 proposals 4 August

Not specified
Redesign the website on WordPress.

Web Programming 78 proposals 4 August

Not specified

Vladislav Y.
Nelidovo, Russia

Projects 72
Rating -
Rating 2 205

Andrey Chvil

Andrey Chvil

Proposals are currently absent

Current freelance projects in the category HTML & CSS

Pet Food

Transfer of the finished main page from Bolt.new to WordPress/Elementor Pro

Automation based on Google Sheets for signing up for trial classes (online language school)

Page layout on WordPress (ACF) according to the existing site style

Redesign the website on WordPress.