Erste Schritte mit der Vonage Live Captions API in Node.js

Einführung

Stellen Sie sich Folgendes vor. Sie haben Vonage Video genutzt, um eine Live-Streaming-Plattform für Ihre örtliche Volkshochschule einzurichten, die es Studenten aus der Ferne ermöglicht, am Unterricht teilzunehmen. Herzlichen Glückwunsch! Als nächstes müssen Sie eine Funktion für Live-Untertitel hinzufügen. Ob für Barrierefreiheit, verbesserte Konzentration der Studentenoder aus anderen Gründen, Untertitel sind unerlässlich. In diesem Leitfaden für die ersten Schritte werden Sie durch das Hinzufügen der Live-Untertitel-API zu Ihrer Anwendung und eine Vielzahl von Sprachen unterstützen. Es gibt sogar ein Beispiel in diesem GitHub-Repository das Sie mit einem Klick einsetzen und ausprobieren können.

Wir unterstützen Live-Untertitel in den meisten unserer regionalen Medienzonen, was von unserer Sprachunterstützung getrennt ist. Alle unterstützten regionalen Medienbereiche unterstützen alle unsere Sprachen.

Berechtigungsnachweise erhalten

Bevor Sie Untertitel verwenden können, müssen die Teilnehmer eines Videoanrufs sprechen. Um an einem Videoanruf teilnehmen zu können, benötigt eine Person ein Token um teilnehmen zu können. Dieses Token wird auf einem Server unter Verwendung der ID Ihrer Anwendung und der Sitzungs-ID generiert. Die Sitzungs-ID ist sozusagen die eindeutige Kennung des Raums, in dem der Videoanruf stattfindet.

In dieser Anleitung wird davon ausgegangen, dass Sie bereits einen Server eingerichtet haben und betreiben. Falls nicht, finden Sie eine in Node.js geschriebene Beispiel-Serveranwendung, die Sie einsetzen können. Wenn Sie einen Testserver aufsetzen möchten, können Sie die Vonage's serverlose Plattform verwenden, um Folgendes bereitzustellen Vonage Video Learning Server Node.js-Projekt.

Hinzufügen von Server-Endpunkten

Um Live-Untertitel in einem Videoanruf zu starten und zu stoppen, müssen die Anfragen von einem Server kommen. Wenn Sie das Node.js SDKverwenden, kann der Code für die Endpunkte wie folgt aussehen:

/**
 * POST /captions/start
 */
router.post('/captions/start', async (req, res) => {
  const sessionId = req.body.sessionId;
  const captionsOptions = {
    languageCode: 'en-US',
    partialCaptions: 'true',
  };
  try {
    const captionsResponse = await vonage.video.enableCaptions(sessionId, req.body.token, captionsOptions);
    const captionsId = captionsResponse.captionsId;
    res.send({ id: captionsId });
  } catch (error) {
    console.error("Error starting captions: ",error);
    res.status(500).send(`Error starting captions: ${error}`);
  }
});

/**
 * POST /captions/:captionsId/stop
 */
router.post('/captions/:captionsId/stop', async (req, res) => {
  const captionsId = req.params.captionsId;
  try {
    await vonage.video.disableCaptions(captionsId);
    res.sendStatus(202)
  } catch (error) {
    console.error("Error stopping captions: ",error);
    res.status(500).send(`Error stopping captions: ${error}`);
  }
});

Hinweis: Wenn Sie sich die Video Node.js Learning Server Beispielanwendung ansehen, finden Sie diesen Code in der routes/index.js Datei.

Um die Sprache zu ändern, stellen Sie das languageCode auf eine unterstützte Sprache.

Wenn Sie eine andere Serversprache verwenden, kann die REST-API verwendet werden, um die Untertitelung zu starten und zu beenden.

Einrichten des Frontends

Nun, da der Server bereit ist, können wir die Frontend-Anwendung einrichten, um die Aufrufe zum Starten, Stoppen und Abhören der Untertitel zu tätigen.

Sie finden den folgenden Code, der im Zusammenhang mit der Beispielanwendung Basic Captions verwendet wird, in der Datei js/app.js-Datei.

Um die Untertitelung in Ihrer Sitzung zu starten, müssen Sie eine POST-Anfrage an Ihren Server stellen und dabei die sessionId und token. Hier ist der Code, der in der Demoanwendung verwendet wird, um dies zu erreichen:

async function startCaptions() {
  console.log('start captions');
  try {
    captions = await postData(SAMPLE_SERVER_BASE_URL +'/captions/start',{sessionId, token});
    captionsStartBtn.style.display = 'none';
    captionsStopBtn.style.display = 'inline';
  }
  catch(error){
    handleError(error);
  }
}

Eine weitere POST-Anfrage wird gestellt, um die Untertitel in Ihrer Sitzung zu stoppen, wobei die id Eigenschaft im captions-Objekt, das Sie von der Anfrage zum Starten der Untertitel zurückerhalten:

async function stopCaptions() {
  console.log('stop captions');
  try {
    const response = await fetch(
      ${SAMPLE_SERVER_BASE_URL}/captions/${captions.id}/stop,
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      }
    );
    if (!response.ok) {
      throw new Error('error getting data!');
    }
    captionsStopBtn.style.display = 'none';
    captionsStartBtn.style.display = 'inline';
  } catch (error) {
    captionsStartBtn.style.display = 'none';
    captionsStopBtn.style.display = 'inline';
    handleError(error);
  }
}

Die nächste Änderung, die Sie vornehmen müssen, ist das Hinzufügen von publishCaptions: true hinzuzufügen, wenn Sie einen Publisher initialisieren.

const publisherOptions = {
  insertMode: 'append',
  width: '100%',
  height: '100%',
  publishCaptions: true,
};

Jeder, der den Videoanruf veröffentlicht, kann nun auch Untertitel erstellen lassen. Das bedeutet, dass jeder, der den Anruf abonniert, diese Untertitel empfangen kann, um sie anzuzeigen. Das Subscriber-Objekt hat ein captionReceived Ereignis, auf das Sie warten können:

subscriber.on('captionReceived', function(event){
  console.log('captionReceived event: ', event);
  if (!captions) {
    // Client didn't initiate the captions. Remove controls.
    captionsStartBtn.style.display = 'none';
    captionsStopBtn.style.display = 'none';
  }
  captionsBox.style.display = 'flex';
  captionsText.textContent = event.caption;
  // remove the captions after 5 seconds
  const removalTimerDuration = 5 * 1000;
  clearTimeout(captionsRemovalTimer);
  captionsRemovalTimer = setTimeout(() => {
    captionsBox.style.display = 'none';
    captionsText.textContent = '';
  }, removalTimerDuration);
});

Schlussfolgerung

Das war's! Sie haben jetzt dazu beigetragen, dass die Schülerinnen und Schüler die Informationen besser behalten und erfolgreicher werden. Haben Sie Fragen oder Kommentare? Treten Sie unserer florierenden Entwickler-Community auf Slackoder folgen Sie uns auf X (früher Twitter), oder abonnieren Sie unseren Entwickler-Newsletter. Bleiben Sie mit uns in Verbindung, teilen Sie Ihre Fortschritte mit uns und halten Sie sich über die neuesten Nachrichten, Tipps und Veranstaltungen für Entwickler auf dem Laufenden!