Рисование во время звонка (Jitsi Meet)
Сервис звонков построен на платформе Jitsi (open source).
https://github.com/jitsi/jitsi-meet.
Больше ссылок по платформе:
https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-web
https://community.jitsi.org/t/how-to-how-to-build-jitsi-meet-from-source-a-developers-guide/75422
Задача: реализация функционала создания, передачи и отображения у собеседника графических элементов в режиме реального времени.
Рисование должно быть реализовано в две стороны. От эксперта на устройство оператора и с устройства оператора на админ панель эксперту.
Функционал должен быть реализован в рамках Jitsi Meet библиотеки.
Эксперт - пользователь десктопной веб-страницы админпанели.
Оператор - пользователь мобильного приложения, установленного на устройстве с ОС ios или android и сопряженного с конкретным экспертом.
ФУНКЦИОНАЛ
Рисования с админ панели на устройство
Панель меню рисования.
Находясь в экране звонка, эксперт активирует режим рисования, нажимая соответствующую кнопку (AR) в интерфейсе панели фрейма jitsi. Повторное нажатие на кнопку AR скрывает меню рисования.
Панель меню скрыта.
Панель меню открыта.Отображается панель меню рисования с левой стороны фрейма звонка.
Панель содержит следующие кнопки:
- Карандаш
- Указка
- Ластик
- Кнопка очищения экрана
- Графические элементы: знак “стрелка”, знак “стоп”
- Текст
- Аннотация
Карандаш. Рисование.
Эксперт может выбрать цвет и толщину линии для рисования. Эксперт рисует линии, перемещая курсор, изображение отправляется оператору при перемещении курсора мыши или тачпада (см анимацию ниже).
Указка.
Когда активируется режим указки, курсор меняется на красную точку с хвостом и координаты положения курсора передаются оператору. При перемещении курсора экспертом, его положение обновляется у оператора. Завершается режим указки нажатием на кнопку указки на панели рисования, при завершении указка пропадает у эксперта и у оператора.
Ластик.
При клике на кнопку ластика открывается панель выбора размера, курсор отображается в виде иконки ластика. В состоянии, когда левая кнопка мыши зажата, элементы, нарисованные экспертом, все из возможных: карандаш, готовые элементы, текст и аннотация, очищаются под курсором.
Кнопка очищения всего экрана.
При клике на кнопку все нарисованные экспертом, все из возможных: карандаш, готовые элементы, текст и аннотация, удаляются с экрана.
Объекты (стрелка, значок стоп).
Я как эксперт нажимаю на знак “стрелка” или знак “стоп”, этот значок появляется как готовый объект и передается оператору. Размер объектов можно менять, растягивая за угловые точки.
Текст.
При клике на кнопку текста, на экране отображается поле для ввода текста с границами и текстовым курсором. Поле можно растягивать по границам и перемещать, удерживая левой кнопкой мыши.
Аннотация.
При клике на кнопку аннотации отображается наклейка “стикер” с текстовым курсором. Эксперт может отредактировать текст аннотации перед размещением его на “доске”. Поле можно растягивать по границам и перемещать, удерживая левой кнопкой мыши.