Dela via

Snabbstart: Lägga till undertexter i din samtalsapp

  • Artikel

Förutsättningar

Kommentar

Observera att du måste ha en röstsamtalsapp med hjälp av Azure Communication Services som anropar SDK:er för att få åtkomst till funktionen för undertexter som beskrivs i den här guiden.

Modeller

Name beskrivning
CaptionsCallFeature API för bildtexter
CaptionsCommon Basklass för bildtexter
StartCaptionOptions Alternativ för dold bildtext som talat språk
CaptionsHandler Motringningsdefinition för hantering av captionsReceivedEventType-händelse
CaptionsInfo Datastruktur som tas emot för varje CaptionsReceivedEventType-händelse

Hämta funktionen för undertexter

let captionsCallFeature: SDK.CaptionsCallFeature = call.feature(SDK.Features.Captions);

Hämta undertextobjekt

Du måste hämta och casta objektet Bildtexter för att använda specifika funktioner för bildtexter.

let captions: SDK.Captions;
if (captionsCallFeature.captions.kind === 'Captions') {
    captions = captionsCallFeature.captions as SDK.Captions;
}

Prenumerera på lyssnare

Lägg till en lyssnare för att ta emot undertexter som är aktiva/inaktiva

const captionsActiveChangedHandler = () => {
    if (captions.isCaptionsFeatureActive) {
        /* USER CODE HERE - E.G. RENDER TO DOM */
    }
}
captions.on('CaptionsActiveChanged', captionsActiveChangedHandler);

Lägga till en lyssnare för mottagna textningsdata

Hantera det returnerade captionsInfo-dataobjektet.

Obs! Objektet innehåller en resultType-prop som anger om data är en partiell beskrivning eller en slutförd version av bildtexten. ResultType Partial anger live oredigerad bildtext, medan Final anger en slutförd tolkad version av meningen (d.v.s. innehåller skiljetecken och versaler).

const captionsReceivedHandler : CaptionsHandler = (data: CaptionsInfo) => { 
    /** USER CODE HERE - E.G. RENDER TO DOM 
     * data.resultType
     * data.speaker
     * data.spokenLanguage
     * data.spokenText
     * data.timeStamp
    */
   // Example code:
   // Create a dom element, i.e. div, with id "captionArea" before proceeding with the sample code
    let mri: string;
    switch (data.speaker.identifier.kind) {
        case 'communicationUser': { mri = data.speaker.identifier.communicationUserId; break; }
        case 'phoneNumber': { mri = data.speaker.identifier.phoneNumber; break; }
    }
    const outgoingCaption = `prefix${mri.replace(/:/g, '').replace(/-/g, '')}`;

    let captionArea = document.getElementById("captionArea");
    const captionText = `${data.timestamp.toUTCString()}
        ${data.speaker.displayName}: ${data.spokenText}`;

    let foundCaptionContainer = captionArea.querySelector(`.${outgoingCaption}[isNotFinal='true']`);
    if (!foundCaptionContainer) {
        let captionContainer = document.createElement('div');
        captionContainer.setAttribute('isNotFinal', 'true');
        captionContainer.style['borderBottom'] = '1px solid';
        captionContainer.style['whiteSpace'] = 'pre-line';
        captionContainer.textContent = captionText;
        captionContainer.classList.add(outgoingCaption);

        captionArea.appendChild(captionContainer);
    } else {
        foundCaptionContainer.textContent = captionText;

        if (captionData.resultType === 'Final') {
            foundCaptionContainer.setAttribute('isNotFinal', 'false');
        }
    }
}; 
captions.on('CaptionsReceived', captionsReceivedHandler);

Lägg till en lyssnare för att få ändrat status för talat språk

// set a local variable currentSpokenLanguage to track the current spoken language in the call
let currentSpokenLanguage = ''
const spokenLanguageChangedHandler = () => {
    if (captions.activeSpokenLanguage !== currentSpokenLanguage) {
        /* USER CODE HERE - E.G. RENDER TO DOM */
    }
}
captions.on('SpokenLanguageChanged', spokenLanguageChangedHandler)

Starttexter

När du har konfigurerat alla lyssnare kan du nu börja lägga till bildtexter.

try {
    await captions.startCaptions({ spokenLanguage: 'en-us' });
} catch (e) {
    /* USER ERROR HANDLING CODE HERE */
}

Stoppa undertexter

try {
    captions.stopCaptions(); 
} catch (e) {
    /* USER ERROR HANDLING CODE HERE */
}

Avsluta prenumerationen på lyssnare

captions.off('CaptionsActiveChanged', captionsActiveChangedHandler);
captions.off('CaptionsReceived', captionsReceivedHandler);

Stöd för talat språk

Hämta en lista över talade språk som stöds

Hämta en lista över talade språk som stöds och som användarna kan välja mellan när de aktiverar undertexter. Egenskapen returnerar en matris med språk i bcp 47-format.

const spokenLanguages = captions.supportedSpokenLanguages;

Ange talat språk

Skicka in ett värde från matrisen talade språk som stöds för att säkerställa att det begärda språket stöds. Om contoso inte tillhandahåller något språk eller ett språk som inte stöds är standardspråket "en-us".

// bcp 47 formatted language code
const language = 'en-us'; 

// Alternatively, pass a value from the supported spoken languages array
const language = spokenLanguages[0]; 

try {
    captions.setSpokenLanguage(language);
} catch (e) {
    /* USER ERROR HANDLING CODE HERE */
}

Lägg till en lyssnare för att ta emot textningstypen ändrad status

Typ av bildtexter kan ändras från Bildtexter till TeamsCaptions om en Teams/CTE-användare ansluter till samtalet eller om samtalet ändras till en interop-samtalstyp. Omprenumerationer till teamstextlyssnare krävs för att fortsätta beskrivningsupplevelsen. TeamsCaptions-typen kan inte växlas eller ändras tillbaka till Typ av bildtext i ett samtal när TeamsCaptions används i samtalet.

const captionsKindChangedHandler = () => {
    /* USER CODE HERE - E.G. SUBSCRIBE TO TEAMS CAPTIONS */
}
captions.on('CaptionsKindChanged', captionsKindChangedHandler)

Förutsättningar

Kommentar

Observera att du måste ha en röstsamtalsapp med hjälp av Azure Communication Services som anropar SDK:er för att få åtkomst till funktionen för undertexter som beskrivs i den här guiden.

Modeller

Name beskrivning
CaptionsCallFeature API för anropsfunktion för undertexter
CommunicationCaptions API för kommunikationstexter
StartCaptionOptions Alternativ för dold bildtext som talat språk
CommunicationCaptionsReceivedEventArgs Dataobjekt som tagits emot för varje mottagen kommunikationstext

Hämta funktionen för undertexter

Du måste hämta och casta objektet Bildtexter för att använda specifika funktioner för bildtexter.

CaptionsCallFeature captionsCallFeature = call.Features.Captions;
CallCaptions callCaptions = await captionsCallFeature.GetCaptionsAsync();
if (callCaptions.CaptionsKind == CaptionsKind.CommunicationCaptions)
{
    CommunicationCaptions communicationCaptions = callCaptions as CommunicationCaptions;
}

Prenumerera på lyssnare

Lägg till en lyssnare för att ta emot undertexter aktiverade/inaktiverade status

communicationCaptions.CaptionsEnabledChanged += OnIsCaptionsEnabledChanged;

private void OnIsCaptionsEnabledChanged(object sender, PropertyChangedEventArgs args)
{
    if (communicationCaptions.IsEnabled)
    {
    }
}

Lägg till en lyssnare för att få textningstypen ändrad

Den här händelsen utlöses när textningstypen ändras från CommunicationCaptions till TeamsCaptions när Microsoft 365-användare bjuds in till ACS-anrop.

captionsCallFeature.ActiveCaptionsTypeChanged += OnIsCaptionsTypeChanged;

private void OnIsCaptionsTypeChanged(object sender, PropertyChangedEventArgs args)
{
    // get captions
}

Lägg till lyssnare för mottagna textningsdata

communicationCaptions.CaptionsReceived += OnCaptionsReceived;

private void OnCaptionsReceived(object sender, CommunicationCaptionsReceivedEventArgs eventArgs)
{
    // Information about the speaker.
    // eventArgs.Speaker
    // The original text with no transcribed.
    // eventArgs.SpokenText
    // language identifier for the speaker.
    // eventArgs.SpokenLanguage
    // Timestamp denoting the time when the corresponding speech was made.
    // eventArgs.Timestamp
    // CaptionsResultKind is Partial if text contains partially spoken sentence.
    // It is set to Final once the sentence has been completely transcribed.
    // eventArgs.ResultKind
}

Lägg till en lyssnare för att få statusen aktivt talat språk ändrat

communicationCaptions.ActiveSpokenLanguageChanged += OnIsActiveSpokenLanguageChanged;

private void OnIsActiveSpokenLanguageChanged(object sender, PropertyChangedEventArgs args)
{
    // communicationCaptions.ActiveSpokenLanguage
}

Starttexter

När du har konfigurerat alla lyssnare kan du nu börja lägga till bildtexter.


private async void StartCaptions()
{
    var options = new StartCaptionsOptions
    {
        SpokenLanguage = "en-us"
    };
    try
    {
        await communicationCaptions.StartCaptionsAsync(options);
    }
    catch (Exception ex)
    {
    }
}

Stoppa undertexter

private async void StopCaptions()
{
    try
    {
        await communicationCaptions.StopCaptionsAsync();
    }
    catch (Exception ex)
    {
    }
}

Ta bort undertext mottagen lyssnare

communicationCaptions.CaptionsReceived -= OnCaptionsReceived;

Stöd för talat språk

Hämta en lista över talade språk som stöds

Hämta en lista över talade språk som stöds och som användarna kan välja mellan när de aktiverar undertexter.

// bcp 47 formatted language code
IReadOnlyList<string> sLanguages = communicationCaptions.SupportedSpokenLanguages;```

### Set spoken language 
When the user selects the spoken language, your app can set the spoken language that it expects captions to be generated from. 

``` cs 
public async void SetSpokenLanguage()
{
    try
    {
        await communicationCaptions.SetSpokenLanguageAsync("en-us");
    }
    catch (Exception ex)
    {
    }
}

Rensa

Läs mer om att rensa resurser här.

Förutsättningar

Kommentar

Observera att du måste ha en röstsamtalsapp med hjälp av Azure Communication Services som anropar SDK:er för att få åtkomst till funktionen för undertexter som beskrivs i den här guiden.

Modeller

Name beskrivning
CaptionsCallFeature API för anropsfunktion för undertexter
CommunicationCaptions API för kommunikationstexter
StartCaptionOptions Alternativ för dold bildtext som talat språk
CommunicationCaptionsListener Lyssnare för CommunicationCaptions addOnCaptionsReceivedListener
CommunicationCaptionsReceivedEvent Dataobjekt som tas emot för varje CommunicationCaptionsListener-händelse

Hämta funktionen för undertexter

Du måste hämta och casta objektet Bildtexter för att använda specifika funktioner för bildtexter.

CaptionsCallFeature captionsCallFeature = call.feature(Features.CAPTIONS);
captionsCallFeature.getCaptions().whenComplete(
    ((captions, throwable) -> {
        if (throwable == null) {
            CallCaptions callCaptions = captions;
            if (captions.getCaptionsType() == CaptionsType.COMMUNICATION_CAPTIONS) {
            // communication captions
            CommunicationCaptions communicationCaptions = (CommunicationCaptions) captions;
            }
        } else {
        // get captions failed
        // throwable is the exception/cause
        }
    }));

Prenumerera på lyssnare

Lägg till en lyssnare för att ta emot undertexter aktiverade/inaktiverade status

public void addOnIsCaptionsEnabledChangedListener() {
    communicationCaptions.addOnCaptionsEnabledChangedListener( (PropertyChangedEvent args) -> {
        if(communicationCaptions.isEnabled()) {
            // captions enabled
        }
    });
}

Lägg till en lyssnare för att få textningstypen ändrad

Den här händelsen utlöses när textningstypen ändras från CommunicationCaptions till TeamsCaptions när Microsoft 365-användare bjuds in till ACS-anrop.

public void addOnIsCaptionsTypeChangedListener() {
    captionsCallFeature.addOnActiveCaptionsTypeChangedListener( (PropertyChangedEvent args) -> {
        if(communicationCaptions.isEnabled()) {
            // captionsCallFeature.getCaptions();
        }
    });
}

Lägg till lyssnare för mottagna textningsdata

CommunicationCaptionsListener captionsListener = (CommunicationCaptionsReceivedEvent args) -> {
  // Information about the speaker.
  // CallerInfo participantInfo = args.getSpeaker();
  // The original text with no transcribed.
  // args.getSpokenText();
  // language identifier for the speaker.
  // args.getSpokenLanguage();
  // Timestamp denoting the time when the corresponding speech was made.
  // args.getTimestamp();
  // CaptionsResultType is Partial if text contains partially spoken sentence.
  // It is set to Final once the sentence has been completely transcribed.
  // args.getResultType() == CaptionsResultType.FINAL;
}; 
public void addOnCaptionsReceivedListener() {
  communicationCaptions.addOnCaptionsReceivedListener(captionsListener); 
}

Lägg till en lyssnare för att få statusen aktivt talat språk ändrat

public void addOnActiveSpokenLanguageChangedListener() {
    communicationCaptions.addOnActiveSpokenLanguageChangedListener( (PropertyChangedEvent args) -> {
       // communicationCaptions.getActiveSpokenLanguage()
    });
}

Starttexter

När du har konfigurerat alla lyssnare kan du nu börja lägga till bildtexter.

public void startCaptions() {
    StartCaptionsOptions startCaptionsOptions = new StartCaptionsOptions();
    startCaptionsOptions.setSpokenLanguage("en-us");
    communicationCaptions.startCaptions(startCaptionsOptions).whenComplete((result, error) -> {
        if (error != null) {
        }
    });
}

Stoppa undertexter

public void stopCaptions() {
    communicationCaptions.stopCaptions().whenComplete((result, error) -> {
        if (error != null) {
        }
    });
}

Ta bort undertext mottagen lyssnare

public void removeOnCaptionsReceivedListener() {
    communicationCaptions.removeOnCaptionsReceivedListener(captionsListener);
}

Stöd för talat språk

Hämta en lista över talade språk som stöds

Hämta en lista över talade språk som stöds och som användarna kan välja mellan när de aktiverar undertexter.

// bcp 47 formatted language code
communicationCaptions.getSupportedSpokenLanguages();

Ange talat språk

När användaren väljer det talade språket kan appen ange det talade språk som den förväntar sig att undertexter ska genereras från.

public void setSpokenLanguage() {
    communicationCaptions.setSpokenLanguage("en-us").whenComplete((result, error) -> {
        if (error != null) {
        }
    });
}

Rensa

Läs mer om att rensa resurser här.

Förutsättningar

Kommentar

Observera att du måste ha en röstsamtalsapp med hjälp av Azure Communication Services som anropar SDK:er för att få åtkomst till funktionen för undertexter som beskrivs i den här guiden.

Modeller

Name beskrivning
CaptionsCallFeature API för anropsfunktion för undertexter
CommunicationCaptions API för kommunikationstexter
StartCaptionOptions Alternativ för dold bildtext som talat språk
CommunicationCaptionsDelegate Ombud för kommunikationstexter
CommunicationCaptionsReceivedEventArgs Dataobjekt som tagits emot för varje mottagen kommunikationstext

Hämta funktionen för undertexter

Du måste hämta och casta objektet Bildtexter för att använda specifika funktioner för bildtexter.

if let call = self.call {
    @State var captionsCallFeature = call.feature(Features.captions)
    captionsCallFeature.getCaptions{(value, error) in
        if let error = error {
            // failed to get captions
        } else {
            if (value?.type == CaptionsType.communicationCaptions) {
                // communication captions
                @State var communicationCaptions = value as? CommunicationCaptions
            }
        }
    }
}

Prenumerera på lyssnare

Lägg till en lyssnare för att ta emot undertexter aktiverade/inaktiverade, typ, talat språk, status för textningsspråk har ändrats och mottagna data

Händelsen didChangeActiveCaptionsType utlöses när textningstypen ändras från CommunicationCaptions till TeamsCaptions när Microsoft 365-användare bjuds in till ACS-anrop.

extension CallObserver: CommunicationCaptionsDelegate {
    // listener for receive captions enabled/disabled status
    public func communicationCaptions(_ communicationCaptions: CommunicationCaptions, didChangeCaptionsEnabledState args: PropertyChangedEventArgs) {
        // communicationCaptions.isEnabled
    }
    
    // listener for active spoken language state change
    public func communicationCaptions(_ communicationCaptions: CommunicationCaptions, didChangeActiveSpokenLanguageState args: PropertyChangedEventArgs) {
        // communicationCaptions.activeSpokenLanguage
    }
    
    // listener for captions data received
    public func communicationCaptions(_ communicationCaptions: CommunicationCaptions, didReceiveCaptions:CommunicationCaptionsReceivedEventArgs) {
            // Information about the speaker.
            // didReceiveCaptions.speaker
            // The original text with no transcribed.
            // didReceiveCaptions.spokenText
            // language identifier for the speaker.
            // didReceiveCaptions.spokenLanguage
            // Timestamp denoting the time when the corresponding speech was made.
            // didReceiveCaptions.timestamp
            // CaptionsResultType is Partial if text contains partially spoken sentence.
            // It is set to Final once the sentence has been completely transcribed.
            // didReceiveCaptions.resultType
    }
}

communicationCaptions.delegate = self.callObserver

extension CallObserver: CaptionsCallFeatureDelegate {
    // captions type changed
    public func captionsCallFeature(_ captionsCallFeature: CaptionsCallFeature, didChangeActiveCaptionsType args: PropertyChangedEventArgs) {
        // captionsCallFeature.getCaptions to get captions
    }
}

captionsCallFeature.delegate = self.callObserver

Starttexter

När du har konfigurerat alla lyssnare kan du nu börja lägga till bildtexter.

func startCaptions() {
    guard let communicationCaptions = communicationCaptions else {
        return
    }
    let startCaptionsOptions = StartCaptionsOptions()
    startCaptionsOptions.spokenLanguage = "en-us"
    communicationCaptions.startCaptions(startCaptionsOptions: startCaptionsOptions, completionHandler: { (error) in
        if error != nil {
            
        }
    })
}

Stoppa undertexter

func stopCaptions() {
    communicationCaptions.stopCaptions(completionHandler: { (error) in
        if error != nil {
            
        }
    })
}

Ta bort undertext mottagen lyssnare

communicationCaptions?.delegate = nil

Stöd för talat språk

Hämta en lista över talade språk som stöds

Hämta en lista över talade språk som stöds och som användarna kan välja mellan när de aktiverar undertexter.

// bcp 47 formatted language code
let spokenLanguage : String = "en-us"
for language in communicationCaptions?.supportedSpokenLanguages ?? [] {
    // choose required language
    spokenLanguage = language
}

Ange talat språk

När användaren väljer det talade språket kan appen ange det talade språk som den förväntar sig att undertexter ska genereras från.

func setSpokenLanguage() {
    guard let communicationCaptions = self.communicationCaptions else {
        return
    }

    communicationCaptions.set(spokenLanguage: spokenLanguage, completionHandler: { (error) in
        if let error = error {
        }
    })
}

Rensa

Läs mer om att rensa resurser här.

Rensa resurser

Om du vill rensa och ta bort en Communication Services-prenumeration kan du ta bort resursen eller resursgruppen. Om du tar bort resursgruppen tas även alla andra resurser som är associerade med den bort. Läs mer om att rensa resurser.

Nästa steg

Mer information finns i följande artiklar: