Snelstart: Bellen naar telefoon

  • Artikel
  • 7 minuten om te lezen

Ga aan de slag Azure Communication Services met behulp van de Communication Services Calling SDK om PSTN-aanroepen toe te voegen aan uw app.

Belangrijk

Azure Communication Services biedt geen ondersteuning voor noodoproepen

Services voor uitgaande gesprekken van Azure Communication Services kunnen niet worden gebruikt om contact op te nemen met nooddiensten. U moet de traditionele telefoonservice behouden voor het plaatsen van noodoproepen.

Voorbeeldcode

Zoek de uiteindelijke code voor deze quickstart op GitHub

Vereisten

Instellen

Een nieuwe Node.js-toepassing maken

Open uw terminal of opdrachtvenster, maak een nieuwe map voor uw app en navigeer daar naartoe.

mkdir calling-quickstart && cd calling-quickstart

Voer npm init -y uit om een package.json-bestand te maken met de standaardinstellingen.

npm init -y

Het pakket installeren

Gebruik de npm install opdracht om de SDK Azure Communication Services JavaScript te installeren.

npm install @azure/communication-common --save
npm install @azure/communication-calling@1.1.0 --save

De volgende versies van webpack worden aanbevolen voor deze quickstart:

"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"

De optie --save geeft de bibliotheek weer als afhankelijkheid in het package.json-bestand.

Het app-framework instellen

In deze snelstart wordt webpack gebruikt om de toepassingsassets te bundelen. Voer de volgende opdracht uit om de webpack-, webpack-CLI- en webpack-dev-server npm-pakketten te installeren en deze weer te geven als ontwikkelingsafhankelijkheden in uw package.json:

npm install webpack@4.42.0 webpack-cli@3.3.11 webpack-dev-server@3.10.3 --save-dev

Maak een index. html-bestand in de hoofdmap van uw project. Dit bestand wordt gebruikt voor het configureren van een basisindeling waarmee de gebruiker een oproep kan plaatsen.

Hier volgt de code:

<!DOCTYPE html>
<html>
  <head>
    <title>Communication Client - Calling Sample</title>
  </head>
  <body>
    <h4>Azure Communication Services</h4>
    <h1>Calling Quickstart</h1>
    <input 
      id="callee-phone-input"
      type="text"
      placeholder="Who would you like to call?"
      style="margin-bottom:1em; width: 230px;"
    />
    <div>
      <button id="call-phone-button" type="button">
        Start Call
      </button>
      &nbsp;
      <button id="hang-up-phone-button" type="button" disabled="true">
        Hang Up
      </button>
    </div>
    <script src="./bundle.js"></script>
  </body>
</html>

Maak een bestand in de hoofdmap van uw project met de naam client.js om de toepassingslogica voor deze snelstart te bevatten. Voeg de volgende code toe om de oproepclient te importeren en verwijzingen naar de DOM-elementen op te halen, zodat we onze bedrijfslogica kunnen koppelen.

import { CallClient, CallAgent } from "@azure/communication-calling";
import { AzureCommunicationTokenCredential } from '@azure/communication-common';

let call;
let callAgent;

const calleePhoneInput = document.getElementById("callee-phone-input");
const callPhoneButton = document.getElementById("call-phone-button");
const hangUpPhoneButton = document.getElementById("hang-up-phone-button");

async function init() {
    const callClient = new CallClient();
    const tokenCredential = new AzureCommunicationTokenCredential('<USER ACCESS TOKEN with PSTN scope>');
    callAgent = await callClient.createCallAgent(tokenCredential);
  //  callPhoneButton.disabled = false;
}

init();

Een telefoongesprek starten

Geef het telefoonnummer op dat u hebt verkregen in de Communication Services-resource die wordt gebruikt om het gesprek te starten:

Waarschuwing

Telefoonnummers moeten worden opgegeven in de internationale standaardindeling E.164. (bijvoorbeeld: +12223334444)

Voeg een gebeurtenis-handler toe om een aanroep te initiëren naar het telefoonnummer dat u hebt ingevoerd toen u op callPhoneButton klikte:

callPhoneButton.addEventListener("click", () => {
  // start a call to phone
  const phoneToCall = calleePhoneInput.value;
  call = callAgent.startCall(
    [{phoneNumber: phoneToCall}], { alternateCallerId: {phoneNumber: 'YOUR AZURE REGISTERED PHONE NUMBER HERE: +12223334444'}
  });
  // toggle button states
  hangUpPhoneButton.disabled = false;
  callPhoneButton.disabled = true;
});

Een telefoongesprek beëindigen

Voeg een gebeurtenis-listener toe om de huidige oproep te beëindigen wanneer op de hangUpPhoneButton wordt geklikt:

hangUpPhoneButton.addEventListener("click", () => {
  // end the current call
  call.hangUp({
    forEveryone: true
  });

  // toggle button states
  hangUpPhoneButton.disabled = true;
  callPhoneButton.disabled = false;
});

De eigenschap forEveryone beëindigt de oproep voor alle deelnemers aan de oproep.

De code uitvoeren

Gebruik de webpack-dev-server om uw app te bouwen en uit te voeren. Voer de volgende opdracht uit om de toepassingshost op een lokale webserver te bundelen:

npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map

Open uw browser en ga naar http://localhost:8080/. U ziet nu het volgende:

Schermopname van de voltooide JavaScript-toepassing.

U kunt een oproep naar een echt telefoonnummer plaatsen door een telefoonnummer op te geven in het toegevoegde tekstveld en te klikken op de knop Telefoongesprek starten.

Waarschuwing

Telefoonnummers moeten worden opgegeven in de internationale standaardindeling E.164. (bijvoorbeeld: +12223334444)

Belangrijk

Azure Communication Services biedt geen ondersteuning voor noodoproepen

Services voor uitgaande gesprekken van Azure Communication Services kunnen niet worden gebruikt om contact op te nemen met nooddiensten. U moet de traditionele telefoonservice behouden voor het plaatsen van noodoproepen.

Voorbeeldcode

De uiteindelijke code voor deze quickstart vinden op GitHub

Vereisten

Controle van vereisten

  • Als u de telefoonnummers wilt weergeven die zijn gekoppeld aan uw Communication Services-resource, meldt u zich aan bij Azure Portal, zoekt u uw Communication Services-resource en opent u het tabblad telefoonnummers vanuit het navigatiedeelvenster aan de linkerkant.

Instellen

PSTN-functionaliteit aan uw app toevoegen

Voeg het type PhoneNumber aan uw app toe door MainActivity.java te wijzigen:

import com.azure.android.communication.common.PhoneNumberIdentifier;

Een telefoongesprek starten

Geef het telefoonnummer op dat u hebt verkregen in de Communication Services-resource. Dit wordt gebruikt om de oproep te starten:

Waarschuwing

Houd er rekening mee dat telefoonnummers moeten worden opgegeven in de internationale standaardindeling E.164. (bijvoorbeeld: +12223334444)

Wijzig de gebeurtenis-handler startCall() in MainActivity.java, zodat deze telefoongesprekken verwerkt:

    private void startCall() {
        EditText calleePhoneView = findViewById(R.id.callee_id);
        String calleePhone = calleePhoneView.getText().toString();
        PhoneNumberIdentifier callerPhone = new PhoneNumberIdentifier("+12223334444");
        StartCallOptions options = new StartCallOptions();
        options.setAlternateCallerId(callerPhone);
        options.setVideoOptions(new VideoOptions(null));
        call = agent.startCall(
                getApplicationContext(),
                new PhoneNumberIdentifier[] {new PhoneNumberIdentifier(calleePhone)},
                options);
    }

De app starten en de Echo-bot aanroepen

De app kan nu worden gestart met behulp van de knop App uitvoeren op de werkbalk (Shift + F10). U kunt een oproep naar een telefoonnummer plaatsen door een telefoonnummer op te geven in het toegevoegde tekstveld en te klikken op de knop BELLEN.

Waarschuwing

Telefoonnummers moeten worden opgegeven in de internationale standaardindeling E.164. (bijvoorbeeld: +12223334444)

Schermopname met de voltooide toepassing.

Belangrijk

Azure Communication Services biedt geen ondersteuning voor noodoproepen

Services voor uitgaande gesprekken van Azure Communication Services kunnen niet worden gebruikt om contact op te nemen met nooddiensten. U moet de traditionele telefoonservice behouden voor het plaatsen van noodoproepen.

Vereisten

Controle van vereisten

  • Als u de telefoonnummers wilt weergeven die zijn gekoppeld aan uw Communication Services-resource, meldt u zich aan bij Azure Portal, zoekt u uw Communication Services-resource en opent u het tabblad telefoonnummers vanuit het navigatiedeelvenster aan de linkerkant.
  • U kunt uw app bouwen en uitvoeren met Azure Communication Services-SDK voor iOS:

Instellen

Een telefoongesprek starten

Geef het telefoonnummer op dat u hebt verkregen in de Communication Services-resource die wordt gebruikt om het gesprek te starten:

Waarschuwing

Telefoonnummers moeten worden opgegeven in de internationale standaardindeling E.164. (bijvoorbeeld: +12223334444)

Wijzig de gebeurtenis-handler startCall die wordt uitgevoerd wanneer op de knop Oproep starten wordt getikt:

func startCall() {
        // Ask permissions
        AVAudioSession.sharedInstance().requestRecordPermission { (granted) in
            if granted {
                let startCallOptions = StartCallOptions()
                startCallOptions.alternateCallerId = PhoneNumberIdentifier(phoneNumber: "<YOUR AZURE REGISTERED PHONE NUMBER>")
                self.callAgent!.startCall(participants: [PhoneNumberIdentifier(phoneNumber: self.callee)], options: startCallOptions) { (call, error) in
                    if (error == nil) {
                        self.call = call
                    } else {
                        print("Failed to get call object")
                    }
                }
            }
        }
    }

De code uitvoeren

U kunt uw app maken en uitvoeren op een iOS-simulator door Product > Uitvoeren te selecteren of door de sneltoets (⌘-R) te gebruiken.

Laatste look en feel van de snelstart-app

U kunt een oproep naar een telefoonnummer plaatsen door een telefoonnummer op te geven in het toegevoegde tekstveld en te klikken op de knop Oproep starten.

Waarschuwing

Telefoonnummers moeten worden opgegeven in de internationale standaardindeling E.164. (bijvoorbeeld: +12223334444)

Notitie

De eerste keer dat u een oproep doet, wordt u gevraagd om toegang tot de microfoon. In een productietoepassing moet u de AVAudioSessionAPI gebruiken om de machtigingsstatus te controleren en het gedrag van uw toepassing bij te werken wanneer geen toestemming wordt verleend.

Resources opschonen

Als u een Communication Services-abonnement wilt opschonen en verwijderen, kunt u de resource of resourcegroep verwijderen. Als u de resourcegroep verwijdert, worden ook alle bijbehorende resources verwijderd. Meer informatie over het opschonen van resources.

Volgende stappen

Raadpleeg voor meer informatie de volgende artikelen: