Приступая к работе с пакетом JavaScript библиотеки пользовательского интерфейса Службы коммуникации Azure, вызывая очередь звонков Teams и автосекретарь
Внимание
Эта функция Службы коммуникации Azure сейчас доступна в предварительной версии.
Предварительные версии API и пакеты SDK предоставляются без соглашения об уровне обслуживания. Рекомендуется не использовать их для рабочих нагрузок. Некоторые функции могут не поддерживаться или могут иметь ограниченные возможности.
Дополнительные сведения см . в дополнительных условиях использования для предварительных версий Microsoft Azure.
Чтобы упростить взаимодействие клиентов с клиентом, библиотека пользовательского интерфейса Службы коммуникации Azure предоставляет пакеты JavaScript, чтобы попробовать кроссплатформенные решения для использования библиотеки пользовательского интерфейса. Это руководство является самым быстрым способом входа в вызов с помощью библиотеки пользовательского интерфейса и Teams.
В этом руководстве будет приведено следующее:
- Вы можете разместить интерфейс звонков на любой веб-странице, подключающей клиентов к бизнесу.
- Создание интерфейса вызова на платформах, отличных от React
Необходимые компоненты
Перед завершением всего процесса необходимо выполнить эти действия. Обратитесь к администратору Teams, если у вас есть вопросы о настройке голосовых приложений Teams или федерации клиентов Teams.
- Visual Studio Code на одной из поддерживаемых платформ.
- рекомендуется использовать Node.js, Active LTS и LTS версии LTS узла 20. Используйте команду
node --version, чтобы проверить установленную версию. - Ресурс Служб коммуникации Azure. Создайте ресурс коммуникации.
- Выполните настройку клиента Teams для взаимодействия с ресурсом Службы коммуникации Azure
- Работа с очередями вызовов Teams и Службы коммуникации Azure.
- Работа с автосекретарями Teams и Службы коммуникации Azure.
Проверка узла и VS Code
Вы можете проверить правильность установки узла с помощью этой команды.
node -v
Выходные данные сообщают, что установленная версия завершается ошибкой, если узел не установлен и добавлен в ваш PATH. Как и в случае с узлом, можно проверить, установлен ли Visual Studio Code с помощью этой команды.
code --version
Как и в случае с узлом, эта команда завершается ошибкой, если на компьютере возникла проблема с установкой VS Code.
Начало работы
Мы создадим этот проект с помощью 4 простых шагов.
1. Создание проекта
Чтобы приступить к работе, мы создадим новую папку для проекта, выполнив следующую команду в терминале или командной строке.
Для Windows с помощью командной строки используйте следующую команду:
mkdir ui-library-js-test-application; cd ui-library-js-test-application
Для macOS с помощью терминала используйте следующую команду:
mkdir ui-library-js-test-application && cd ui-library-js-test-application
Эти скрипты создают новую папку и перемещают ее в нее.
Далее мы хотим создать новый файл с именем index.html. Это веб-страница, к которому мы присоединяем интерфейс вызова.
2. Получение кода
Сначала скачайте пакет JavaScript из составного файла JavaScript исходящего вызова. Поместите этот пакет в тот же каталог, что и ваш index.html.
Затем необходимо открыть index.html в VS Code и добавить следующий фрагмент кода.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Embedded call composite basic example</title>
<style>
/* These styles are something we provide for the calling experience, please update for your needs */
/* these apply to the calling experience you will need to style your button how your desire */
#outbound-call-composite-container-ready {
height: 22rem;
width: 32rem;
position: absolute;
bottom: 1rem;
right: 1rem;
box-shadow: 0 0 0.5rem 0;
border-radius: 1rem;
padding: 0.5rem;
z-index: 5;
}
</style>
</head>
<body>
<div id="outbound-call-composite-container"></div>
<button id="start-call-button">Your calling button</button>
<!-- replace with https://github.com/Azure/communication-ui-library/releases/latest/download/outboundCallComposite.js for development and prototyping -->
<script src="./outboundCallComposite.js"></script>
<script type="module">
const createCallingExperience = async () => {
const userId = { communicationUserId: "<Add your ACS ID here>" };
const token = "<Enter your ACS token>";
const displayName = "Enter the DisplayName for your user";
const callAdapter = await outboundCallComposite.loadCallComposite(
{
userId: userId,
token: token,
displayName: displayName,
targetCallees: [
{ teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" },
], // Provide the identifier you want to call, can be flat as a string.
},
document.getElementById("outbound-call-composite-container"),
{
options: {
callControls: {
cameraButton: true,
screenShareButton: false,
moreButton: true,
peopleButton: false,
raiseHandButton: false,
displayType: "compact",
},
localVideoTile: { position: "floating" },
},
}
);
window.onbeforeunload = () => {
callAdapter.dispose();
};
// Update the container id to trigger the styles we set above
const container = document.getElementById("outbound-call-composite-container");
container.setAttribute("id", "outbound-call-composite-container-ready");
};
const startCallButton = document.getElementById("start-call-button");
startCallButton.onclick = createCallingExperience;
</script>
</body>
[! ВАЖНО отметить, что этот файл index.html и пакет outboundCallComposite.js JavaScript должны находиться в той же папке, если вы не хотите изменять импорт в этом файле.
3. Настройка Службы коммуникации Azure и голосового приложения Teams
Затем мы хотим создать удостоверение локального пользователя, чтобы использовать его для проверки подлинности локального пользователя и запуска вызова. После получения этих значений для id token пользователя мы хотим внести некоторые изменения в index.html файл, который мы сделали ранее.
const userId = { communicationUserId: "<Add your ACS ID here>" };
const token = "<Enter your ACS token>";
const displayName = "Enter the DisplayName for your user";
Мы хотим обновить эти сведения с userId token помощью портал Azure или Azure CLI. Вы также должны задать свой displayName.
Затем мы хотим внести изменения, чтобы задать идентификатор учетной записи ресурса для голосового приложения Teams, который вы извлекли ранее при федеративном ресурсе служб коммуникации Azure. Обратитесь к администратору Teams, если это не сделано.
const callAdapter = await outboundCallComposite.loadCallComposite(
{
userId: userId,
token: token,
displayName: displayName,
targetCallees: [
{ teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" }, // <- update this teamsAppId value.
],
},
document.getElementById("outbound-call-composite-container")
);
4. Запуск приложения
Теперь, когда мы закончили все настройки, пришло время запустить приложение.
Откройте окно терминала или командной строки в этом каталоге и выполните следующую команду.
npx http-server@latest -p 3000
Этот скрипт с помощью Node запускает HTTP-сервер и размещает index.html файл и пакет JavaScript. Открытие в браузере http://localhost:3000. Вы увидите белую страницу с кнопкой, и при нажатии кнопки вы увидите следующий экран.
[! ВАЖНО! Обратите внимание, что если вы пытаетесь перейти на страницу, не использующую локальный узел, ваш интерфейс вызова не будет работать из-за причин безопасности.
Нажмите кнопку, замеченную start call в библиотеке CallComposite пользовательского интерфейса, чтобы инициировать вызов голосового приложения Teams.
Использование в рабочей среде
В настоящее время это руководство и пакеты JS находятся в общедоступной предварительной версии. Если вы рады нажать на вызов и хотите узнать, как можно использовать CallComposite для создания возможностей нажатия кнопки для вызова для вашего продукта, у нас есть запись обсуждения в нашем репозитории GitHub, в которой показано, как интегрировать библиотеку пользовательского интерфейса в другие платформы node Framework. Инструкции руководства, которые вы только что сделали непосредственно, преобразуются в то, что описано в этом шоу, и сообщите о загрузке составных элементов библиотеки пользовательского интерфейса в других платформах, кроме React.
Следующие шаги
Дополнительные сведения о голосовых приложениях Teams см. в нашей документации по автосекретарям Teams и очередям вызовов Teams. Кроме того, ознакомьтесь с нашим руководством по созданию более полного интерфейса с помощью React.
Краткое руководство. Присоединение вызывающего приложения к очереди вызовов Teams
Краткое руководство. Присоединение вызывающего приложения к автосекретарю Teams