Migrieren von Twilio Video zu Azure Communication Services

2024-03-29

In diesem Artikel wird beschrieben, wie Sie eine bestehende Twilio Video-Implementierung zum Azure Communication Services Calling SDK migrieren. Sowohl Twilio Video als auch das Azure Communication Services Calling SDK sind cloudbasierte Plattformen, mit denen Entwickler ihren Webanwendungen Sprach- und Videoanruffeatures hinzufügen können.

Es gibt jedoch einige wichtige Unterschiede zwischen ihnen, die sich auf Ihre Auswahl der Plattform auswirken oder einige Änderungen an Ihrem vorhandenen Code erfordern, wenn Sie sich für die Migration entscheiden. In diesem Artikel vergleichen wir die wichtigsten Features und Funktionen beider Plattformen und bieten einige Leitfäden für die Migration einer vorhandenen Twilio Video-Implementierung zum Azure Communication Services Calling SDK.

Wichtige im Azure Communication Services Calling SDK verfügbare Features

Feature	Web (JavaScript)	iOS	Android	Plattformneutral
Installieren	✔️	✔️	✔️
Importieren	✔️	✔️	✔️
Authentifizierung				✔️
Join	✔️	✔️	✔️
Ton/Lautsprecher aktivieren	✔️	✔️	✔️
Mute	✔️	✔️	✔️
Stummschaltung aufheben	✔️	✔️	✔️
Video starten	✔️	✔️	✔️
Video beenden	✔️	✔️	✔️
Virtueller Hintergrund	✔️	✔️	✔️
Benutzervideo rendern	✔️	✔️	✔️
Aufzeichnung				✔️
Verwaltung der Netzwerkbandbreite	✔️	✔️	✔️
Servicequalität				✔️
Auswahl des Rechenzentrums				✔️
Vorschau	✔️	✔️	✔️
Security				✔️
Netzwerk				✔️
Bildschirmfreigabe	✔️
REST-APIs				✔️
Webhooks				✔️
Rohdaten	✔️	✔️	✔️
Codecs				✔️
WebView		✔️	✔️
Videogeräte	✔️	✔️	✔️
Lautsprechergeräte	✔️	✔️	✔️
Mikrofongeräte	✔️	✔️	✔️
Datenkanal-API	✔️	✔️	✔️
Analysen/Erkenntnisse zu Videos				✔️
Diagnosetools				✔️
Berichte				✔️
CallKit (nur iOS)		✔️
Bild im Bild		✔️	✔️

Voraussetzungen

Azure-Konto: Stellen Sie sicher, dass Ihr Azure-Konto aktiv ist. Neue Benutzer können ein kostenloses Konto bei Microsoft Azure erstellen.
Node.js 18: Stellen Sie sicher, dass Node.js 18 auf Ihrem System installiert ist. Herunterladen von Node.js.
Communication Services-Ressource: Richten Sie eine Communication Services-Ressource über Ihr Azure-Portal ein und notieren Sie ihre Verbindungszeichenfolge.
Azure CLI: Befolgen Sie die Anweisungen zum Installieren der Azure CLI unter Windows.
Benutzerzugriffstoken: Generieren Sie ein Benutzerzugriffstoken, um den Anrufclient zu instanziieren. Sie können eines mit der Azure CLI wie folgt erstellen:

az communication identity token issue --scope voip --connection-string "yourConnectionString"

Weitere Informationen finden Sie unter Verwenden der Azure CLI zum Erstellen und Verwalten von Zugriffstoken.

Für Videoanrufe als Teams-Benutzer:

Sie können auch die Teams-Identität verwenden. Informationen zum Generieren eines Zugriffstokens für einen Teams-Benutzer finden Sie unter Verwalten der Teams-Identität.
Rufen Sie die Teams-Thread-ID für Anrufvorgänge mithilfe des Graph Explorers ab. Informationen zum Erstellen einer Thread-ID finden Sie unter Chat erstellen – Microsoft Graph v1.0 > Beispiel2: Erstellen eines Gruppenchats.

UI-Bibliothek

Die Benutzeroberfläche von Azure Communication Services vereinfacht den Prozess der Erstellung moderner Kommunikationsbenutzeroberflächen mithilfe von Azure Communication Services. Es bietet eine Sammlung von einsatzbereiten UI-Komponenten, die Sie problemlos in Ihre Anwendung integrieren können.

Mit diesem vorgefertigten Open Source-Satz von Steuerelementen können Sie ästhetische Designs mithilfe von Fluent UI SDK-Komponenten erstellen und qualitativ hochwertige Audio-/Videokommunikationserlebnisse entwickeln. Weitere Informationen finden Sie in der Übersicht über die Azure Communications Services UI-Bibliothek. Die Übersicht enthält umfassende Informationen über Web- und mobile Plattformen.

Installation

Installieren Sie das Azure Communication Services Calling SDK

Verwenden Sie den Befehl npm install, um das Azure Communication Services Calling SDK für JavaScript zu installieren.

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

Entfernen des Twilio SDK aus dem Projekt

Sie können das Twilio SDK aus Ihrem Projekt entfernen, indem Sie das Paket deinstallieren.

npm uninstall twilio-video

Objektmodell

Die folgenden Klassen und Schnittstellen befassen sich mit einigen der wichtigsten Features des Azure Communication Services Calling SDK:

Name	Beschreibung
CallClient	Der Haupteinstiegspunkt des Calling SDK.
AzureCommunicationTokenCredential	Implementiert die `CommunicationTokenCredential`-Schnittstelle, die zur Instanziierung des CallAgent verwendet wird.
CallAgent	Starten und Verwalten von Anrufen.
Geräte-Manager	Mediengeräte verwalten.
Call	Stellt einen Anruf dar.
LocalVideoStream	Erstellen Sie einen lokalen Videostream für ein Kameragerät auf dem lokalen System.
RemoteParticipant	Stellt einen Remote-Teilnehmer im Anruf dar.
RemoteVideoStream	Stellt einen Remote-Videostream von einem Remote-Teilnehmer dar.
LocalAudioStream	Stellt einen lokalen Audiodatenstrom für ein lokales Mikrofongerät dar.
AudioOptions	Audiooptionen, die einem Teilnehmer zur Verfügung gestellt werden, wenn er einen ausgehenden Anruf tätigt oder einem Gruppenanruf beitritt.
AudioIssue	Stellt das Ende von Audioproblemen bei der Anrufumfrage dar. Beispielantworten können `NoLocalAudio` sein – die anderen Teilnehmer konnten mich nicht hören, oder `LowVolume` – die Audiolautstärke des Anrufs war zu niedrig.

Bei der Verwendung von ACS-Anrufen in einem Teams-Anruf gibt es einige Unterschiede:

Anstelle von CallAgent – TeamsCallAgent zum Starten und Verwalten von Teams-Anrufen verwenden.
Anstelle von Call – TeamsCall zum Darstellen von Teams-Anrufen verwenden.

Initialisieren des Calling SDK (CallClient/CallAgent)

Verwenden Sie CallClient, initialisieren Sie eine CallAgent-Instanz. Die createCallAgent-Methode verwendet CommunicationTokenCredential als Argument. welches ein Benutzerzugriffstoken akzeptiert.

Geräte-Manager

Twilio

Twilio hat keinen analogen Geräte-Manager. Titel werden mithilfe des Standardgeräts des Systems erstellt. Um ein Gerät anzupassen, rufen Sie die gewünschte Quellenspur auf über:

navigator.mediaDevices.getUserMedia()

Und übergeben Sie dieses an die Titelerstellungsmethode.

Azure Communication Services

const { CallClient } = require('@azure/communication-calling');  
const { AzureCommunicationTokenCredential} = require('@azure/communication-common'); 

const userToken = '<USER_TOKEN>';  
const tokenCredential = new AzureCommunicationTokenCredential(userToken); 

callClient = new CallClient(); 
const callAgent = await callClient.createCallAgent(tokenCredential, {displayName: 'optional user name'});

Sie können die Methode getDeviceManager für die Instanz CallClient verwenden, um auf deviceManager zuzugreifen.

const deviceManager = await callClient.getDeviceManager();

// Get a list of available video devices for use.  
const localCameras = await deviceManager.getCameras(); 

// Get a list of available microphone devices for use.  
const localMicrophones = await deviceManager.getMicrophones();  

// Get a list of available speaker devices for use.  
const localSpeakers = await deviceManager.getSpeakers();

Geräteberechtigungen erlangen

Twilio

Twilio Video fragt bei der Erstellung von Titeln nach den Geräteberechtigungen.

Azure Communication Services

Fordern Sie einen Benutzer auf, Berechtigungen für Kamera und/oder Mikrofon zu erteilen:

const result = await deviceManager.askDevicePermission({audio: true, video: true});

Die Ausgabe kommt mit einem Objekt zurück, das angibt, ob Audio- und Videorechte erteilt wurden:

console.log(result.audio);  console.log(result.video);

Starten eines Anrufs

Twilio

import * as TwilioVideo from 'twilio-video';

const twilioVideo = TwilioVideo; 
let twilioRoom; 

twilioRoom = await twilioVideo.connect('token', { name: 'roomName', audio: false, video: false });

Azure Communication Services

Um einen Anruf zu erstellen und zu starten, verwenden Sie eine der callAgent APIs und geben Sie einen Benutzer an, den Sie über das Communication Services Identity SDK erstellt haben.

Erstellung und Start des Anrufs erfolgen synchron. Die call-Instanz ermöglicht es Ihnen, Anrufereignisse zu abonnieren. Abonnieren Sie das stateChanged-Ereignis für Wertänderungen.

call.on('stateChanged', async () =\> {  console.log(\`Call state changed: \${call.state}\`) });

1:1-Anruf

Um einen anderen Azure Communication Services-Benutzer anzurufen, verwenden Sie die startCall-Methode bei callAgent und übergeben Sie den/das CommunicationUserIdentifier des Empfängers, den/das Sie mit der Communication Services-Verwaltungsbibliothek erstellt haben.

const userCallee = { communicationUserId: '\<Azure_Communication_Services_USER_ID\>' };
const oneToOneCall = callAgent.startCall([userCallee]);

Raumanruf

Um einem Room-Anruf beizutreten, können Sie ein Kontextobjekt mit der roomId-Eigenschaft als Raumbezeichner instanziieren. Wenn Sie an dem Anruf teilnehmen möchten, verwenden Sie die join-Methode und übergeben die Kontextinstanz.

const context = { roomId: '\<RoomId\>' };
const call = callAgent.join(context);

Ein Raum bietet Anwendungsentwicklern bessere Kontrolle darüber, wer an einem Anruf teilnehmen kann, wann die Teilnehmer sich treffen und wie sie zusammenarbeiten. Weitere Informationen über Räume finden Sie in der Übersicht über Räume oder in der Schnellstartanleitung: Einem Raumanruf beitreten.

Gruppenanruf

Um einen neuen Gruppenanruf zu starten oder an einem aktuellen Gruppenanruf teilzunehmen, müssen Sie die Methode join aufrufen und ein Objekt mit einer groupId-Eigenschaft übergeben. Der groupId-Wert muss eine GUID (ein eindeutiger Bezeichner) sein.

const context = { groupId: '\<GUID\>'};
const call = callAgent.join(context);

Teams-Anruf

Starten Sie einen synchronen 1:1-Gruppenanruf mithilfe der startCall-API auf teamsCallAgent. Sie können MicrosoftTeamsUserIdentifier oder PhoneNumberIdentifier als Parameter übergeben, um das Ziel des Anrufs zu definieren. Die Methode gibt die TeamsCall-Instanz zurück, die Ihnen das Abonnieren von Anrufereignissen ermöglicht.

const userCallee = { microsoftTeamsUserId: '\<MICROSOFT_TEAMS_USER_ID\>' };
const oneToOneCall = teamsCallAgent.startCall(userCallee);

Annehmen und Teilnehmen an einem Anruf

Twilio

Bei Verwendung des Twilio Video SDK wird der Teilnehmer nach dem Beitritt zum Raum erstellt und es gibt keine Informationen zu anderen Räumen.

Azure Communication Services

Azure Communication Services verfügt über die CallAgent-Instanz, die ein incomingCall-Ereignis ausgibt, wenn die angemeldete Identität einen eingehenden Anruf empfängt.

callAgent.on('incomingCall', async (call) =\>{
    // Incoming call
    });

Das incomingCall-Ereignis umfasst eine incomingCall-Instanz, die Sie akzeptieren oder ablehnen können.

Wenn Sie einen Anruf mit Video ein starten, beitreten oder annehmen und das angegebene Videokameragerät von einem anderen Prozess verwendet wird oder die Kamera im System deaktiviert ist, startet der Anruf mit Video aus und gibt eine cameraStartFailed: true-Anrufdiagnose zurück.

const incomingCallHandler = async (args: { incomingCall: IncomingCall }) => {  
  const incomingCall = args.incomingCall;  

  // Get incoming call ID  
  var incomingCallId = incomingCall.id  

  // Get information about this Call.  
  var callInfo = incomingCall.info;  

  // Get information about caller  
  var callerInfo = incomingCall.callerInfo  
    
  // Accept the call  
  var call = await incomingCall.accept();  

  // Reject the call  
  incomingCall.reject();  

  // Subscribe to callEnded event and get the call end reason  
  incomingCall.on('callEnded', args =>  
  	{ console.log(args.callEndReason);  
  });  

  // callEndReason is also a property of IncomingCall  
  var callEndReason = incomingCall.callEndReason;  
};  

callAgentInstance.on('incomingCall', incomingCallHandler);

Nach dem Starten eines Anrufs, dem Beitreten zu einem Anruf oder dem Annehmen eines Anrufs können Sie auch das callAgentcallsUpdated-Ereignis verwenden, um über das neue Objekt Call benachrichtigt zu werden und mit dem Abonnieren zu beginnen.

callAgent.on('callsUpdated', (event) => { 
  event.added.forEach((call) => { 
    // User joined call 
  }); 
  
  event.removed.forEach((call) => { 
    // User left call 
  }); 
});

Informationen zur Implementierung von Azure Communication Services Teams finden Sie unter Empfangen eines eingehenden Teams-Anrufs.

Hinzufügen und Entfernen von Teilnehmern zu/von einem Anruf

Twilio

Teilnehmer können nicht aus Twilio Room hinzugefügt oder entfernt werden, sie müssen dem Raum beitreten oder sich selbst trennen.

Auf diese Weise kann auf lokale Teilnehmer in Twilio Room zugegriffen werden:

let localParticipant = twilioRoom.localParticipant;

Remote-Teilnehmer in Twilio Room werden mit einer Karte dargestellt, die über eine eindeutige Teilnehmer-SID als Schlüssel verfügt:

twilioRoom.participants;

Azure Communication Services

Alle Remoteteilnehmer werden durch den Typ RemoteParticipant dargestellt und sind über die remoteParticipants-Sammlung für eine Anrufinstanz verfügbar.

Die remoteParticipants-Sammlung gibt eine Liste der Remoteteilnehmer eines Anrufs zurück:

call.remoteParticipants; // [remoteParticipant, remoteParticipant....]

Teilnehmer hinzufügen:

Zum Hinzufügen eines Teilnehmers zu einem Anruf können Sie addParticipant verwenden. Geben Sie einen der Bezeichnertypen an. Dadurch wird die Instanz remoteParticipant synchron zurückgegeben.

Das Ereignis remoteParticipantsUpdated des Anrufs wird ausgelöst, wenn ein Teilnehmer erfolgreich dem Aufruf hinzugefügt wurde.

const userIdentifier = { communicationUserId: '<Azure_Communication_Services_USER_ID>' }; 
const remoteParticipant = call.addParticipant(userIdentifier);

Entfernen eines Teilnehmers:

Um einen Teilnehmer aus einem Anruf zu entfernen, verwenden Sie removeParticipant. Sie müssen einen der Bezeichnertypen übergeben. Diese Methode wird asynchron aufgelöst, nachdem der Teilnehmer aus dem Anruf entfernt wurde. Der Teilnehmer wird auch aus der remoteParticipants-Sammlung entfernt.

const userIdentifier = { communicationUserId: '<Azure_Communication_Services_USER_ID>' }; 
await call.removeParticipant(userIdentifier);

Abonnieren Sie das Ereignis des Anrufs remoteParticipantsUpdated, um benachrichtigt zu werden, wenn neue Teilnehmer dem Anruf hinzugefügt oder aus dem Anruf entfernt werden.

call.on('remoteParticipantsUpdated', e => {
    e.added.forEach(remoteParticipant => {
        // Subscribe to new remote participants that are added to the call
    });
 
    e.removed.forEach(remoteParticipant => {
        // Unsubscribe from participants that are removed from the call
    })

});

Abonnieren Sie das Ereignis eines Remote-Teilnehmers stateChanged für Wertänderungen.

remoteParticipant.on('stateChanged', () => {
    console.log(`Remote participants state changed: ${remoteParticipant.state}`)
});

Videoanrufe

Starten und Anhalten von Videos

Twilio

const videoTrack = await twilioVideo.createLocalVideoTrack({ constraints }); 
const videoTrackPublication = await localParticipant.publishTrack(videoTrack, { options });

Die Kamera ist standardmäßig aktiviert. Sie kann bei Bedarf deaktiviert und wieder aktiviert werden:

videoTrack.disable();

Oder:

videoTrack.enable();

Wenn ein später erstellter Videotitel vorhanden ist, fügen Sie diesen lokal an:

const videoElement = videoTrack.attach();
const localVideoContainer = document.getElementById( localVideoContainerId );
localVideoContainer.appendChild(videoElement);

Twilio Tracks basieren auf Standardeingabegeräten und geben die Änderungen in den Standardwerten wieder. Um ein Eingabegerät zu ändern, müssen Sie die Veröffentlichung des vorherigen Videotitels aufheben:

localParticipant.unpublishTrack(videoTrack);

Erstellen Sie dann einen neuen Videotitel mit den richtigen Einschränkungen.

Azure Communication Services

Um ein Video während eines Anrufs zu starten, müssen Sie die Kameras mithilfe der getCameras-Methode des deviceManager-Objekts aufzählen. Erstellen Sie dann eine neue Instanz von LocalVideoStream mit der gewünschten Kamera und übergeben Sie anschließend das LocalVideoStream-Objekt an die startVideo-Methode eines vorhandenen Anrufobjekts:

const deviceManager = await callClient.getDeviceManager();
const cameras = await deviceManager.getCameras();
const camera = cameras[0]
const localVideoStream = new LocalVideoStream(camera);
await call.startVideo(localVideoStream);

Nachdem Sie das Senden von Videos erfolgreich gestartet haben, wird eine LocalVideoStream-Instanz des Typs Video zur localVideoStreams-Sammlung einer Anrufinstanz hinzugefügt.

const localVideoStream = call.localVideoStreams.find( (stream) =\> { return stream.mediaStreamType === 'Video'} );

Um ein lokales Video während eines Anrufs zu beenden, übergeben Sie die localVideoStream-Instanz, die für Video verwendet wird:

await call.stopVideo(localVideoStream);

Sie können zu einem anderen Kameragerät wechseln, während ein Video gesendet wird, indem Sie switchSource auf einer localVideoStream-Instanz aufrufen:

const cameras = await callClient.getDeviceManager().getCameras();
const camera = cameras[1];
localVideoStream.switchSource(camera);

Wenn das angegebene Videogerät von einem anderen Prozess verwendet wird, oder wenn es im System deaktiviert ist:

Wenn während eines Anrufs Ihr Video ausgeschaltet ist und Sie das Video mithilfe von call.startVideo() starten, gibt diese Methode ein SourceUnavailableError zurück und cameraStartFailed werden auf „wahr“ gesetzt.
Ein Aufruf der localVideoStream.switchSource()-Methode bewirkt, dass cameraStartFailed auf „wahr“ festgelegt wird. Weitere Informationen zur Diagnose von Anrufproblemen finden Sie im Leitfaden zur Anrufdiagnose.

Um zu überprüfen, ob das lokale Video aktiviert oder deaktiviert ist, können Sie die isLocalVideoStarted-API verwenden, die „wahr“ oder „falsch“ zurückgibt:

call.isLocalVideoStarted;

Um Änderungen am lokalen Video zu überwachen, können Sie das isLocalVideoStartedChanged-Ereignis abonnieren und abbestellen:

// Subscribe to local video event
call.on('isLocalVideoStartedChanged', () => {
    // Callback();
});
// Unsubscribe from local video event
call.off('isLocalVideoStartedChanged', () => {
    // Callback();
});

Rendern des Videos eines Remotebenutzers

Twilio

Sobald ein Remote-Teilnehmer einen Videotitel veröffentlicht, muss er angefügt werden. Das trackSubscribed-Ereignis für Raum- oder Remote-Teilnehmer ermöglicht es Ihnen, zu erkennen, wann der Titel angefügt werden kann:

twilioRoom.on('participantConnected', (participant) => {
 participant.on('trackSubscribed', (track) => {
   const remoteVideoElement = track.attach();
   const remoteVideoContainer = document.getElementById(remoteVideoContainerId + participant.identity);
   remoteVideoContainer.appendChild(remoteVideoElement);
 });
});

Oder

twilioRoom..on('trackSubscribed', (track, publication, participant) => {
   const remoteVideoElement = track.attach();
   const remoteVideoContainer = document.getElementById(remoteVideoContainerId + participant.identity);
   remoteVideoContainer.appendChild(remoteVideoElement);
 });
});

Azure Communication Services

Um die Video- und Bildschirmübertragungs-Streams der Remoteteilnehmer aufzulisten, sehen Sie sich die videoStreams-Sammlungen an:

const remoteVideoStream: RemoteVideoStream = call.remoteParticipants[0].videoStreams[0];
const streamType: MediaStreamType = remoteVideoStream.mediaStreamType;

Zum Rendern von RemoteVideoStream müssen Sie das isAvailableChanged-Ereignis abonnieren. Wenn sich die isAvailable-Eigenschaft zu „wahr“ ändert, sendet ein Remote-Teilnehmer einen Stream. Erstellen Sie daraufhin eine neue Instanz von VideoStreamRenderer und anschließend mit der asynchronen Methode createView eine neue VideoStreamRendererView-Instanz. Sie können dann view.target an ein beliebiges Benutzeroberflächenelement anfügen.

Wenn sich die Verfügbarkeit eines Remote-Datenstroms ändert, können Sie das ganze VideoStreamRenderer oder ein bestimmtes VideoStreamRendererView zerstören. Wenn Sie sich dafür entscheiden, sie zu behalten, wird ein leeres Videobild angezeigt.

// Reference to the html's div where we would display a grid of all remote video streams from all participants.
let remoteVideosGallery = document.getElementById('remoteVideosGallery');

subscribeToRemoteVideoStream = async (remoteVideoStream) => {
   let renderer = new VideoStreamRenderer(remoteVideoStream);
    let view;
    let remoteVideoContainer = document.createElement('div');
    remoteVideoContainer.className = 'remote-video-container';

    let loadingSpinner = document.createElement('div');
    // See the css example below for styling the loading spinner.
    loadingSpinner.className = 'loading-spinner';
    remoteVideoStream.on('isReceivingChanged', () => {
        try {
            if (remoteVideoStream.isAvailable) {
                const isReceiving = remoteVideoStream.isReceiving;
                const isLoadingSpinnerActive = remoteVideoContainer.contains(loadingSpinner);
                if (!isReceiving && !isLoadingSpinnerActive) {
                    remoteVideoContainer.appendChild(loadingSpinner);
                } else if (isReceiving && isLoadingSpinnerActive) {
                    remoteVideoContainer.removeChild(loadingSpinner);
                }
            }
        } catch (e) {
            console.error(e);
        }
    });

    const createView = async () => {
        // Create a renderer view for the remote video stream.
        view = await renderer.createView();
        // Attach the renderer view to the UI.
        remoteVideoContainer.appendChild(view.target);
        remoteVideosGallery.appendChild(remoteVideoContainer);
    }

    // Remote participant has switched video on/off
    remoteVideoStream.on('isAvailableChanged', async () => {
        try {
            if (remoteVideoStream.isAvailable) {
                await createView();
            } else {
                view.dispose();
                remoteVideosGallery.removeChild(remoteVideoContainer);
            }
        } catch (e) {
            console.error(e);
        }
    });

    // Remote participant has video on initially.
    if (remoteVideoStream.isAvailable) {
        try {
            await createView();
        } catch (e) {
            console.error(e);
        }
    }
    
    console.log(`Initial stream size: height: ${remoteVideoStream.size.height}, width: ${remoteVideoStream.size.width}`);
    remoteVideoStream.on('sizeChanged', () => {
        console.log(`Remote video stream size changed: new height: ${remoteVideoStream.size.height}, new width: ${remoteVideoStream.size.width}`);
    });
}

Abonnieren Sie das videoStreamsUpdated-Ereignis des Remote-Teilnehmers, um benachrichtigt zu werden, wenn der Remote-Teilnehmer neue Videostreams hinzufügt und Videostreams entfernt.

remoteParticipant.on('videoStreamsUpdated', e => {
    e.added.forEach(remoteVideoStream => {
        // Subscribe to new remote participant's video streams
    });

    e.removed.forEach(remoteVideoStream => {
        // Unsubscribe from remote participant's video streams
    });
});

Virtueller Hintergrund

Twilio

Um den virtuellen Hintergrund zu verwenden, installieren Sie die Twilio-Hilfsbibliothek:

npm install @twilio/video-processors

Erstellen und Laden einer neuen Processor-Instanz:

import { GaussianBlurBackgroundProcessor } from '@twilio/video-processors';

const blurProcessor = new GaussianBlurBackgroundProcessor({ assetsPath: virtualBackgroundAssets });

await blurProcessor.loadModel();

Sobald das Modell geladen wird, können Sie den Hintergrund mithilfe der addProcessor-Methode zum Videotitel hinzufügen:

videoTrack.addProcessor(processor, {  inputFrameBufferType: 'video',  outputFrameBufferContextType: 'webgl2' });

Azure Communication Services

Verwenden Sie den Befehl „npm install“, um das Azure Communication Services Effects SDK für JavaScript zu installieren.

npm install @azure/communication-calling-effects --save

Hinweis

Um Videoeffekte mit dem Azure Communication Calling SDK zu verwenden, müssen Sie, nachdem Sie einen LocalVideoStream erstellt haben, die VideoEffects-Funktions-API des LocalVideoStream abrufen, um Videoeffekte zu starten/zu beenden:

import * as AzureCommunicationCallingSDK from '@azure/communication-calling'; 

import { BackgroundBlurEffect, BackgroundReplacementEffect } from '@azure/communication-calling-effects'; 

// Get the video effects feature API on the LocalVideoStream 
// (here, localVideoStream is the LocalVideoStream object you created while setting up video calling)
const videoEffectsFeatureApi = localVideoStream.feature(AzureCommunicationCallingSDK.Features.VideoEffects); 

// Subscribe to useful events 
videoEffectsFeatureApi.on(‘effectsStarted’, () => { 
    // Effects started
});

videoEffectsFeatureApi.on(‘effectsStopped’, () => { 
    // Effects stopped
}); 

videoEffectsFeatureApi.on(‘effectsError’, (error) => { 
    // Effects error
});

Zum Weichzeichnen des Hintergrunds:

// Create the effect instance 
const backgroundBlurEffect = new BackgroundBlurEffect(); 

// Recommended: Check support 
const backgroundBlurSupported = await backgroundBlurEffect.isSupported(); 

if (backgroundBlurSupported) { 
    // Use the video effects feature API we created to start effects
    await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 
}

Um einen benutzerdefinierten Hintergrundersatz mit einem Bild zu verwenden, müssen Sie die URL des Bilds angeben, das Sie als Hintergrund für diesen Effekt verwenden möchten. Unterstützte Bildformate sind: PNG, JPG, JPEG, TIFF und BMP. Das unterstützte Bildformat ist 16:9.

const backgroundImage = 'https://linkToImageFile'; 

// Create the effect instance 
const backgroundReplacementEffect = new BackgroundReplacementEffect({ 
    backgroundImageUrl: backgroundImage
}); 

// Recommended: Check support
const backgroundReplacementSupported = await backgroundReplacementEffect.isSupported(); 

if (backgroundReplacementSupported) { 
    // Use the video effects feature API as before to start/stop effects 
    await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect); 
}

Ändern Sie das Bild für diesen Effekt, indem Sie es über die konfigurierte Methode übergeben:

const newBackgroundImage = 'https://linkToNewImageFile'; 

await backgroundReplacementEffect.configure({ 
    backgroundImageUrl: newBackgroundImage
});

Verwenden Sie zum Wechseln von Effekten dieselbe Methode für die Funktions-API für Videoeffekte:

// Switch to background blur 
await videoEffectsFeatureApi.startEffects(backgroundBlurEffect); 

// Switch to background replacement 
await videoEffectsFeatureApi.startEffects(backgroundReplacementEffect);

Wenn Sie jederzeit überprüfen möchten, welche Effekte aktiv sind, verwenden Sie die activeEffects-Eigenschaft. Die activeEffects-Eigenschaft gibt ein Array mit den Namen der derzeit aktiven Effekte zurück und gibt ein leeres Array zurück, wenn keine Effekte aktiv sind.

// Using the video effects feature api
const currentActiveEffects = videoEffectsFeatureApi.activeEffects;

Effekte können wie folgt beendet werden:

await videoEffectsFeatureApi.stopEffects();

Audio

Starten und Anhalten von Audio

Twilio

const audioTrack = await twilioVideo.createLocalAudioTrack({ constraints });
const audioTrackPublication = await localParticipant.publishTrack(audioTrack, { options });

Das Mikrofon ist standardmäßig aktiviert. Sie können es nach Bedarf wieder deaktivieren und aktivieren:

audioTrack.disable();

Oder

audioTrack.enable();

Alle erstellten Audiotitel sollten von einem lokalen Teilnehmer auf die gleiche Weise angefügt werden wie Videotitel:

const audioElement = audioTrack.attach();
const localAudioContainer = document.getElementById(localAudioContainerId);
localAudioContainer.appendChild(audioElement);

Und von Remote-Teilnehmern:

twilioRoom.on('participantConnected', (participant) => {
 participant.on('trackSubscribed', (track) => {
   const remoteAudioElement = track.attach();
   const remoteAudioContainer = document.getElementById(remoteAudioContainerId + participant.identity);
   remoteAudioContainer.appendChild(remoteAudioElement);
 });
});

Oder:

twilioRoom..on('trackSubscribed', (track, publication, participant) => {
   const remoteAudioElement = track.attach();
   const remoteAudioContainer = document.getElementById(remoteAudioContainerId + participant.identity);
   remoteVideoContainer.appendChild(remoteAudioElement);
 });
});

Es ist nicht möglich, eingehende Audiodaten im Twilio Video SDK stumm zu schalten.

Azure Communication Services

await call.startAudio();

Um den lokalen Endpunkt stumm zu schalten oder die Stummschaltung aufzuheben, können Sie die asynchronen APIs „Stummschalten (mute)“ und „Aufheben der Stummschaltung (unmute)“ verwenden:

//mute local device (microphone / sent audio)
await call.mute();

//unmute local device (microphone / sent audio)
await call.unmute();

Das Stummschalten eingehender Audio legt die Anruflautstärke auf 0 fest. Um den eingehenden Ton stumm zu schalten oder die Stummschaltung aufzuheben, verwenden Sie die muteIncomingAudio und unmuteIncomingAudio-asynchronen APIs:

//mute local device (speaker)
await call.muteIncomingAudio();

//unmute local device (speaker)
await call.unmuteIncomingAudio();

Erkennen dominanter Lautsprecher

Twilio

Um den lautesten Teilnehmer im Raum zu erkennen, verwenden Sie die dominante Lautsprecher-API. Sie können sie in den Verbindungsoptionen aktivieren, wenn Sie dem Gruppenraum mit mindestens 2 Teilnehmern beitreten:

twilioRoom = await twilioVideo.connect('token', { 
name: 'roomName', 
audio: false, 
video: false,
dominantSpeaker: true
});

Wenn sich der lauteste Lautsprecher im Raum ändert, wird das dominantSpeakerChanged-Ereignis ausgegeben:

twilioRoom.on('dominantSpeakerChanged', (participant) => {
    // Highlighting the loudest speaker
});

Azure Communication Services

Dominante Lautsprecher für einen Anruf sind eine erweiterte Funktion der zentralen Call-API. Sie können eine Liste der aktiven Sprecher im Anruf abrufen. Die Liste der dominanten Sprecher ist eine Rangliste, wobei das erste Element in der Liste den letzten aktiven Sprecher des Anrufs darstellt usw.

Um die dominanten Sprecher in einem Anruf zu ermitteln, müssen Sie zunächst das API-Objekt für das Feature „Dominante Sprecher“ abrufen:

const callDominantSpeakersApi = call.feature(Features.CallDominantSpeakers);

Als Nächstes können Sie die Liste der dominanten Lautsprecher erhalten, indem Sie dominantSpeakers anrufen. Dieses hat den Typ DominantSpeakersInfo, der über die folgenden Member verfügt:

speakersList enthält die Liste der als dominant eingestuften Sprecher des Anrufs. Diese werden durch ihre Teilnehmer-ID dargestellt.
timestamp ist die letzte Aktualisierungszeit für die dominanten Sprecher in dem Anruf.

let dominantSpeakers: DominantSpeakersInfo = callDominantSpeakersApi.dominantSpeakers;

Sie können das dominantSpeakersChanged-Ereignis auch abonnieren, um zu erfahren, wann sich die Liste der dominanten Lautsprecher ändert.

const dominantSpeakersChangedHandler = () => {
    // Get the most up-to-date list of dominant speakers
    let dominantSpeakers = callDominantSpeakersApi.dominantSpeakers;
};
callDominantSpeakersApi.on('dominantSpeakersChanged', dominantSpeakersChangedHandler);

Twilio

Um die Anzeige in Twilio Video freizugeben, rufen Sie den Quelltitel über navigator.mediaDevices auf:

Chromiumbasierte Browser:

const stream = await navigator.mediaDevices.getDisplayMedia({
   audio: false,
   video: true
 });
const track = stream.getTracks()[0];

Firefox und Safari:

const stream = await navigator.mediaDevices.getUserMedia({ mediaSource: 'screen' });
const track = stream.getTracks()[0];

Rufen Sie den Bildschirmfreigabetitel ab, und sie können sie auf die gleiche Weise veröffentlichen und verwalten wie der lässige Videotitel (siehe Abschnitt "Video").

Azure Communication Services

Um die Bildschirmfreigabe während eines Anrufs zu starten, können Sie die asynchrone API startScreenSharing verwenden:

await call.startScreenSharing();

Nachdem sie erfolgreich mit dem Senden der Bildschirmfreigabe begonnen haben, wird eine LocalVideoStream Instanz vom Typ ScreenSharing erstellt und der Sammlung in der localVideoStreams Anrufinstanz hinzugefügt.

const localVideoStream = call.localVideoStreams.find( (stream) => { return stream.mediaStreamType === 'ScreenSharing'} );

Um die Bildschirmfreigabe während eines Anrufs zu beenden, können Sie die asynchrone API stopScreenSharingverwenden:

await call.stopScreenSharing();

Um zu überprüfen, ob die Bildschirmfreigabe aktiviert oder deaktiviert ist, können Sie die isScreenSharingOn-API verwenden, die „wahr“ oder „falsch“ zurückgibt:

call.isScreenSharingOn;

Um Änderungen an der Bildschirmfreigabe zu überwachen, können Sie das isScreenSharingOnChanged-Ereignis abonnieren und wieder abbestellen:

// Subscribe to screen share event
call.on('isScreenSharingOnChanged', () => {
    // Callback();
});
// Unsubscribe from screen share event
call.off('isScreenSharingOnChanged', () => {
    // Callback();
});

Statistiken zur Medienqualität

Twilio

Verwenden Sie zum Sammeln von Medienstatistiken in Echtzeit die „getStats“-Methode.

const stats = twilioRoom.getStats();

Azure Communication Services

Die Medienqualitätsstatistik ist eine erweiterte Funktion der zentralen Call-API. Sie müssen zuerst das mediaStatsFeature-API-Objekt abrufen:

const mediaStatsFeature = call.feature(Features.MediaStats);

Um die Medienstatistikdaten zu erhalten, können Sie sampleReported-Ereignisse oder summaryReported-Ereignisse abonnieren:

das sampleReported-Ereignis löst jede Sekunde aus. Geeignet als Datenquelle für die Benutzeroberflächenanzeige oder Ihre eigene Datenpipeline.
das summaryReported-Ereignis enthält die aggregierten Werte der Daten über Intervalle. Nützlich, wenn Sie nur eine Zusammenfassung benötigen.

Wenn Sie das Intervall des summaryReported-Ereignisses steuern möchten, müssen Sie mediaStatsCollectorOptions des Typs MediaStatsCollectorOptions definieren. Andernfalls verwendet das SDK Standardwerte.

const mediaStatsCollectorOptions: SDK.MediaStatsCollectorOptions = {
    aggregationInterval: 10,
    dataPointsPerAggregation: 6
};

const mediaStatsCollector = mediaStatsFeature.createCollector(mediaStatsSubscriptionOptions);

mediaStatsCollector.on('sampleReported', (sample) => {
    console.log('media stats sample', sample);
});

mediaStatsCollector.on('summaryReported', (summary) => {
    console.log('media stats summary', summary);
});

Wenn Sie den Medienstatistik-Collector nicht verwenden müssen, können Sie die Dispose-Methode von mediaStatsCollector aufrufen.

mediaStatsCollector.dispose();

Sie müssen die Dispose-Methode von mediaStatsCollector nicht jedes Mal aufrufen, wenn ein Anruf endet. Die Collectors werden intern zurückgefordert, wenn der Anruf endet.

Weitere Informationen finden Sie unter Medienqualitätsstatistiken.

Diagnostik

Twilio

Zum Testen der Konnektivität bietet Twilio Preflight API an. Dies ist ein Testanruf, der durchgeführt wird, um Probleme bei der Signalisierung und Medienkonnektivität zu erkennen.

Zum Starten des Tests ist ein Zugriffstoken erforderlich:

const preflightTest = twilioVideo.runPreflight(token);

// Emits when particular call step completes
preflightTest.on('progress', (progress) => {
  console.log(`Preflight progress: ${progress}`);
});

// Emits if the test has failed and returns error and partial test results
preflightTest.on('failed', (error, report) => {
  console.error(`Preflight error: ${error}`);
  console.log(`Partial preflight test report: ${report}`);
});

// Emits when the test has been completed successfully and returns the report
preflightTest.on('completed', (report) => {
  console.log(`Preflight test report: ${report}`);
});

Eine weitere Möglichkeit zum Identifizieren von Netzwerkproblemen während des Anrufs ist die Verwendung der Netzwerkqualitäts-API, die das Netzwerk eines Teilnehmers überwacht und Qualitätsmetriken bereitstellt. Sie können sie in den Verbindungsoptionen aktivieren, wenn ein Teilnehmer dem Gruppenraum beitritt:

twilioRoom = await twilioVideo.connect('token', { 
    name: 'roomName', 
    audio: false, 
    video: false,
    networkQuality: {
        local: 3, // Local Participant's Network Quality verbosity
        remote: 1 // Remote Participants' Network Quality verbosity
    }
});

Wenn sich die Netzwerkqualität für Teilnehmer ändert, wird ein networkQualityLevelChanged-Ereignis generiert:

participant.on(networkQualityLevelChanged, (networkQualityLevel, networkQualityStats)  => {
    // Processing Network Quality stats
});

Azure Communication Services

Azure Communication Services stellt eine Funktion namens "User Facing Diagnostics" (UFD) bereit, mit der Sie verschiedene Eigenschaften eines Anrufs untersuchen können, um das Problem zu identifizieren. Benutzerbezogene Diagnoseereignisse können durch ein zugrundeliegendes Problem verursacht werden (schlechtes Netzwerk, das Mikrofon des Benutzers ist stumm geschaltet), das zu einem schlechten Anruferlebnis führen kann.

Die benutzerseitige Diagnose ist eine erweiterte Funktion der Kern-API für Anrufe und ermöglicht es Ihnen, einen aktiven Anruf zu diagnostizieren.

const userFacingDiagnostics = call.feature(Features.UserFacingDiagnostics);

Abonnieren Sie das Ereignis „diagnosticChanged“, um zu überwachen, wenn sich eine benutzerseitige Diagnose ändert:

/**
 *  Each diagnostic has the following data:
 * - diagnostic is the type of diagnostic, e.g. NetworkSendQuality, DeviceSpeakWhileMuted
 * - value is DiagnosticQuality or DiagnosticFlag:
 *     - DiagnosticQuality = enum { Good = 1, Poor = 2, Bad = 3 }.
 *     - DiagnosticFlag = true | false.
 * - valueType = 'DiagnosticQuality' | 'DiagnosticFlag'
 */
const diagnosticChangedListener = (diagnosticInfo: NetworkDiagnosticChangedEventArgs | MediaDiagnosticChangedEventArgs) => {
    console.log(`Diagnostic changed: ` +
        `Diagnostic: ${diagnosticInfo.diagnostic}` +
        `Value: ${diagnosticInfo.value}` +
        `Value type: ${diagnosticInfo.valueType}`);

    if (diagnosticInfo.valueType === 'DiagnosticQuality') {
        if (diagnosticInfo.value === DiagnosticQuality.Bad) {
            console.error(`${diagnosticInfo.diagnostic} is bad quality`);

        } else if (diagnosticInfo.value === DiagnosticQuality.Poor) {
            console.error(`${diagnosticInfo.diagnostic} is poor quality`);
        }

    } else if (diagnosticInfo.valueType === 'DiagnosticFlag') {
        if (diagnosticInfo.value === true) {
            console.error(`${diagnosticInfo.diagnostic}`);
        }
    }
};

userFacingDiagnostics.network.on('diagnosticChanged', diagnosticChangedListener);
userFacingDiagnostics.media.on('diagnosticChanged', diagnosticChangedListener);

Weitere Informationen zu User Facing Diagnostics und den verschiedenen verfügbaren Diagnosewerten finden Sie unter User Facing Diagnostics.

Azure Communication Services bietet auch eine Pre-Call-Diagnose-API. Um auf die Pre-Call-API zuzugreifen, müssen Sie ein callClient initialisieren und ein Azure Communication Services-Zugriffstoken bereitstellen. Dann können Sie auf die PreCallDiagnostics-Funktion und die startTest-Methode zugreifen.

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

const callClient = new CallClient(); 
const tokenCredential = new AzureCommunicationTokenCredential("INSERT ACCESS TOKEN");
const preCallDiagnosticsResult = await callClient.feature(Features.PreCallDiagnostics).startTest(tokenCredential);

Die Pre-Call-API gibt eine vollständige Diagnose des Geräts zurück, einschließlich Details wie Geräteberechtigungen, Verfügbarkeit und Kompatibilität, Anrufqualitätsstatistiken und Diagnosen zum eigentlichen Anruf. Die Ergebnisse werden als PreCallDiagnosticsResult-Objekt zurückgegeben.

export declare type PreCallDiagnosticsResult  = {
    deviceAccess: Promise<DeviceAccess>;
    deviceEnumeration: Promise<DeviceEnumeration>;
    inCallDiagnostics: Promise<InCallDiagnostics>;
    browserSupport?: Promise<DeviceCompatibility>;
    id: string;
    callMediaStatistics?: Promise<MediaStatsCallFeature>;
};

Mehr über die Sicherstellung der Bereitschaft vor einem Anruf erfahren Sie in der Pre-Call-Diagnose.

Ereignislistener

Twilio

twilioRoom.on('participantConnected', (participant) => { 
// Participant connected 
}); 

twilioRoom.on('participantDisconnected', (participant) => { 
// Participant Disconnected 
});

Azure Communication Services

Jedes Objekt im JavaScript Calling SDK verfügt über Eigenschaften und Sammlungen. Ihre Werte ändern sich im Laufe der Lebensdauer des Objekts. Verwenden Sie die Methode on(), um Ereignisse von Objekten zu abonnieren, und verwenden Sie die Methode off(), um Ereignisse nicht mehr zu abonnieren.

Eigenschaften

Sie müssen ihre Anfangswerte überprüfen und das Ereignis '\<property\>Changed' für zukünftige Wertaktualisierungen abonnieren.

Sammlungen

Sie müssen ihre Anfangswerte überprüfen und das Ereignis '\<collection\>Updated' für zukünftige Wertaktualisierungen abonnieren.
Die Nutzdaten des Ereignisses '\<collection\>Updated' enthalten ein added-Array, das Werte enthält, die der Auflistung hinzugefügt wurden.
Die '\<collection\>Updated'-Ereignisnutzdaten enthalten auch ein entferntes Array, das Werte enthält, die aus der Sammlung entfernt wurden.

Verlassen und Beenden von Sitzungen

Twilio

twilioVideo.disconnect();

Azure Communication Services

call.hangUp();

// Set the 'forEveryone' property to true to end call for all participants
call.hangUp({ forEveryone: true });

Bereinigung

Wenn Sie ein Communication Services-Abonnement bereinigen und entfernen möchten, können Sie die Ressource oder Ressourcengruppe löschen.

Voraussetzungen

Azure-Konto: Stellen Sie sicher, dass Ihr Azure-Konto aktiv ist. Neue Benutzer können ein kostenloses Konto bei Microsoft Azure erstellen.
Communication Services-Ressource: Richten Sie eine Communication Services-Ressource über Ihr Azure-Portal ein und notieren Sie ihre Verbindungszeichenfolge.
Azure CLI: Befolgen Sie die Anweisungen zum Installieren der Azure CLI unter Windows.
Benutzerzugriffstoken: Generieren Sie ein Benutzerzugriffstoken, um den Anrufclient zu instanziieren. Sie können eines mit der Azure CLI wie folgt erstellen:

az communication identity token issue --scope voip --connection-string "yourConnectionString"

Weitere Informationen finden Sie unter Verwenden der Azure CLI zum Erstellen und Verwalten von Zugriffstoken.

Für Videoanrufe als Teams-Benutzer:

Sie können auch die Teams-Identität verwenden. Informationen zum Generieren eines Zugriffstokens für einen Teams-Benutzer finden Sie unter Verwalten der Teams-Identität.
Rufen Sie die Teams-Thread-ID für Anrufvorgänge mithilfe des Graph Explorers ab. Informationen zum Erstellen einer Thread-ID finden Sie unter Chat erstellen – Microsoft Graph v1.0 > Beispiel2: Erstellen eines Gruppenchats.

UI-Bibliothek

Die Benutzeroberfläche der Azure Communication Services-Bibliothek vereinfacht den Prozess der Erstellung moderner Kommunikationsbenutzeroberflächen mithilfe von Azure Communication Services Calling. Es bietet eine Sammlung von einsatzbereiten UI-Komponenten, die Sie problemlos in Ihre Anwendung integrieren können.

Installation

Um die Migration von Twilio Video zu starten, besteht der erste Schritt darin, das Azure Communication Services Calling SDK für iOS in Ihrem Projekt zu installieren. Sie können diese Parameter mithilfe vonCocoaPods konfigurieren.

Zum Erstellen einer Podfile-Datei für Ihre Anwendung müssen Sie das Terminal öffnen, zum Projektordner navigieren und Folgendes ausführen:

pod init

Fügen Sie den folgenden Code in die Podfile-Datei ein, und speichern Sie die Datei (stellen Sie sicher, dass „target (Ziel)“ mit dem Namen Ihres Projekts übereinstimmt):

platform :ios, '13.0' 
use_frameworks! 
  
target 'AzureCommunicationCallingSample' do 
  pod 'AzureCommunicationCalling', '~> 2.6.0' 
end

Einrichten des .xcworkspace-Projekts

pod install

Öffnen Sie das .xcworkspace, welches von der Pod-Installation mit Xcode erstellt wurde.

Authentifizieren bei SDK

Um das Azure Communication Services Calling SDK verwenden zu können, müssen Sie sich mit einem Zugriffstoken authentifizieren.

Twilio

Die folgenden Codeausschnitte gehen davon aus, dass ein gültiges Zugriffstoken für Twilio Services verfügbar ist.

Von Twilio Video aus wird das Zugriffstoken verwendet, um eine Verbindung mit einem Raum herzustellen. Indem Sie das Token an ConnectOptions übergeben, können Sie die Option bereitstellen, einen Raum zu erstellen oder zu verbinden.

let connectOptions = ConnectOptions(token: accessToken) { 
 // Twilio Connect options goes here 
} 
 
let room =   TwilioVideoSDK.connect(
    options: connectOptions, 
    delegate: // The Room Delegate
)

Azure Communication Services

Für die folgenden Codeschnipsel ist ein gültiges Zugriffstoken erforderlich, um CallClient zu initiieren.

Sie benötigen ein gültiges Token. Weitere Informationen finden Sie unter Erstellen und Verwalten von Zugriffstoken.

// Create an instance of CallClient 
let callClient = CallClient() 
 
// A reference to the call agent, it will be initialized later 
var callAgent: CallAgent? 
 
// Embed the token in a CommunicationTokenCredential object 
let userCredential = try? CommunicationTokenCredential(token: "<USER_TOKEN>") 
 
// Create a CallAgent that will be used later to initiate or receive calls 
callClient.createCallAgent(userCredential: userCredential) { callAgent, error in 
 if error != nil { 
        // Raise the error to the user and return 
 } 
 self.callAgent = callAgent         
}

Klassenreferenz

Klassenname	Beschreibung
CallClient	Die Hauptklasse, die den Einstiegspunkt für das Calling SDK darstellt.
CommunicationTokenCredential	Die Anmeldeinformationen des Azure Communication Services-Benutzertokens
CallAgent	Die Klasse, die für die Verwaltung von Anrufen im Namen des authentifizierten Benutzers zuständig ist

Initiieren eines ausgehenden Anrufs

Twilio

Twilio Video verfügt über ein Room-Konzept. Wenn Benutzer Bob mit Kundin Alice telefonieren möchte, kann Bob einen Raum erstellen, und Alice muss sich mit diesem Raum verbinden, indem ein Feature wie eine Pushbenachrichtigung genutzt wird.

Herstellen einer Verbindung mit einem Raum

Wenn Benutzer Bob oder Benutzerin Alice einen Raum erstellen oder eine Verbindung zu einem Raum herstellen möchte und über ein gültiges Zugriffstoken verfügt. Sie können den Namen des Raums, den Sie erstellen oder mit dem Sie sich verbinden möchten, als Parameter von ConnectOptions übergeben.

let connectOptions = ConnectOptions(token: accessToken) { builder in 
 builder.roomName = "the-room"  
} 
 
room = TwilioVideoSDK.connect(options: connectOptions, delegate: self)

Azure Communication Services

Herstellen einer Verbindung mit einem Anruf

Das CommunicationUserIdentifier stellt eine Benutzeridentität dar, die mithilfe des Identity SDK oder der REST-API erstellt wurde. Es ist der einzige genutzte Bezeichner, wenn Ihre Anwendung keine Microsoft Teams-Features für Interoperabilität oder Telefonie verwendet.

Das Initiieren eines Anrufs mit dem Azure Communication Service Calling SDK besteht aus den folgenden Schritten:

Erstellen eines StartCallOptions-Objekts
Erstellen eines CommunicationUserIdentifier-Arrays
Aufrufen der startCall-Methode für den zuvor erstellten CallAgent

let startCallOptions = StartCallOptions() // 1 
let callees = [CommunicationUserIdentifier(“<USER_ID>”)] // 2 
 
callAgent?.startCall(participants: callees, options: startCallOptions) { call, error in 
    // Check for error if no Error and the call object isn't nil then the call is being established       
}

Herstellen einer Verbindung mit dem Anruf eines Teams

Mit externer Identität

Das Verbinden mit einem Team-Anruf ist fast dasselbe wie das Verbinden mit einem Anruf. Statt StartCallOptions zu verwenden, muss die Clientanwendung JoinCallOptions zusammen mit TeamsMeeting locator verwenden.

Der Teams-Besprechungslink kann mithilfe der Graph-APIs abgerufen werden. Weitere Informationen zu Graph-APIs finden Sie in der Graph-Dokumentation.

let joinCallOptions = JoinCallOptions()
let teamsMeetingLinkLocator = TeamsMeetingLinkLocator(meetingLink: meetingLink)
    callAgent?.join(with: teamsMeetingLinkLocator, joinCallOptions: joinCallOptions) { call, error in
    // Handle error or set a CallDelegate delegate on the call if no error
}

Annehmen und Teilnehmen an einem Anruf

Twilio

Twilio Video verwendet das Room-Konzept. Verschiedene Clients können miteinander kommunizieren, indem sie sich in denselben Raum begeben. Das Annehmen und Teilnehmen an einem Anruf ist also keine direkte Alternative.

Azure Communication Services

Eingehende Anrufe empfangen

Um Anrufe anzunehmen, muss die Anwendung zuerst so konfiguriert sein, dass eingehende Anrufe empfangen werden.

Registrierung für Pushbenachrichtigungen und Umgang mit eingehenden Pushbenachrichtigungen

Ein Anrufclient kann auswählen, Pushbenachrichtigungen für eingehende Anrufe zu empfangen. Dieser Leitfaden beschreibt, wie Sie APNS für Azure Communication Services Calling einrichten.

Einrichten von `CallAgentDelegate`

Das Azure Communication Services Calling SDK verfügt über CallAgentDelegatemit einer Methode, die bei einem eingehenden Anruf aufgerufen wird.

class ApplicationCallAgentDelegate: NSObject, CallAgentDelegate { 
 
    func callAgent(_ callAgent: CallAgent, didUpdateCalls args: CallsUpdatedEventArgs) {} 
 
    func callAgent(_ callAgent: CallAgent, didReceiveIncomingCall incomingCall: IncomingCall) { 
        // This is called when the application receives an incoming call 
        // An application could use this callback to  display an incoming call banner 
        // or report an incoming call to CallKit 
    } 
}

Um eingehende Anrufe zu empfangen, muss die Anwendung CallAgentDelegate zu CallAgent hinzufügen.

let callAgentDelegate = ApplicationCallAgentDelegate() 
callClient.createCallAgent(userCredential: userCredential) { callAgent, error in 
    if error != nil { 
        // Raise the error to the user and return 
    } 
    self.callAgent = callAgent 
    self.callAgent?.delegate = callAgentDelegate 
}

Wenn CallAgentDelegate eingerichtet und einer CallAgent-Instanz zugeordnet ist, sollte die Anwendung eingehende Anrufe empfangen können.

Annehmen eines eingehenden Anrufs

func acceptCall(incomingCall: IncomingCall) { 
    let options = AcceptCallOptions() 
    incomingCall.accept(options: options) {(call, error) in 
        if error != nil { 
            // Raise the error to the user and return 
        } 
      // The call is established clients can speak/view each other 
    }
}

Klassenreferenz

Klassenname	Beschreibung
CallAgentDelegate	Definiert eine Reihe von Methoden, die von `ACSCallAgent` als Reaktion auf wichtige Ereignisse aufgerufen werden.
IncomingCall	Beschreibt einen eingehenden Anruf

Videodatenstrom

Starten und Anhalten von Videos

Twilio

Zugreifen auf die Kamera

Bei Twilio Video besteht das Hinzufügen von Video zu einem Anruf aus zwei Schritten:

Zugreifen auf die Kamera
Hinzufügen der Videospur zur LocalVideoTrack-Liste

let options = CameraSourceOptions { (builder) in
    // Set the CameraSource options here
}
camera = CameraSource(options: options, delegate: aCameraDelegate)

Erstellen des LocalVideoTrack

Sobald die CameraSource erstellt wurde, kann sie LocalVideoTrack zugeordnet werden.

localVideoTrack = LocalVideoTrack(source: camera!, enabled: true, name: "Camera")

Hinzufügen von LocalVideoTrack zum Anruf

Zur Verbindungszeit: Wenn ein Anruf eine Verbindung herstellt, können Sie die lokale Videospur zum Anruf hinzufügen, indem Sie die lokale Videospur an die Spurliste localVideo übergeben, die mit „ConnectOptions“ festgelegt werden kann.

let connectOptions = ConnectOptions(token: accessToken) { builder in
     builder.videoTracks =  [localVideoTrack!]
}

In einem vorhandenen Raum: Der lokale Teilnehmer kann eine lokale Videospur über die publishVideoTrack(_ : LocalVideoTrack)-Methode veröffentlichen.

room.localParticipant.publishVideoTrack(localVideoTrack)

Azure Communication Services

Zugreifen auf die Kamera

Der Zugriff auf die Kamera erfolgt über DeviceManager. Das Abrufen einer DeviceManager-Instanz kann mit dem folgenden Code erfolgen.

self.callClient.getDeviceManager { (deviceManager, error) in
    if (error != nil) {
       // Display an error message to the user and exit the closure 
       return
    }
    self.deviceManager = deviceManager                 
}

Erstellen von `LocalVideoStream`

deviceManager ermöglicht Zugriff auf Kameras, die zum Erstellen einer LocalVideoStream-Instanz verwendet werden können.

LocalVideoStream(camera: deviceManager.cameras.first!)

Hinzufügen von `LocalVideoStream`

Zur Verbindungszeit

localVideoStream kann den Streams über OutgoingVideoOptions von StartCallOptions hinzugefügt werden.

var callOptions = StartCallOptions()
let outgoingVideoOptions = OutgoingVideoOptions()
outgoingVideoOptions.streams = [localVideoStream]

In einem Anruf

Ein Videostream kann gestartet werden, indem die startVideo-Methode aufgerufen wird, die einen LocalVideoStream als Parameter verwendet.

call.startVideo(stream: localVideoStream) { error in
    if error != ni {
     // Report the error to the user and return 
    }
}

Klassenreferenz

Klassenname	Beschreibung
DeviceManager	Erleichtert die Interaktion mit dem Gerät
LocalVideoStream	Lokale Informationen des Videostreams
VideoDeviceInfo	Informationen zu einem Videogerät
Call	Beschreibt einen Anruf

Rendern von Videos

Twilio

Um ein Video mithilfe von Twilio Video zu rendern, kann ein Objekt, das mit dem VideoRenderer-Protokoll konform ist, zu VideoTrack hinzugefügt werden. Das SDK enthält eine einsatzbereite VideoRenderer-Klasse namens VideoView, die eine Unterklasse von UIView ist.

let videoView = VideoView(frame: CGRect.zero, delegate: nil)

Nachdem eine Instanz von VideoView erstellt wurde, verfügt VideoTrack (lokal oder remote) über eine addVideoRenderer-Methode, die zum Hinzufügen der als Renderer erstellten videoView-Klasse verwendet werden kann.

localVideoTrack = LocalVideoTrack(source: camera, enabled: true, name: "Camera")
// Add renderer to video track for local preview
localVideoTrack!.addRenderer(videoView)

Azure Communication Services

Um ein Video mit Azure Communication Services Calling zu rendern, erstellen Sie VideoStreamRenderer, und übergeben Sie LocalVideoStream oder RemoteVideoStream als Parameter.

 let previewRenderer = try VideoStreamRenderer(localVideoStream: localVideoStream)

VideoStreamRenderer kann erstellt werden, um eine VideoStreamRendererView zu erstellen, die den an VideoStreamRenderer übergebenen Videostream rendert.

let scalingMode = ScalingMode.fit
let options = CreateViewOptions(scalingMode:scalingMode)
let previewView = try previewRenderer.createView(withOptions:options)

Klassenreferenz

Klassenname	Beschreibung
ScalingMode	Enumeration für den lokalen und Remote-Videoskalierungsmodus
CreateViewOptions	Optionen, die beim Rendern eines Videos übergeben werden
VideoStreamRenderer	Renderer für Videorendering
OutgoingVideoOptions	Dokumentation ist noch nicht verfügbar
VideoStreamRendererView	Zum Rendern von Videos verwendete Ansicht

Audiodatenstrom

Umschalten des Mikrofons

Twilio

Das Stummschalten und die Aufhebung der Stummschaltung des Mikrofons erfolgt über den mit dem Mikrofon verbundenen LocalAudioTrack.

Stummschalten des Mikrofons

self.localAudioTrack.isEnabled =  false

Aufheben der Stummschaltung des Mikrofons

self.localAudioTrack.isEnabled =  true

Azure Communication Services

Das Stummschalten und Aufheben der Stummschaltung kann durch Aufrufen von muteOutgoingAudio und unmuteoutgoingAudio für das Call-Objekt erfolgen.

Stummschalten des Mikrofons

'call': call.muteOutgoingAudio() { error in
    if error == nil {
        isMuted = true
    } else {
       // Display an error to the user
    }
}

Aufheben der Stummschaltung des Mikrofons

callBase.unmuteOutgoingAudio() { error in
    if error == nil {
        isMuted = true
    } else {
       // Display an error to the user
    }
}

Ereignislistener

Die SDKs für Twilio Video und Azure Communication Services Calling schlagen verschiedene Delegaten vor, um Anrufereignissen zu lauschen.

Raum-/Anrufereignisse

Twilio

RoomDelegate ermöglicht es Clients, Ereignissen im Zusammenhang mit dem Raum zu lauschen. Der verfügt über Methoden, die für die folgenden Ereignisse aufgerufen werden können:

Der Client hat eine Verbindung hergestellt oder kann nicht mit einem Raum verbunden werden.
Der Client verbindet sich wieder mit dem Raum oder hat sich wieder verbunden.
Ein Remoteteilnehmer hat sich mit dem Raum verbunden, getrennt und wieder verbunden.
Die Raumaufzeichnung wurde gestartet oder beendet.
Der dominante Sprecher ändert sich.

Azure Communication Services

Das Azure Communication Services Calling SDK ermöglicht es durch das Call-Objekt, verschiedene Ereignislistener zu integrieren und sie zu benachrichtigen, wenn sich eine Anrufeigenschaft ändert. Jeder Ereignistyp sollte einzeln abonniert werden. Weitere Informationen zur Ereignisbehandlung finden Sie im Tutorial für Ereignisse.

Der Anrufstatus wurde geändert. Hier wird das Verbindungsereignis gemeldet.
Die Liste der Remoteteilnehmer wurde aktualisiert.
Der lokale Videostream wurde aktualisiert.
Der Stummschaltungszustand wurde geändert.

Lokale Teilnehmerereignisse

Twilio

Twilio verfügt über einen LocalParticpant-Delegaten, mit dem der Client Updates zu den folgenden Ereignissen empfangen kann:

Der lokale Teilnehmer hat einen Medientitel veröffentlicht oder nicht veröffentlicht (Audio, Video, Daten)
Die Netzwerkqualitätsebene für den lokalen Teilnehmer wurde geändert

Azure Communication Services

Das Azure Communication Services Calling SDK verfügt über einen CallAgent-Delegaten, der es den Clients ermöglicht, dem zugehörigen Anruf-Agent-Ereignis zu lauschen. Er wird benachrichtigt, wenn:

Anrufe aktualisiert oder erstellt werden, im Falle eines eingehenden Anrufs oder beim Trennen eines vorhandenen Anrufs
Wenn ein eingehender Anruf empfangen wird

Remoteteilnehmerereignisse

Beide SDKs schlagen einen Remoteteilnehmerdelegaten vor, mit dem Clients darüber informiert werden können, was mit den einzelnen Remoteteilnehmern passiert.

Twilio

RemoteParticipantDelegate behandelt die folgenden Ereignisse.

Der Remoteteilnehmer hat eine Medienspur veröffentlicht oder entfernt (Video, Audio, Daten).
Der lokale Teilnehmer hat eine Remotemedienspur (Video, Audio, Daten) abonniert, nicht mehr abonniert oder konnte diese nicht abonnieren.
Die Netzwerkqualität des Remoteteilnehmers hat sich geändert.
Der Remoteteilnehmer hat die Priorität einer Spurveröffentlichung geändert.
Der Remoteteilnehmer hat seine Videospur ein-/ausgeschaltet.

Azure Communication Services

RemoteParticipantDelegate behandelt die folgenden Ereignisse.

Der Status des Remoteteilnehmers hat sich geändert.
Der Remoteteilnehmer ist stummgeschaltet oder nicht stummgeschaltet.
Der Remoteteilnehmer spricht.
Der Anzeigename des Remoteteilnehmers wurde geändert.
Der Remoteteilnehmer hat einen Videostream hinzugefügt oder entfernt.

Kameraereignisse

Twilio

Twilio schlägt ein CameraSourceDelegate vor, um den Client über die folgenden Ereignisse im Zusammenhang mit der Kamera zu informieren:

Die Kameraquelle wurde unterbrochen oder fortgesetzt (wenn Sie die Anwendung beispielsweise im Hintergrund platzieren)
Fehler bei der Kameraquelle
Die Kameraquelle meldet Systemdruck

Azure Communication Services

Azure Communication Services Calling schlägt ein DeviceManagerDelegate vor. Er besteht aus einer einzigen Methode, die Clients benachrichtigt, wenn Videogeräte im aktuellen DeviceManager hinzugefügt oder entfernt werden.

Klassenreferenz

Klassenname	Beschreibung
CallDelegate	Eine Reihe von Methoden, die durch Aufrufen des SDK als Reaktion auf wichtige Ereignisse aufgerufen werden.
CallAgentDelegate	Eine Reihe von Methoden, die von `ACSCallAgent` als Reaktion auf wichtige Ereignisse aufgerufen werden
RemoteParticipantDelegate	Eine Reihe von Methoden, die von `ACSRemoteParticipant` als Reaktion auf wichtige Ereignisse aufgerufen werden
DeviceManagerDelegate	Eine Reihe von Methoden, die von `ACSDeviceManager` als Reaktion auf wichtige Ereignisse aufgerufen werden

Beenden eines Anrufs

Twilio

Das Beenden eines Anrufs (Trennen von einem Raum) erfolgt über die room.disconnect()-Methode.

Azure Communication Services

Das Blockieren eines Anrufs erfolgt über die hangUp-Methode des Call-Objekts.

call.hangUp(options: HangUpOptions()) { error in
            if error != nil {
                print("ERROR: It was not possible to hang up the call.")
            }
            self.call = nil
 }

Klassenreferenz

Klassenname	Beschreibung
Call	Eine Reihe von Methoden, die von `ACSCall` als Reaktion auf wichtige Ereignisse aufgerufen werden
HangUp-Optionen	Eine Eigenschaftensammlungsklasse zum Blockieren eines Anrufs

Weitere Features von Azure Communication Services Calling

Dominanter Sprecher

Der erste Schritt, sich für Änderungen des dominanten Sprechers zu registrieren, besteht darin, eine Instanz des Features für dominante Sprecher aus dem Call-Objekt abzurufen. Erfahren Sie mehr über die Konfiguration für dominante Sprecher finden Sie im Tutorial.

let dominantSpeakersFeature = call.feature(Features.dominantSpeakers)

Sobald eine Instanz des Features für dominante Sprecher abgerufen wurde, kann DominantSpeakersCallFeatureDelegate angefügt werden.

dominantSpeakersFeature.delegate = DominantSpeakersDelegate()
public class DominantSpeakersDelegate : DominantSpeakersCallFeatureDelegate {
    public func dominantSpeakersCallFeature(_ dominantSpeakersCallFeature: DominantSpeakersCallFeature, didChangeDominantSpeakers args: PropertyChangedEventArgs) {
        // When the list changes, get the timestamp of the last change and the current list of Dominant Speakers
        let dominantSpeakersInfo = dominantSpeakersCallFeature.dominantSpeakersInfo
        let timestamp = dominantSpeakersInfo.lastUpdatedAt
        let dominantSpeakersList = dominantSpeakersInfo.speakers
    }
}

Statistiken zur Medienqualität

Um die Medienqualität während des Anrufs nachzuvollziehen, stellt das Azure Communication Services SDK Statistiken zur Medienqualität bereit. Verwenden Sie sie, um die detaillierten Metriken der Audio-, Video- und Bildschirmfreigabequalität für eingehende und ausgehende Anrufe zu untersuchen. Weitere Informationen finden Sie im Leitfaden zur Medienqualitätsstatistik.

Benutzerseitige Diagnose

Das Azure Communication Services Calling SDK enthält eine Feature namens User Facing Diagnostics (UFD), mit dem Clients verschiedene Eigenschaften eines Anrufs überprüfen können, um potenzielle Probleme zu identifizieren. Weitere Informationen zur Benutzerdiagnose finden Sie unter User Facing Diagnostics.

Wichtig

Für einige Features des Azure Communication Services Calling SDK, die in der Liste beschrieben werden, gibt es im Twilio Video SDK kein Pendant.

Hand heben

Das Feature RaiseHand ermöglicht es den Teilnehmern eines Gesprächs, die Hand zu heben oder zu senken.

Videohintergrund

Mit Videohintergrund können Benutzer den Hintergrund im Videostream unscharf machen.

Video-Spotlights

Spotlight ermöglicht Benutzern das Anheften und Lösen von Videos.

Voraussetzungen

Azure-Konto: Stellen Sie sicher, dass Ihr Azure-Konto aktiv ist. Neue Benutzer können ein kostenloses Konto bei Microsoft Azure erstellen.
Communication Services-Ressource: Richten Sie eine Communication Services-Ressource über Ihr Azure-Portal ein und notieren Sie ihre Verbindungszeichenfolge.
Azure CLI: Befolgen Sie die Anweisungen zum Installieren der Azure CLI unter Windows.
Benutzerzugriffstoken: Generieren Sie ein Benutzerzugriffstoken, um den Anrufclient zu instanziieren. Sie können eines mit der Azure CLI wie folgt erstellen:

az communication identity token issue --scope voip --connection-string "yourConnectionString"

Weitere Informationen finden Sie unter Verwenden der Azure CLI zum Erstellen und Verwalten von Zugriffstoken.

Für Videoanrufe als Teams-Benutzer:

Sie können auch die Teams-Identität verwenden. Informationen zum Generieren eines Zugriffstokens für einen Teams-Benutzer finden Sie unter Verwalten der Teams-Identität.
Rufen Sie die Teams-Thread-ID für Anrufvorgänge mithilfe des Graph Explorers ab. Informationen zum Erstellen einer Thread-ID finden Sie unter Chat erstellen – Microsoft Graph v1.0 > Beispiel2: Erstellen eines Gruppenchats.

UI-Bibliothek

Installation

Um die Migration von Twilio Video zu starten, besteht der erste Schritt darin, das Azure Communication Services Calling SDK für Android in Ihrem Projekt zu installieren. Das Azure Communication Services Calling SDK kann als gradle-Abhängigkeit integriert werden.

Hinzufügen des Azure-Kommunikationsanrufpakets

dependencies {
     ...
    implementation "com.azure.android:azure-communication-calling:<version>"
}

Überprüfen von Berechtigungen im Anwendungsmanifest

Stellen Sie sicher, dass Ihre Anwendungsmanifestdatei die erforderlichen Berechtigungen enthält, und nehmen Sie die erforderlichen Anpassungen vor.

<manifest >
   <uses-feature android:name="android.hardware.camera" /> 
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
</manifest>

Authentifizieren bei SDK

Um das Azure Communication Services Calling SDK verwenden zu können, müssen Sie sich mit einem Zugriffstoken authentifizieren.

Twilio

Die folgenden Codeausschnitte gehen davon aus, dass ein gültiges Zugriffstoken für Twilio Services verfügbar ist.

Java
Kotlin

ConnectOptions connectOptions = new ConnectOptions.Builder(accessToken).build();
room = Video.connect(context, connectOptions, roomListener);

val connectOptions = ConnectOptions.Builder(accessToken).build()
room = Video.connect(context, connectOptions, roomListener)

Azure Communication Services

Für die folgenden Codeschnipsel ist ein gültiges Zugriffstoken erforderlich, um CallClient zu initiieren.

Sie benötigen ein gültiges Token. Weitere Informationen finden Sie unter Erstellen und Verwalten von Zugriffstoken.

Java
Kotlin

String userToken = "<USER_TOKEN>";
CommunicationTokenCredential tokenCredential = new CommunicationTokenCredential(accessToken);

CallClient callClient = new CallClient();
callAgent = callClient.createCallAgent(getApplicationContext(), tokenCredential).get();

val userToken = "<USER_TOKEN>"
val communicationCredential = CommunicationTokenCredential(accessToken)
val callAgent: CallAgent = CallClient().createCallAgent(
     applicationContext,
     communicationCredential,
     CallAgentOptions()
).get()

Klassenreferenz

Klassenname	Beschreibung
CallClient	Die Klasse, die als Einstiegspunkt für das Calling SDK dient.
CommunicationTokenCredential	Die Anmeldeinformationen des Azure Communication Services-Benutzertokens
CallAgent	Die Klasse, die für die Verwaltung von Anrufen im Namen des authentifizierten Benutzers verantwortlich ist

Initiieren eines ausgehenden Anrufs

ConnectOptions connectOptions = new ConnectOptions.Builder(accessToken)
    .roomName(roomName)
    .build()
room = Video.connect(context, connectOptions, roomListener);

    val connectOptions: ConnectOptions = ConnectOptions.Builder(accessToken)
        .roomName(roomName)
        .build()
    val room = Video.connect(context, connectOptions, roomListener)

Azure Communication Services

Herstellen einer Verbindung mit einem Anruf

Das Initiieren eines Anrufs mit dem Azure Communication Service Calling SDK besteht aus den folgenden Schritten:

Erstellen eines CommunicationUserIdentifier-Arrays
Aufrufen der startCall-Methode für den zuvor erstellten CallAgent

Java
Kotlin

ArrayList<CommunicationIdentifier> userCallee = new ArrayList<>();
participants.add(new CommunicationUserIdentifier(“<USER_ID>”));

Call call = callAgent.startCall(context, userCallee);

val call: Call = callAgent.startCall(
     applicationContext,
     listOf(CommunicationUserIdentifier(“<USER_ID>”))
)

Herstellen einer Verbindung mit einem Teams-Anruf

Mit externer Identität

Das Herstellen einer Verbindung mit einem Microsoft Teams-Anruf ist fast identisch mit dem Herstellen einer Verbindung mit einem Anruf. Statt StartCallOptions verwendet die Clientanwendung JoinCallOptions mit TeamsMeetingLocator.

Der Teams-Besprechungslink kann mithilfe der Graph-APIs abgerufen werden. Der Abrufvorgang wird in der Grafikdokumentation ausführlich beschrieben.

Java
Kotlin

JoinCallOptions options = new JoinCallOptions();
TeamsMeetingLinkLocator teamsMeetingLinkLocator = new TeamsMeetingLinkLocator(meetingLink);
Call call = callAgent.join(getApplicationContext(), teamsMeetingLinkLocator, joinCallOptions);

val options = JoinCallOptions()
val teamsMeetingLinkLocator = TeamsMeetingLinkLocator(meetingLink)
val call: Call = callAgent.join(getApplicationContext(), teamsMeetingLinkLocator, joinCallOptions)

Annehmen und Teilnehmen an einem Anruf

Twilio

Azure Communication Services

Eingehende Anrufe empfangen

Um Anrufe anzunehmen, muss die Anwendung zuerst so konfiguriert sein, dass eingehende Anrufe empfangen werden.

Registrieren für Pushbenachrichtigungen und Behandeln eingehender Pushbenachrichtigungen

Ein Anrufclient kann auswählen, Pushbenachrichtigungen für eingehende Anrufe zu empfangen. Dieser Leitfaden beschreibt, wie Sie APNS für Azure Communication Services Calling einrichten.

Einrichten von `CallAgentListener`

Das Azure Communication Services Calling SDK enthält ein IncomingCallListener. IncomingCallListener wird in der CallAgent-Instanz festgelegt. Dieser Listener definiert eine onIncomingCall(IncomingCall incomingCall)-Methode, die beim Eintreffen eines eingehenden Anrufs ausgelöst wird.

Java
Kotlin

callAgent.addOnIncomingCallListener((incomingCall) -> {
     this.incomingCall = incomingCall;

     // Get incoming call ID  
     incomingCall.getId();

     // Get information about caller
     incomingCall.getCallerInfo();

     // CallEndReason is also a property of IncomingCall
      CallEndReason callEndReason = incomingCall.getCallEndReason();
});

callAgent.addOnIncomingCallListener { incomingCall ->
     this.incomingCall = incomingCall

     // Get incoming call ID
     incomingCall.id

     // Get information about caller
     incomingCall.callerInfo

    // callEndReason is also a property of IncomingCall
    val callEndReason = incomingCall.callEndReason
}

Durch die Implementierung von CallAgentListener und das Zuordnen zu einer CallAgent-Instanz ist die Anwendung bereit, eingehende Anrufe zu empfangen.

Eingehenden Anruf annehmen

Java
Kotlin

incomingCall.accept(context);

incomingCall.accept(context)

Klassenreferenz

Klassenname	Beschreibung
IncomingCallListener	Funktionale Schnittstelle für eingehende Anrufe.
IncomingCall	Beschreibt einen eingehenden Anruf

Videodatenstrom

Starten und Anhalten von Videos

Twilio

Zugreifen auf die Kamera

Bei Twilio Video besteht das Hinzufügen von Video zu einem Anruf aus zwei Schritten:

Zugreifen auf die Kamera
Hinzufügen der Videospur zur LocalVideoTrack-Liste

Java
Kotlin

 // Access the camera
CameraCapturer cameraCapturer = new Camera2Capturer(context, frontCameraId);

  // Create a video track
LocalVideoTrack videoTrack = LocalVideoTrack.create(context, true, cameraCapturer, LOCAL_VIDEO_TRACK_NAME);

  // The VideoTrack is enabled by default. It can be enabled or disabled if necessary
videoTrack.enable(true|false);

// Access the camera
val cameraCapturer: CameraCapturer = Camera2Capturer(context, frontCameraId)

// Create a video track
val localVideoTrack = LocalVideoTrack.create(context, enable, cameraCapturer)

// The VideoTrack is enabled by default. It can be enabled or disabled if necessary
videoTrack.enable(true|false)

Hinzufügen von `LocalVideoTrack`

Zur Verbindungszeit: Das Hinzufügen einer lokalen Videospur erfolgt durch Übergeben von LocalVideoTrack an die LocalVideoTrack-Liste, die über ConnectOptions festgelegt wird.

Java
Kotlin

 ConnectOptions connectOptions = new ConnectOptions.Builder(accessToken)
    .roomName(roomName)
    .videoTracks(localVideoTracks)
}

    val connectOptions = ConnectOptions.Builder(accessToken)
        .roomName(roomName)
        .videoTracks(localVideoTracks)
}

In einem vorhandenen Raum kann der lokale Teilnehmer eine lokale Videospur über die publishTrack(LocalVideoTrack localVideoTrack)-Methode veröffentlichen.

Java
Kotlin

room.localParticipant.publishVideoTrack(localVideoTrack)

room.localParticipant.publishVideoTrack(localVideoTrack)

Azure Communication Services

Zugreifen auf die Kamera

Der Zugriff auf die Kamera erfolgt über DeviceManager. Rufen Sie eine Instanz von DeviceManager mithilfe des folgenden Codeschnipsels ab.

Java
Kotlin

DeviceManager deviceManager = callClient.getDeviceManager(getApplicationContext()).get();

deviceManager.getCameras();

val deviceManager: DeviceManager = CallClient().getDeviceManager(applicationContext).get()

deviceManager.cameras

Erstellen von `LocalVideoStream`

DeviceManager ermöglicht Zugriff auf Kameraobjekte, die die Erstellung einer LocalVideoStream-Instanz ermöglichen.

Java
Kotlin

VideoDeviceInfo camera = deviceManager.getCameras().get(0);
LocalVideoStream videoStream = new LocalVideoStream(camera, context);

val camera : VideoDeviceInfo? = deviceManager.cameras.firstOrNull()
val videoStream = LocalVideoStream(camera, context)

Hinzufügen von `LocalVideoStream`

Zur Verbindungszeit: LocalVideoStream wird den Streams über OutgoingVideoOptions von StartCallOptions hinzugefügt.

Java
Kotlin

    StartCallOptions options = new StartCallOptions();
    LocalVideoStream[] videoStreams = new LocalVideoStream[1];
    videoStreams[0] = videoStream;
    VideoOptions videoOptions = new VideoOptions(videoStreams);
    options.setVideoOptions(videoOptions);

    val options = StartCallOptions()
    val videoStreams: Array<LocalVideoStream> = arrayOf(localVideoStream)
    val videoOptions = VideoOptions(videoStreams)
    options.setVideoOptions(videoOptions)

In einem Anruf: Initiieren Sie einen Videostream, indem Sie die startVideo-Methode aufrufen, die LocalVideoStream als Parameter akzeptiert.

Java
Kotlin

call.startVideo(context, videoStream).get();

call.startVideo(context, videoStream).get()

Klassenreferenz

Klassenname	Beschreibung
DeviceManager	Erleichtert die Interaktion mit dem Gerät
LocalVideoStream	Lokale Informationen des Videostreams
VideoDeviceInfo	Informationen zu einem Videogerät
VideoOptions	Eigenschaftensammlungsklasse für Videooptionen
Call	Beschreibt einen Anruf

Rendern von Videos

Twilio

Um ein Video mithilfe von Twilio Video zu rendern, kann ein Objekt, das mit VideoSink konform ist, zu VideoTrack hinzugefügt werden. Das SDK enthält eine vorgefertigte VideoSink-Klasse namens VideoView, die eine Unterklasse von android.view.View ist.

Java
Kotlin

videoTrack.addSink(videoVideoView);

videoTrack.addSink(videoVideoView);

Azure Communication Services

Um Video mit Azure Communication Services Calling zu rendern, instanziieren Sie VideoStreamRenderer, und übergeben Sie LocalVideoStream oder RemoteVideoStream als Parameter an den Konstruktor.

Java
Kotlin

VideoStreamRenderer previewRenderer = new VideoStreamRenderer(remoteStream, context);
VideoStreamRendererView preview = previewRenderer.createView(new CreateViewOptions(ScalingMode.FIT));

val previewRenderer = VideoStreamRenderer(localVideoStream, context)
val preview: VideoStreamRendererView = previewRenderer.createView(CreateViewOptions(ScalingMode.FIT))
videoContainer.addView(preview)

Klassenreferenz

Klassenname	Beschreibung
ScalingMode	Enumeration für den lokalen und Remote-Videoskalierungsmodus
CreateViewOptions	Optionen, die beim Rendern eines Videos übergeben werden
VideoStreamRenderer	Renderer für Videorendering
VideoStreamRendererView	Zum Rendern von Videos verwendete Ansicht

Audiodatenstrom

Umschalten des Mikrofons

Twilio

Beim Twilio Video SDK wird das Mikrofon stumm geschaltet und die Stummschaltung aufgehoben, indem Sie den mit dem Mikrofon verbundenen LocalAudioTrack aktivieren oder deaktivieren.

Java
Kotlin

localAudioTrack.enable(true|false);

localAudioTrack.enable(true|false)

Azure Communication Services

Das Call-Objekt schlägt Methoden zum Stummschalten und zur Aufhebung der Stummschaltung des Mikrofons vor.

Java
Kotlin

call.muteOutgoingAudio(context).get();
call.unmuteOutgoingAudio(context).get();

// Mute incoming audio sets the call volume to 0. To mute or unmute the incoming audio, use the muteIncomingAudio and unmuteIncomingAudio asynchronous APIs

call.muteIncomingAudio(context).get();
call.unmuteIncomingAudio(context).get();

call.muteOutgoingAudio(context).get()
call.unmuteOutgoingAudio(context).get()

// Mute incoming audio sets the call volume to 0. To mute or unmute the incoming audio, use the muteIncomingAudio and unmuteIncomingAudio asynchronous APIs

call.muteIncomingAudio(context).get()
call.unmuteIncomingAudio(context).get()

Ereignislistener

Die SDKs für Twilio Video und Azure Communication Services Calling schlagen verschiedene Listener vor, um Anrufereignissen zu lauschen.

Raum-/Anrufereignisse

Twilio

Room.Listener ermöglicht es Clients, Ereignissen im Zusammenhang mit dem Room-Objekt zu lauschen. Room.Listener enthält Methoden, die bei den folgenden Ereignissen ausgelöst werden:

Der Client hat eine Verbindung hergestellt oder konnte nicht mit einem Raum verbunden werden.
Der Client verbindet sich wieder mit dem Raum oder hat sich wieder verbunden.
Ein Remoteteilnehmer hat sich mit dem Raum verbunden, getrennt und wieder verbunden.
Die Raumaufzeichnung wurde gestartet oder beendet.
Der dominante Sprecher hat sich geändert.

Azure Communication Services

Das Azure Communication Services Calling SDK ermöglicht es durch das Call-Objekt, verschiedene PropertyChangedListener-Objekte zu integrieren und zu benachrichtigen, wenn sich eine Anrufeigenschaft ändert. Jeder Ereignistyp sollte einzeln abonniert werden. Weitere Informationen zur Ereignisbehandlung finden Sie im Tutorial für Ereignisse.

Die verschiedenen PropertyChangedListeners, die einem Anruf zugewiesen werden können, umfassen bestimmte Ereignisse, die von Twilio abgedeckt werdenRoom.Listener, mit Methoden für die folgenden Ereignisse:

Der Anrufstatus wurde geändert.
Die Liste der Remoteteilnehmer wurde aktualisiert.
Der lokale Videostream wurde aktualisiert.
Der Stummschaltungszustand wurde geändert.

Lokale Teilnehmerereignisse

Twilio

Twilio verfügt über eine LocalParticipant.Listener-Funktion, mit der Clients Aktualisierungen zu den folgenden Ereignissen erhalten können:

Der lokale Teilnehmer hat eine Medienspur (Audio, Video, Daten) veröffentlicht oder konnte diese nicht veröffentlichen.
Die Netzwerkqualität des lokalen Teilnehmers hat sich geändert.

Azure Communication Services

CallAgent empfängt Aktualisierungen für Anrufe über zwei Listener: CallsUpdatedListener und IncomingCallListener. Diese Listener werden für die folgenden Ereignisse ausgelöst:

Anrufe werden aktualisiert. Ein neuer Anruf wird erstellt, oder ein vorhandener Anruf wird getrennt.
Ein eingehender Anruf wird empfangen.

Remoteteilnehmerereignisse

Beide SDKs bieten Mechanismen zum Verarbeiten von Updates von Remoteteilnehmern.

Twilio

RemoteParticipant.Listener behandelt die folgenden Ereignisse.

Der Remoteteilnehmer hat eine Medienspur veröffentlicht oder entfernt (Video, Audio, Daten).
Der lokale Teilnehmer hat eine Remotemedienspur (Video, Audio, Daten) abonniert, nicht mehr abonniert oder konnte diese nicht abonnieren.
Die Netzwerkqualität des Remoteteilnehmers hat sich geändert.
Der Remoteteilnehmer hat die Priorität einer Spurveröffentlichung geändert.
Der Remoteteilnehmer hat seine Videospur ein-/ausgeschaltet.

Azure Communication Services

Fügen Sie dem PropertyChangedListener-Objekt ein RemoteParticipant hinzu, um Aktualisierungen für die folgenden Ereignisse zu erhalten:

Der Status des Remoteteilnehmers hat sich geändert.
Der Remoteteilnehmer ist stummgeschaltet oder nicht stummgeschaltet.
Der Remoteteilnehmer spricht.
Der Anzeigename des Remoteteilnehmers wurde geändert.
Der Remoteteilnehmer hat einen Videostream hinzugefügt oder entfernt.

Kameraereignisse

Twilio

Twilio schlägt ein CameraCapturer.Listener vor, um den Client über die folgenden Ereignisse im Zusammenhang mit der Kamera zu informieren:

Die Kameraquelle wurde umgeschaltet
Fehler bei der Kameraquelle
Der erste Frame wurde von der Kamera aufgenommen

Azure Communication Services

Das Azure Communication Services Calling SDK schlägt VideoDevicesUpdatedListener vor. Es definiert eine einzelne Methode, um Clients zu benachrichtigen, wenn Videogeräte im aktuellen DeviceManager hinzugefügt oder entfernt werden.

Klassenreferenz

Klassenname	Beschreibung
PropertyChangedListener	Informiert die Bibliothek darüber, dass sich der Anrufstatus ändert
CallsUpdatedListener	Informiert die Bibliothek, wenn die Anrufe aktualisiert werden
IncomingCallListener	Informiert die Bibliothek über eingehende Anrufe
VideoDevicesUpdatedListener	Informiert die Bibliothek, dass neue Videogeräte zur aktuellen Bibliothek hinzugefügt oder entfernt wurden

Beenden eines Anrufs

Twilio

Das Beenden eines Anrufs (Trennen von einem Raum) erfolgt über die room.disconnect()-Methode.

Java
Kotlin

room.disconnect();

room.disconnect()

Azure Communication Services

Das Blockieren eines Anrufs erfolgt über die hangUp-Methode des Call-Objekts.

Java
Kotlin

call.hangUp().get();

// Set the 'forEveryone' property to true to end call for all participants
HangUpOptions options = new HangUpOptions();
options.setForEveryone(true);
call.hangUp(options).get();

call.hangUp().get()

// Set the 'forEveryone' property to true to end call for all participants
call.hangUp(HangUpOptions().apply { isForEveryone = true }).get()

Klassenreferenz

Klassenname	Beschreibung
HangUp-Optionen	Eigenschaftensammlungsklasse zum Blockieren eines Anrufs

Weitere Features von Azure Communication Services Calling

Dominanter Sprecher

Um sich für Änderungen des dominanten Sprechers zu registrieren, instanziieren Sie DominantSpeakersCallFeature aus dem Call-Objekt. Erfahren Sie mehr über die Konfiguration für dominante Sprecher finden Sie im Tutorial.

Java
Kotlin

DominantSpeakersCallFeature dominantSpeakersFeature = call.feature(Features.DOMINANT_SPEAKERS);

// Subscribe to the dominant speaker change event to receive updates about the dominant speaker.

dominantSpeakersFeature.addOnDominantSpeakersChangedListener(event -> {
       dominantSpeakersFeature.getDominantSpeakersInfo();
});

val dominantSpeakersFeature = call.feature(Features.DOMINANT_SPEAKERS)

// Subscribe to the dominant speaker change event to receive updates about the dominant speaker.

dominantSpeakersFeature.apply {
     addOnDominantSpeakersChangedListener { event ->
         dominantSpeakersInfo
     }
}

Statistiken zur Medienqualität

Benutzerseitige Diagnose

Wichtig

Für einige Features des Azure Communication Services Calling SDK, die in der Liste beschrieben werden, gibt es im Twilio Video SDK kein Pendant.

Hand heben

Das Feature RaiseHand ermöglicht es den Teilnehmern eines Gesprächs, die Hand zu heben oder zu senken.

Videohintergrund

Mit Videohintergrund können Benutzer den Hintergrund im Videostream unscharf machen.

Video-Spotlights

Spotlights ermöglicht Benutzern das Anheften und Lösen von Videos.

Freigeben über

Migrieren von Twilio Video zu Azure Communication Services

Wichtige im Azure Communication Services Calling SDK verfügbare Features

Voraussetzungen

UI-Bibliothek

Installation

Installieren Sie das Azure Communication Services Calling SDK

Entfernen des Twilio SDK aus dem Projekt

Objektmodell

Initialisieren des Calling SDK (CallClient/CallAgent)

Geräte-Manager

Twilio

Azure Communication Services

Geräteberechtigungen erlangen

Twilio

Azure Communication Services

Starten eines Anrufs

Twilio

Azure Communication Services

1:1-Anruf

Raumanruf

Gruppenanruf

Teams-Anruf

Annehmen und Teilnehmen an einem Anruf

Twilio

Azure Communication Services

Hinzufügen und Entfernen von Teilnehmern zu/von einem Anruf

Twilio

Azure Communication Services

Videoanrufe

Starten und Anhalten von Videos

Twilio

Azure Communication Services

Rendern des Videos eines Remotebenutzers

Twilio

Azure Communication Services

Virtueller Hintergrund

Twilio

Azure Communication Services

Audio

Starten und Anhalten von Audio

Twilio

Azure Communication Services

Erkennen dominanter Lautsprecher

Twilio

Azure Communication Services

Aktivieren der Bildschirmfreigabe

Twilio

Azure Communication Services

Statistiken zur Medienqualität

Twilio

Azure Communication Services

Diagnostik

Twilio

Azure Communication Services

Ereignislistener

Twilio

Azure Communication Services

Verlassen und Beenden von Sitzungen

Twilio

Azure Communication Services

Bereinigung

Voraussetzungen

UI-Bibliothek

Installation

Authentifizieren bei SDK

Twilio

Azure Communication Services

Klassenreferenz

Initiieren eines ausgehenden Anrufs

Twilio

Herstellen einer Verbindung mit einem Raum

Azure Communication Services

Herstellen einer Verbindung mit einem Anruf

Herstellen einer Verbindung mit dem Anruf eines Teams

Mit externer Identität

Annehmen und Teilnehmen an einem Anruf

Twilio

Azure Communication Services

Eingehende Anrufe empfangen

Einrichten von `CallAgentDelegate`

Erstellen von `LocalVideoStream`

Hinzufügen von `LocalVideoStream`

Einrichten von `CallAgentListener`