Введение

Proficonf — сервис видеоконференций, работающий в браузере на технологии WebRTC.

Недавно мы выпустили Embedded Video Chat / Iframe API / Video SDK — способ интегрировать (встроить) видеоконференцию в свой продукт (приложение или вебсайт) и управлять ей программно.

Сейчас основной фокус компании направлен на повышение привлекательности нового продукта - встраиваемых видеоконференций. Мы предлагаем интеграторам удобный способ встроить нашу конференцию в их продукт - приложение или вебсайт. Основные преимущества решения заключаются в том, что мы даем возможность получить видеоконференции по функциональности аналогичные Zoom’у, у себя на сайте или в приложении, буквально за считанные минуты, просто вставив сниппет кода из нескольких строк.

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

<aside> 💡 Познакомиться подробнее с тем, как это выглядит на практике, можно при помощи этой демки

</aside>

Мы также продолжаем предоставлять сервис видеоконференции как продукт для конечного пользователя. Другими словами, у нас есть 2 группы пользователей: одни проводят конференции на нашей платформе, используя некий дефолтный UI, а вторые хотят эту конференцию утащить в свой продукт и там ее жестко кастомизировать под себя.

Примечания

<aside> 🖼️ Особенности, которые относятся к запуску приложения в iframe, помечаются такими блоками с иконкой “окна” :)

</aside>

<aside> 📱 Особенности, которые относятся к запуску приложения на мобильных устройствах, помечаются такими блоками с иконкой смартфона.

</aside>

<aside> 💬 Большинство функционала, который описывается в ТЗ, уже реализован, его можно посмотреть на app.proficonf.com и он требует лишь более продуманного UI/UX для себя. Однако в этом же документе встречается функционал, который предусмотрен, но пока отсутствует в UI. Он отмечается таким вот фоном, как у этого комментария.

</aside>

Комментарии к ТЗ:

• 🇬🇧 Все дизайн-макеты необходимы на английском, несмотря на то, что в данном ТЗ некоторые текста, названия кнопок и элементов могут приводится на русском языке
• ✨ Местами ТЗ написано не очень четко, без “вот это положить сюда, сделать такое-то меню, покрасить таким-то цветом”. Это сделано намерено. У меня есть “картинка в голове”, но я не хочу ее передавать в точности, так как хочу дать возможность исполнителю проявить свои навыки UX’ера.

Требования к дизайну пользовательского интерфейса

Исходя из всего изложенного, у нас образовываются такие требования к дизайну:

1. Продвинутая адаптивность
2. Кастомизация
3. Расширяемость