Начало работы с готовностью к вызову и библиотекой пользовательского интерфейса

Статья
06/01/2023

Важно!

Эта функция Службы коммуникации Azure сейчас доступна в предварительной версии.

Предварительная версия API и пакеты SDK предоставляются без соглашения об уровне обслуживания. Не рекомендуется использовать их для рабочих нагрузок. Некоторые функции могут не поддерживаться или иметь ограниченные возможности.

Дополнительные сведения см. в разделе Дополнительные условия использования предварительных версий Microsoft Azure.

Поток присоединения пользователя к звонку по ссылке электронной почты

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

Спрогнозировать все проблемы или их комбинацию может быть невозможно, но применив это руководство, вы можете:

Снижение вероятности проблем, влияющих на пользователя во время вызова
Предоставляйте сведения о проблеме, только если это негативно повлияет на работу
Избегайте охоты пользователя за разрешением; Предоставление интерактивной помощи по устранению проблемы

В этом руководстве рассматривается средство диагностики тестирования сети Службы коммуникации Azure. Пользователи могут использовать средство диагностики тестирования сети для дальнейшего устранения неполадок в сценариях поддержки клиентов.

Структура учебника

В этом руководстве мы используем библиотеку пользовательского интерфейса Службы коммуникации Azure, чтобы создать интерфейс, который позволяет пользователю присоединиться к вызову. Это руководство состоит из трех частей:

Часть 1. Добавление пользователя в поддерживаемый браузер
Часть 2. Обеспечение доступа приложения к микрофону и камере
Часть 3. Выбор нужного микрофона и камеры

Предварительные требования

Visual Studio Code на одной из поддерживаемых платформ.
Node.js, активная версия LTS и версия Maintenance LTS (рекомендуется 10.14.1). Используйте команду node --version, чтобы проверить установленную версию.

Скачать код

Полный код для этого руководства можно получить на сайте GitHub.

Структура приложения

У пользователей есть несколько препятствий, которые необходимо преодолеть при присоединении к звонку из поддержки браузера для выбора нужной камеры. В этом руководстве используется React с библиотекой пользовательского интерфейса Службы коммуникации Azure для создания приложения, выполняющего проверки готовности к вызову. Эти проверки помогут пользователю пройти через поддержку браузера, разрешения камеры и микрофона и, наконец, настройку устройства.

Пользовательский поток приложения выглядит следующим образом:

Схема потока, показывающая поток пользователя через пример готовности к вызову

Последнее приложение предложит пользователю перейти в поддерживаемый браузер и получить доступ к камере и микрофону, а затем позволить пользователю выбрать и просмотреть параметры микрофона и камеры перед присоединением к вызову:

GIF-файл, показывающий сквозное взаимодействие с проверками готовности к вызову и настройкой устройства

Настройка проекта

Чтобы настроить приложение React, мы используем шаблон create-react-app для этого краткого руководства. Эта create-react-app команда создает простое в запуске приложение TypeScript на основе React. Команда устанавливает Службы коммуникации Azure пакеты npm и пакет npm FluentUI для создания расширенного пользовательского интерфейса. Дополнительные сведения о create-react-app см. в статье Начало работы с React.

# Create an Azure Communication Services App powered by React.
npx create-react-app ui-library-call-readiness-app --template communication-react 

# Change to the directory of the newly created App.
cd ui-library-call-readiness-app

Завершив этот процесс, вы должны увидеть полностью развернутое приложение в папке ui-library-call-readiness-app. В этом кратком руководстве мы изменим файлы внутри src папки.

Установка пакетов

Так как эта функция доступна в общедоступной предварительной версии, необходимо использовать бета-версии пакетов Службы коммуникации Azure npm. Используйте команду , npm install чтобы установить следующие пакеты:

# Install Public Preview versions of the Azure Communication Services Libraries.
npm install @azure/communication-react@1.5.1-beta.1 @azure/communication-calling@1.10.0-beta.1

Примечание

Если вы устанавливаете пакеты связи в существующее приложение, @azure/communication-react в настоящее время не поддерживает React версии 18. Чтобы перейти на более раннюю версию до React версии 17 или ниже, следуйте этим инструкциям.

Начальная настройка приложения

Чтобы начать работу, мы заменим содержимое по умолчанию App.tsx create-react-app базовой настройкой, которая:

Регистрирует необходимые значки, используемые в этом руководстве
Задает поставщик темы, который можно использовать для настройки пользовательской темы
StatefulCallClient Создайте с поставщиком, который предоставляет дочерним компонентам доступ к клиенту вызова

src/App.tsx

import { CallClientProvider, createStatefulCallClient, FluentThemeProvider, useTheme } from '@azure/communication-react';
import { initializeIcons, registerIcons, Stack, Text } from '@fluentui/react';
import { DEFAULT_COMPONENT_ICONS } from '@azure/communication-react';
import { CheckmarkCircle48Filled } from '@fluentui/react-icons';

// Initializing and registering icons should only be done once per app.
initializeIcons();
registerIcons({ icons: DEFAULT_COMPONENT_ICONS });

const USER_ID = 'user1'; // In your production app replace this with an Azure Communication Services User ID
const callClient = createStatefulCallClient({ userId: { communicationUserId: USER_ID } });

/**
 * Entry point of a React app.
 */
const App = (): JSX.Element => {
  return (
    <FluentThemeProvider>
      <CallClientProvider callClient={callClient}>
        <TestComplete />
      </CallClientProvider>
    </FluentThemeProvider>
  );
}

export default App;

/**
 * Final page to highlight the call readiness checks have completed.
 * Replace this with your own App's next stage.
 */
export const TestComplete = (): JSX.Element => {
  const theme = useTheme();
  return (
    <Stack verticalFill verticalAlign="center" horizontalAlign="center" tokens={{ childrenGap: "1rem" }}>
      <CheckmarkCircle48Filled primaryFill={theme.palette.green} />
      <Text variant="xLarge">Call Readiness Complete</Text>
      <Text variant="medium">From here you can have the user join their call using their chosen settings.</Text>
    </Stack>
  );
};

Выполнение Create React App

Давайте протестируем нашу установку, выполнив:

# Run the React App
npm start

После запуска приложения перейдите http://localhost:3000 в браузер, чтобы увидеть работающее приложение. Вы увидите зеленую галочку с сообщением Test Complete .

Дальнейшие действия

Часть 1. Поддержка браузера

Поделиться через