Configuración

Utilice esta página para realizar la configuración inicial del SDK para Web. @sorisdk/web-audio se ejecuta en el navegador. Esta página explica la configuración con un gestor de paquetes; las aplicaciones sin bundler pueden utilizar el flujo ESM independiente descrito en la página general del SDK para Web.

El SDK para Web se encuentra actualmente en Beta, por lo que algunos detalles de configuración pueden cambiar a medida que evolucione el paquete.

Configuración con un gestor de paquetes

npm

npm install @sorisdk/web-audio

yarn

yarn add @sorisdk/web-audio

pnpm

pnpm add @sorisdk/web-audio

bun

bun add @sorisdk/web-audio

Cargador Wasm para aplicaciones con frameworks

Si utiliza un framework basado en Vite, como React, Vue, Svelte o Nuxt, añada vite-plugin-wasm y registre wasm() en la configuración del framework.

npm install -D vite-plugin-wasm

React

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import wasm from "vite-plugin-wasm";

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

Vue

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import wasm from "vite-plugin-wasm";

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

Svelte

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import wasm from "vite-plugin-wasm";

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

Nuxt

import wasm from "vite-plugin-wasm";

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

Configuración mínima en el navegador

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);
});

await recognizer.start();

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

Notas

• @sorisdk/web-audio debe ejecutarse en código del navegador, no en un entorno de ejecución de Node.js.
• Normalmente, una aplicación Node.js se utiliza para la instalación, el empaquetado, el SSR y la lógica de relay opcional.
• AudioRecognizer gestiona internamente el almacenamiento de sesiones y la caché de paquetes.
• El patrón recomendado consiste en proporcionar ephemeralKey como una cadena o un handler asíncrono.
• Las aplicaciones con frameworks basados en Vite deben configurar vite-plugin-wasm antes de importar el SDK.