Wprowadzenie do biblioteki interfejsu użytkownika usług Azure Communication Services w języku JavaScript wywołujących kolejkę połączeń usługi Teams i automatyczną obsługę
Ważne
Ta funkcja usług Azure Communication Services jest obecnie dostępna w wersji zapoznawczej.
Interfejsy API i zestawy SDK w wersji zapoznawczej są udostępniane bez umowy dotyczącej poziomu usług. Zalecamy, aby nie używać ich w przypadku obciążeń produkcyjnych. Niektóre funkcje mogą nie być obsługiwane lub mogą mieć ograniczone możliwości.
Aby uzyskać więcej informacji, zapoznaj się z dodatkowymi warunkami użytkowania dla wersji zapoznawczych platformy Microsoft Azure.
Aby ułatwić lepszą komunikację biznesową z klientami, biblioteka interfejsu użytkownika usług Azure Communication Services udostępnia pakiety języka JavaScript umożliwiające wypróbowanie rozwiązań dla wielu platform na potrzeby korzystania z biblioteki interfejsu użytkownika. Ten samouczek jest najszybszym sposobem na przejście do wywołania przy użyciu biblioteki interfejsu użytkownika i usługi Teams.
W tym samouczku zostaną wykonane następujące czynności:
- Umożliwia umieszczenie środowiska wywołującego na dowolnej stronie internetowej łączącej klientów z twoją firmą
- Tworzenie środowiska wywoływania na platformach innych niż React
Wymagania wstępne
Te kroki należy wykonać przed ukończeniem całego środowiska. Skontaktuj się z administratorem usługi Teams, jeśli masz pytania dotyczące konfigurowania aplikacji Głosowych usługi Teams lub federacji dzierżawy usługi Teams.
- Program Visual Studio Code na jednej z obsługiwanych platform.
- zaleca się Node.js, Active LTS i Maintenance LTS w wersji Node 20 LTS. Użyj polecenia ,
node --versionaby sprawdzić wersję. - Zasób usług Azure Communication Services. Utwórz zasób komunikacji.
- Ukończ konfigurację dzierżawy usługi Teams na potrzeby współdziałania z zasobem usług Azure Communication Services
- Praca z kolejkami połączeń usługi Teams i usługami Azure Communication Services.
- Praca z automatycznymi uczestnikami usługi Teams i usługami Azure Communication Services.
Sprawdzanie węzłów i programu VS Code
Możesz sprawdzić, czy węzeł został poprawnie zainstalowany za pomocą tego polecenia.
node -v
Dane wyjściowe informują o zainstalowanej wersji, ale kończy się niepowodzeniem, jeśli węzeł nie został zainstalowany i dodany do programu PATH. Podobnie jak w przypadku środowiska Node możesz sprawdzić, czy program Visual Studio Code jest zainstalowany za pomocą tego polecenia.
code --version
Podobnie jak w przypadku środowiska Node to polecenie kończy się niepowodzeniem, jeśli na maszynie występuje problem z instalacją programu VS Code.
Wprowadzenie
Ten projekt tworzymy za pomocą 4 prostych kroków.
- Tworzenie projektu
- Pobieranie kodu
- Konfigurowanie usług Azure Communication Services i Teams
- Uruchamianie aplikacji
1. Tworzenie projektu
Aby rozpocząć, utworzymy nowy folder dla projektu uruchom następujące polecenie w terminalu lub wierszu polecenia.
W przypadku systemu Windows przy użyciu wiersza polecenia użyj następującego polecenia:
mkdir ui-library-js-test-application; cd ui-library-js-test-application
W przypadku systemu macOS przy użyciu terminalu użyj następującego polecenia:
mkdir ui-library-js-test-application && cd ui-library-js-test-application
Te skrypty tworzą nowy folder i przenoszą Cię do niego.
Następnie chcemy utworzyć nowy plik o nazwie index.html. Jest to strona internetowa, do którego dołączamy środowisko wywoływania.
2. Pobieranie kodu
Najpierw pobierz pakiet JavaScript z pliku JavaScript wywołania wychodzącego złożonego. Umieść ten pakiet w tym samym katalogu co plik index.html.
Następnie chcesz otworzyć index.html w programie VS Code i dodać następujący fragment kodu.
<!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>
[! WAŻNE] Należy pamiętać, że ten plik index.html i pakiet outboundCallComposite.js JavaScript muszą znajdować się w tym samym folderze, jeśli nie chcesz edytować żadnego importu w tym pliku.
3. Konfigurowanie usług Azure Communication Services i aplikacji Teams Voice
Następnie chcemy utworzyć tożsamość użytkownika lokalnego, aby umożliwić jej uwierzytelnienie użytkownika lokalnego i uruchomienie wywołania. Po utworzeniu id tych wartości dla elementu i token dla użytkownika chcemy wprowadzić pewne zmiany w index.html pliku, który wprowadziliśmy wcześniej.
const userId = { communicationUserId: "<Add your ACS ID here>" };
const token = "<Enter your ACS token>";
const displayName = "Enter the DisplayName for your user";
Chcemy zaktualizować te informacje za pomocą witryny userId Azure token Portal lub interfejsu wiersza polecenia platformy Azure. Należy również ustawić wartość displayName.
Następnie chcemy dokonać edycji, aby ustawić identyfikator konta zasobu dla aplikacji Teams Voice, która została pobrana wcześniej podczas federacyjnego zasobu usług Azure Communication Services. Skontaktuj się z administratorem usługi Teams, jeśli nie zostało to zrobione.
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. Uruchamianie aplikacji
Teraz, gdy skończyliśmy całą konfigurację, nadszedł czas na uruchomienie aplikacji.
Otwórz okno terminalu lub wiersza polecenia w tym katalogu i uruchom następujące polecenie.
npx http-server@latest -p 3000
Ten skrypt przy użyciu środowiska Node uruchamia serwer HTTP i hostuje index.html plik i pakiet JavaScript. W przeglądarce otwórz http://localhost:3000. Powinna zostać wyświetlona biała strona z przyciskiem, a po jej kliknięciu powinien zostać wyświetlony poniższy ekran.
[! WAŻNE] Uwaga: jeśli spróbujesz przejść do strony, która nie korzysta z hosta lokalnego, środowisko wywołania nie będzie działać ze względów bezpieczeństwa.
start call Kliknij przycisk widoczny w bibliotece CallComposite interfejsu użytkownika, aby zainicjować wywołanie aplikacji głosowej teams.
Pobieranie do środowiska produkcyjnego
Obecnie ten samouczek i pakiety JS są dostępne w publicznej wersji zapoznawczej. Jeśli jesteś podekscytowany kliknięciem do wywołania i chcesz zobaczyć, jak możesz użyć CallComposite polecenia , aby utworzyć pozycję Kliknij, aby wywołać środowiska dla produktu dzisiaj, mamy wpis dyskusji w naszym repozytorium GitHub, który pokaże, jak zintegrować bibliotekę interfejsu użytkownika w innych platformach Node Framework. Kroki samouczka, które zostały właśnie wykonane bezpośrednio, przekładają się na to, co zostało opisane w tym pokazie i opowiedzieć o ładowaniu złożonych bibliotek interfejsu użytkownika w innych strukturach niż React.
Następne kroki
Aby uzyskać więcej informacji na temat aplikacji głosowych usługi Teams, zapoznaj się z naszą dokumentacją dotyczącą automatycznych uczestników usługi Teams i kolejek połączeń usługi Teams. Możesz też zapoznać się z naszym samouczkiem, aby utworzyć bardziej kompletne środowisko przy użyciu platformy React.
Szybki start: dołączanie aplikacji wywołującej do kolejki wywołań usługi Teams