SDK para Web

@sorisdk/web-audio es el SDK para navegadores que permite añadir el reconocimiento de audio de SORI a un servicio web o producto basado en el navegador.

Beta

El SDK para Web se encuentra actualmente en Beta. Dado que la implementación sigue evolucionando, algunas partes de la API y del flujo de integración pueden cambiar.

Requisitos previos

Un contexto seguro, como https:// o http://localhost
Un navegador moderno compatible con AudioContext y MediaDevices.getUserMedia
Acceso al flujo de claves efímeras proporcionado por SORI
Permiso de micrófono concedido por el usuario

Integración con npm y bundlers

Instale la versión indicada del paquete en aplicaciones que utilicen npm y un bundler:

bash

npm install @sorisdk/web-audio@0.6.10

Las aplicaciones basadas en Vite también necesitan vite-plugin-wasm:

bash

npm install --save-dev vite-plugin-wasm

import wasm from "vite-plugin-wasm";

export default {
  plugins: [wasm()]
};

AudioRecognizer se encarga de la autenticación inicial, la gestión de sesiones, la caché de paquetes y el reconocimiento mediante el micrófono. Obtenga la clave efímera desde un backend de la aplicación o un endpoint serverless:

import { AudioRecognizer } from "@sorisdk/web-audio";

const recognizer = new AudioRecognizer({
  appId: "YOUR_APP_ID",
  ephemeralKey: async () => {
    const response = await fetch("/api/ephemeral-key", {
      method: "POST"
    });

    if (!response.ok) {
      throw new Error(`Ephemeral key request failed: HTTP ${response.status}`);
    }

    const { ephemeral_key } = await response.json();
    return ephemeral_key;
  }
});

recognizer.on("campaign", (event) => {
  console.log(event.campaign);
});

recognizer.on("error", ({ error }) => {
  console.error(error);
});

await recognizer.start();

Llame a stop() o destroy() cuando deba finalizar el reconocimiento o desmontar la página.

Módulo independiente para el navegador

En aplicaciones de navegador que no utilicen npm ni un bundler, importe el módulo ESM independiente directamente desde la URL de la versión exacta. Se trata de una importación de módulo nativa y no crea una API global:

html

<script type="module">
  import { AudioRecognizer } from
    "https://cdn.iplateia.com/web/sorisdk/v0.6.10/sori-web-audio.mjs";

  const recognizer = new AudioRecognizer({
    appId: "YOUR_APP_ID",
    ephemeralKey: async () => {
      const response = await fetch("/api/ephemeral-key", {
        method: "POST"
      });

      if (!response.ok) {
        throw new Error(`Ephemeral key request failed: HTTP ${response.status}`);
      }

      const { ephemeral_key } = await response.json();
      return ephemeral_key;
    }
  });

  recognizer.on("campaign", (event) => {
    console.log(event.campaign);
  });

  recognizer.on("error", ({ error }) => {
    console.error(error);
  });

  await recognizer.start();
</script>

Mantenga la versión exacta en producción; no la sustituya por una URL mutable con latest.

Protección del endpoint de claves efímeras

El módulo independiente elimina la necesidad de compilar el frontend, pero no la de contar con un servidor de confianza. Nunca incluya un secreto de aplicación de larga duración en el código del navegador.

El operador de la aplicación debe proteger el endpoint que utiliza ephemeralKey mediante la autenticación o la verificación de sesión anónima adecuada para el producto, además de aplicar límites de frecuencia por usuario, IP o sesión, cuotas de emisión y monitorización de abusos. Si el endpoint se encuentra en otro origen, puede necesitar cabeceras CORS. CORS no es un método de autenticación y no impide que scripts, bots o clientes ajenos al navegador llamen al endpoint.

Para obtener información sobre la emisión de claves y los patrones de relay, consulte Clave efímera.

Política de seguridad de contenidos

Con una política de seguridad de contenidos (CSP) estricta, permita la compilación de WebAssembly con 'wasm-unsafe-eval'. Incluya https://cdn.iplateia.com tanto en script-src como en connect-src, y añada los orígenes de la API de SORI y del endpoint de claves efímeras a connect-src. Por ejemplo:

text

script-src 'self' 'wasm-unsafe-eval' https://cdn.iplateia.com;
connect-src 'self' https://cdn.iplateia.com https://console.soriapi.com;

Si el endpoint de claves efímeras utiliza otro origen, añádalo a connect-src. Como el ejemplo independiente utiliza un script de módulo inline, autorícelo mediante un nonce o un hash de CSP, o mueva el código a un script externo permitido. No habilite 'unsafe-inline' solo para esta integración.

SDK para Web ​

Requisitos previos ​

Integración con npm y bundlers ​

Módulo independiente para el navegador ​

Protección del endpoint de claves efímeras ​

Política de seguridad de contenidos ​