Guida introduttiva: Aggiungere didascalia chiuse all'app chiamante

  • Articolo

Importante

La funzionalità descritta in questo articolo è attualmente disponibile in anteprima pubblica. Questa versione di anteprima viene fornita senza contratto di servizio, pertanto non è consigliabile usarla per carichi di lavoro in ambienti di produzione. Alcune funzionalità potrebbero non essere supportate o potrebbero presentare funzionalità limitate. Per altre informazioni, vedere le Condizioni supplementari per l'uso delle anteprime di Microsoft Azure.

Prerequisiti

Nota

Si noti che è necessario disporre di un'app per chiamate vocali usando Servizi di comunicazione di Azure gli SDK per chiamare gli SDK per accedere alla funzionalità didascalia chiusa descritta in questa guida.

Modelli

Nome Descrizione
CaptionsCallFeature API per didascalie
CaptionsCommon Classe base per didascalia
StartCaptionOptions Opzioni di didascalia chiuse come la lingua parlata
CaptionsHandler Definizione di callback per la gestione dell'evento CaptionsReceivedEventType
CaptionsInfo Struttura dei dati ricevuta per ogni evento CaptionsReceivedEventType

Funzionalità di didascalia chiuse

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

Ottenere l'oggetto didascalia s

È necessario ottenere ed eseguire il cast dell'oggetto Captions per utilizzare funzionalità specifiche di Captions.

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

Sottoscrivere listener

Aggiungere un listener per ricevere didascalia stato attivo/inattivo

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

Aggiungere un listener per i dati didascalia ricevuti

Gestire l'oggetto dati CaptionsInfo restituito.

Nota: l'oggetto contiene una proprietà resultType che indica se i dati sono una didascalia parziale o una versione finalizzata del didascalia. ResultType Partial indica didascalia in tempo reale non modificato, mentre Final indica una versione interpretata finalizzata della frase (ad esempio include punteggiatura e maiuscola).

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(newClassName);

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

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

Aggiungere un listener per ricevere lo stato della lingua parlata modificata

const spokenLanguageChangedHandler = () => {
    if (captions.activeSpokenLanguage !== currentSpokenLanguage) {
        /* USER CODE HERE - E.G. RENDER TO DOM */
    }
}
captions.on('SpokenLanguageChanged', spokenLanguageChangedHandler)

Avviare didascalia

Dopo aver configurato tutti i listener, è ora possibile iniziare ad aggiungere didascalia.

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

Arresta didascalia

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

Annullare la sottoscrizione ai listener

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

Supporto per la lingua parlata

Ottenere un elenco delle lingue parlate supportate

Ottenere un elenco delle lingue parlate supportate che gli utenti possono selezionare quando si abilitano le didascalia chiuse. La proprietà restituisce una matrice di lingue in formato bcp 47.

const spokenLanguages = captions.supportedSpokenLanguages;

Impostare la lingua parlata

Passare un valore dalla matrice di lingue parlate supportate per assicurarsi che la lingua richiesta sia supportata. Per impostazione predefinita, se contoso non fornisce alcuna lingua o una lingua non supportata, per impostazione predefinita la lingua parlata è "en-us".

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

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

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

Prerequisiti

Per configurare un'app di esempio con chiamate vocali, vedere Avvio rapido per chiamate vocali.

Modelli

Nome Descrizione
CaptionsCallFeature Usato per avviare e gestire le didascalia chiuse.
StartCaptionsOptions Utilizzato per rappresentare le opzioni per avviare didascalia chiuse.
CaptionsListener Utilizzato per gestire gli eventi didascalia.
CaptionsInfo Utilizzato per rappresentare i dati di didascalia.

Metodi

Avviare didascalia

  1. Ottenere l'oggetto di chiamata in corso stabilito durante i passaggi dei prerequisiti.
  2. Ottenere l'oggetto Captions Feature
CaptionsCallFeature captionsCallFeature = call.api(Features.CAPTIONS);
  1. Definire captionsListener
CaptionsListener captionsListener = new CaptionsListener() {
    @Override
    public void onCaptions(CaptionsInfo captionsInfo) {
        String captionsText = captionsInfo.getText(); // get transcribed text
        String speakerName = captionsInfo.getSpeaker().getDisplayName; // get display name of current speaker
        Date timeStamp = captionsInfo.getTimestamp(); // get timestamp corresponding to caption

        // display captionsText and information as needed...
    }
};
  1. Registrare captionsListener
  2. Richiamare startCaptions con le opzioni desiderate.
public void startCallCaptions() {
    captionsCallFeature.addOnCaptionsReceivedListener(captionsListener);
    if (!captionsCallFeature.isCaptionsActive) {
        StartCaptionsOptions startCaptionsOptions = new StartCaptionsOptions();
        startCaptionsOptions.setLanguage("en-us");

        try {
            captionsCallFeature.startCaptions(startCaptionsOptions);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Arresto di didascalia

Rimuovere l'oggetto registrato in captionsListenerprecedenza.

public void stopCaptions() {
    captionsCallFeature.removeOnCaptionsReceivedListener(captionsListener);
}

Ottenere le lingue disponibili

Chiamare il getAvailableLanguages metodo nell'API CaptionsCallFeature .

String[] captionsAvailableLanguages = captionsCallFeature.getAvailableLanguages();

Aggiornare la lingua

Passare un valore in dalla matrice di lingue disponibili per assicurarsi che la lingua richiesta sia supportata.

public void switchCaptionsLanguage() {
    if (!captionsCallFeature.isCaptionsActive) {
        return;
    }
    try {
        captionsCallFeature.select(captionsAvailableLanguages[0]);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Eseguire la pulizia

Altre informazioni sulla pulizia delle risorse sono disponibili qui.

Prerequisiti

Per configurare un'app di esempio con chiamate vocali, vedere Avvio rapido per chiamate vocali.

Modelli

Nome Descrizione
CaptionsCallFeature Usato per avviare e gestire le didascalia chiuse.
StartCaptionsOptions Utilizzato per rappresentare le opzioni per avviare didascalia chiuse.
CaptionsCallFeatureDelegate Utilizzato per gestire gli eventi didascalia.
CaptionsInfo Utilizzato per rappresentare i dati di didascalia.

Metodi

Avviare didascalia

  1. Ottenere l'oggetto di chiamata in corso stabilito durante i passaggi dei prerequisiti.
  2. Ottenere l'oggetto Captions Feature
var captionsFeature = self.call!.feature(Features.captions)
  1. Definire captionsCallFeatureDelegate
@State var callObserver:CallObserver?
extension CallObserver: CaptionsCallFeatureDelegate {
    init(view:<nameOfView>) {
        owner = view
        super.init()
    }
    public func captionsCallFeature(_ captionsFeature: CaptionsCallFeature, didChangeCaptionsState args: PropertyChangedEventArgs) {
        os_log("Call captions state changed to %d", log:log, captionsFeature.isCaptionsActive)
    }
    
    public func captionsCallFeature(_ captionsFeature: CaptionsCallFeature, didReceiveCaptions: CaptionsInfo) {
        let formatter = DateFormatter()
        formatter.dateStyle = .short
        formatter.timeStyle = .short
        let displayedTime = formatter.string(from: didReceiveCaptions.timestamp)
        let captionsText = "\(displayedTime) \(didReceiveCaptions.speaker.displayName): \(didReceiveCaptions.text)"
        // next display captionsText
    }
}
self.callObserver = CallObserver(view:self)
  1. Registrare il delegato di funzionalità didascalia s.
  2. Richiamare startCaptions con le opzioni desiderate.
func startCaptions() {
    captionsFeature!.delegate = self.callObserver
    if(!captionsFeature!.isCaptionsActive) {
        let startCaptionsOptions = StartCaptionsOptions()
        startCaptionsOptions.language = "en-us"
        captionsFeature!.startCaptions(startCaptionsOptions: startCaptionsOptions, completionHandler: { (error) in
            if (error != nil) {
                print ("Call captions Failed to start caption %@", error! as Error)
            }
        })
    }
}

Arresto di didascalia

Rimuovere il delegato registrato in precedenza.

func stopCaptions() {
    captionsFeature?.delegate = nil
}

Ottenere le lingue disponibili

Accedere alla availableLanguages proprietà nell'API CaptionsCallFeature .

var captionsAvailableLanguages = captionsFeature!.availableLanguages

Aggiornare la lingua

Passare un valore in dalla matrice di lingue disponibili per assicurarsi che la lingua richiesta sia supportata.

func switchCaptionsLanguage() {
    if (!captionsFeature!.isCaptionsActive) {
        return
    }
    captionsFeature!.select(language: captionsAvailableLanguages[0], completionHandler: { (error) in
        if (error != nil) {
            print ("Call captions Failed to switch language %@", error! as Error)
        }
    })
}

Eseguire la pulizia

Altre informazioni sulla pulizia delle risorse sono disponibili qui.

Pulire le risorse

Se si vuole pulire e rimuovere una sottoscrizione a Servizi di comunicazione, è possibile eliminare la risorsa o il gruppo di risorse. L'eliminazione del gruppo di risorse comporta anche l'eliminazione di tutte le altre risorse associate. Altre informazioni sulla pulizia delle risorse.

Passaggi successivi

Per altre informazioni, vedere gli articoli seguenti: