Kom igång med exemplet på webbsamtal

Varning

Azure Communication Services inför icke bakåtkompatibla ändringar, och vissa tjänster avvecklas. Läs mer i guiden om utfasning och brytande ändringar.

Webbanropsexemplet är en webbapplikation som fungerar som en steg-för-steg-genomgång av de olika funktioner som erbjuds av Communication Services web Calling SDK.

Detta exempel är byggt för utvecklare och gör det mycket enkelt för dig att komma igång med Communication Services. Dess användargränssnitt är uppdelat i flera sektioner, där varje sektion har en "Visa kod"-knapp som låter dig kopiera kod direkt från din webbläsare till din egen Communication Services-applikation.

Kom igång med exemplet på webbsamtal

Följ /Project/readme.md för att konfigurera projektet och köra det lokalt på din dator. När webbanropsexemplet körs på din dator ser du följande landningssida:

Webbsamtalshandledning 1

Självstudiekurs för webbsamtal 2

Användarprovisionering och SDK-initiering

Klicka på "Provisioning user and initialize SDK" för att initiera ditt SDK med en token som provisionerats av backend-tokenprovisioneringstjänsten. Denna backend-tjänst är i /project/webpack.config.js.

Klicka på knappen "Visa kod" för att se exempelkoden som du kan använda i din egen lösning.

Du bör se följande när din SDK är initierad:

Användaretablering

Nu är du redo att börja ringa samtal med din kommunikationstjänstresurs!

Ringning och mottagande av samtal

Communication Services web Calling SDK tillåter 1:1, 1:N och gruppsamtal.

För 1:1- eller 1:N-utgående anrop kan du specificera flera användaridentiteter för Kommunikationstjänster att anropa med komma-separerade värden. Du kan också ange traditionella telefonnummer (PSTN) som ska ringas upp med kommaseparerade värden.

När du ringer PSTN-telefonnummer, ange ditt alternativa nummer. Klicka på knappen "Ring samtal" för att ringa ett utgående samtal:

Ring ett samtal

För att gå med i ett gruppsamtal, ange GUID:en som identifierar samtalet och klicka på knappen "Gå med i grupp":

Gå med i ett gruppsamtal

Klicka på knappen "Visa kod" för att se exempelkoden för att ringa samtal, ta emot samtal och ansluta till gruppsamtal.

Ett aktivt samtal ser ut så här:

Gruppsamtal

Detta exempel ger också kodutdrag för följande funktioner:

  • Klicka på videoikonen för att slå på/av din videokamera
  • Att klicka på mikrofonikonen för att slå på/av mikrofonen
  • Klickade på play-ikonen för att hålla/avbänka samtalet
  • Klicka på skärmikonen för att starta/stoppa dela din skärm
  • Klicka på personikonen för att lägga till en deltagare i samtalet
  • Genom att klicka på "Ta bort deltagare" i deltagarlistan för att ta bort en specifik deltagare från samtalet

Nästa steg

Mer information finns i följande artiklar:

Ytterligare läsning

  • Exempel – Hitta fler exempel och exempel på översiktssidan för våra exempel.
  • Redux – Tillståndshantering på klientsidan
  • FluentUI – Microsofts drivna användargränssnittsbibliotek
  • React – Bibliotek för att skapa användargränssnitt
  • ASP.NET Core – Ramverk för att skapa webbprogram