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