Обзор библиотеки пользовательского интерфейса
Библиотека пользовательского интерфейса упрощает создание современных возможностей взаимодействия с пользователями с помощью Службы коммуникации Azure. Он предоставляет библиотеку готовых к рабочей среде компонентов пользовательского интерфейса, которые можно перейти в приложения:
Примечание.
Подробные сведения о библиотеке веб-пользовательского интерфейса см. в статье "История библиотеки веб-интерфейса". В нем вы найдете дополнительную концептуальную документацию, краткие руководства и примеры.
Композиты. Эти компоненты — это решения, которые реализуют распространенные сценарии взаимодействия. Вы можете быстро добавить видеозвонки или чат (доступные только в библиотеке веб-интерфейса) в приложения. Составные элементы — это компоненты более высокого порядка с открытым кодом, созданные с помощью компонентов пользовательского интерфейса.
Компоненты пользовательского интерфейса. Эти компоненты — это стандартные блоки с открытым исходным кодом, которые позволяют создавать пользовательские возможности взаимодействия. Компоненты предлагаются для функций вызова и чата, которые можно объединить для создания интерфейсов.
Эти клиентские библиотеки пользовательского интерфейса используют язык разработки и ресурсы Microsoft Fluent. Fluent UI обеспечивает базовый уровень библиотеки пользовательского интерфейса и активно используется во всех продуктах Майкрософт.
В сочетании с компонентами пользовательского интерфейса библиотека пользовательского интерфейса образует клиентскую библиотеку с отслеживанием состояния для звонков и чата. Этот клиент не зависит от какой-либо конкретной платформы управления состоянием и может быть интегрирован с обычными диспетчерами состояний, такими как Redux или React Context. Указанную клиентскую библиотеку с отслеживанием состояния можно использовать с компонентами пользовательского интерфейса с целью передачи им свойств и методов для визуализации данных. Для получения дополнительной информации см. Обзор клиента с отслеживанием состояния.
Примечание.
Те же компоненты и составные компоненты, предлагаемые в библиотеке пользовательского интерфейса, доступны в комплекте конструктора для Figma, поэтому вы можете быстро разрабатывать и создавать прототипы вызовов и чатов.
Общие сведения о составных компонентах
Составные компоненты — это компоненты более высокого уровня, состоящие из компонентов пользовательского интерфейса, которые представляют собой готовые решения для распространенных сценариев взаимодействия с использованием Служб коммуникации Azure. Разработчики могут с легкостью создать экземпляр Composite, используя маркер доступа к Службам коммуникации Azure и необходимую конфигурацию для звонка или чата.
| Составной | Варианты использования |
|---|---|
| CallwithChatComposite | Взаимодействие с функциями звонков и чатов, позволяющее пользователям запускать или присоединяться к потоку звонков и чата. В интерфейсе пользователь может обмениваться сообщениями с помощью голосовой связи и видео, а также доступа к полнофункциональные потоки чата, в которых сообщения можно обмениваться между участниками. Она включает поддержку взаимодействия Teams. |
| CallComposite | Интерфейс вызовов, позволяющая пользователям начать вызов или присоединиться к нему. В пользовательском интерфейсе пользователи могут настроить свои устройства, участвовать в вызове с видео и просматривать других участников, в том числе участников с включенным видео. Для Взаимодействия Teams включена функция лобби для пользователя, ожидая того, чтобы он был принят. |
| ChatComposite | Интерфейс чата, используя который, пользователь может отправлять и получать сообщения. События беседы, такие как набор текста, чтение, вход и выход участников, отображаются для пользователя как часть цепочки чата. |
Общие сведения о компонентах пользовательского интерфейса
Чистые компоненты пользовательского интерфейса можно использовать для разработчиков, для создания взаимодействия, от создания фрагментов видео в сетку для демонстрации удаленных участников, а также для организации компонентов в соответствии с спецификациями приложений. Компоненты пользовательского интерфейса поддерживают настройку в соответствии с фирменной символикой и стилем приложения.
| Площадь | Компонент | Description |
|---|---|---|
| Совершение вызовов | Макет сетки | Компонент сетки для организации плиток с видео в сетку N x N |
| Плитка с видео | Компонент, отображающий видеопоток (в случае его доступности) или статический компонент по умолчанию, когда он недоступен | |
| Панель элементов управления | Контейнер для организации DefaultButtons для подключения к определенным действиям вызова, таким как отключение звука или демонстрация экрана | |
| Коллекция видео | Компонент коллекции видео по ключу, который динамически изменяется по мере добавления участников | |
| Dialpad | Компонент для поддержки ввода номера телефона и тонов DTMF | |
| Чат | Цепочка сообщений | Контейнер, отображающий сообщения чата, системные и пользовательские сообщения |
| Поле отправки | Компонент ввода текста с дискретной кнопкой отправки | |
| Поле отправки форматированного текста | Компонент ввода форматированного текста с параметрами форматирования и дискретной кнопкой отправки | |
| Индикатор состояния сообщения | Компонент уведомления о прочтении с несколькими состояниями для отображения состояния отправленного сообщения | |
| Индикатор набора текста | Текстовый компонент для отображения участников, которые активно печатают текст в беседе | |
| Распространенный почтовый сервис | Элемент участника | Общий компонент для визуализации участника звонка или чата, включая аватар и отображаемое имя |
| Список участников | Общий компонент для отображения списка участников звонка или чата, включая аватар и отображаемое имя |
Установка библиотеки веб-пользовательского интерфейса
Клиенты с отслеживанием состояния — это часть пакета @azure/communication-react.
npm i --save @azure/communication-react
Какой артефакт пользовательского интерфейса лучше всего подходит для моего проекта?
Основные сведения об этих требованиях помогают выбрать правильную клиентную библиотеку:
- Какой нужен уровень настраиваемости? Основные клиентские библиотеки Служб коммуникации Azure не имеют пользовательского интерфейса и спроектированы так, чтобы вы могли создавать любые нужные вам пользовательские интерфейсы. Компоненты библиотеки пользовательского интерфейса предоставляют ресурсы пользовательского интерфейса за счет меньшей настройки.
- Какие платформы будут использоваться? Разные платформы предоставляют разные возможности.
Сведения о доступности компонентов в библиотеке пользовательского интерфейса доступны здесь, но ключевые компромиссы приведены в следующей таблице.
| Клиентская библиотека или пакет SDK | Сложность реализации | Возможность настройки | Совершение вызовов | Чат | Взаимодействие между командами |
|---|---|---|---|---|---|
| Составные компоненты | Низкая | Низкая | ✔ | ✔ | ✔ |
| Базовые компоненты | Средняя | Средняя | ✔ | ✔ | ✔ |
| Основные клиентские библиотеки | Высокая | Высокая | ✔ | ✔ | ✔ |
Составные компоненты — это решения, реализующие распространенные сценарии взаимодействия. Вы можете добавить видеозвонки в приложения. Составные элементы — это компоненты более высокого порядка с открытым кодом, которые разработчики могут использовать для снижения времени разработки и сложности разработки.
Общие сведения о составных компонентах
| Составной | Варианты использования |
|---|---|
| CallComposite | Интерфейс вызовов, позволяющая пользователям начать вызов или присоединиться к нему. В интерфейсе пользователи могут настроить свои устройства, участвовать в вызове с видео и видеть других участников, включая те, которые с включенным видео. Для взаимодействия Teams включает функции лобби, CallComposite чтобы пользователи могли ждать, чтобы принять участие. |
| ChatComposite | Интерфейс ChatComposite обмена текстовыми сообщениями в режиме реального времени обеспечивает пользователям. В частности, пользователи могут отправлять и получать сообщения чата с событиями от ввода индикаторов и получения квитанции о чтении. Кроме того, пользователи также могут получать системные сообщения, такие как добавленные или удаленные участники, а также изменения заголовка чата. |
Составные сценарии для вызова
Присоединение к видео/аудиозвонку
Пользователи могут присоединиться к вызову с помощью URL-адреса собрания Teams или настроить вызов Службы коммуникации Azure. Этот подход обеспечивает более простой интерфейс, как и приложение Teams.
Предварительный вызов
В качестве участника вызова можно указать имя и настроить конфигурацию по умолчанию для аудио- и видеоустройств. Затем вы готовы перейти к вызову.
Взаимодействие с вызовами
Вызывающий состав обеспечивает комплексный интерфейс, оптимизирует время разработки и фокусируется на чистом макете.
Интерфейс вызова предоставляет все эти возможности в одном составном компоненте, предоставляя четкий путь без сложного кода, что приводит к более быстрому времени разработки.
Качество и безопасность
Мобильные составные компоненты для звонков инициализированы с помощью маркеров доступа Службы коммуникации Azure.
Дополнительные сведения
Дополнительные сведения о мобильных составных композитах для звонков см . в случаях использования.
Составные сценарии для чата
Внимание
Эта функция Службы коммуникации Azure сейчас доступна в предварительной версии.
Предварительные версии API и пакеты SDK предоставляются без соглашения об уровне обслуживания. Рекомендуется не использовать их для рабочих нагрузок. Некоторые функции могут не поддерживаться или могут иметь ограниченные возможности.
Дополнительные сведения см . в дополнительных условиях использования для предварительных версий Microsoft Azure.
Взаимодействие с чатом
Предоставляет ChatComposite возможности обмена текстовыми сообщениями в режиме реального времени. Благодаря гибкости и масштабируемости ChatComposite можно адаптироваться к разным макетам или представлениям приложений без сложности. Вы также можете не ChatComposite отображать представление и получать уведомления только в соответствии с вашими бизнес-потребностями.
| iOS | Android |
|---|---|
|
|
Качество и безопасность
Как и в ChatComposite случае CallCompositeс маркерами доступа, также используется Службы коммуникации Azure маркеры доступа. Чтобы обеспечить доступ к чату только пользователям с соответствующим разрешением, их маркеры пользователей необходимо добавить в допустимый поток чата перед запуском интерфейса чата.
Дополнительные сведения
Дополнительные сведения о мобильных составных элементах для чата см. в вариантах использования.
Какой артефакт пользовательского интерфейса лучше всего подходит для моего проекта?
Эти требования помогают выбрать правильную клиентную библиотеку:
Какой нужен уровень настраиваемости? Службы коммуникации Azure основные клиентские библиотеки не имеют пользовательского интерфейса и предназначены для создания любого пользовательского интерфейса. Компоненты библиотеки пользовательского интерфейса предоставляют ресурсы пользовательского интерфейса за счет меньшей настройки.
Какие платформы будут использоваться? Разные платформы предоставляют разные возможности.
Ниже приведены некоторые ключевые компромиссы.
| Клиентская библиотека или пакет SDK | Сложность реализации | Возможность настройки | Совершение вызовов | Чат | Взаимодействие Teams |
|---|---|---|---|---|---|
| Составные компоненты | Низкая | Низкая | ✔ | ✔ | ✔ |
| Основные клиентские библиотеки | Высокая | Высокая | ✔ | ✔ | ✔ |
Дополнительные сведения о доступности компонентов в библиотеке пользовательского интерфейса см . в вариантах использования библиотеки пользовательского интерфейса.