Configuración

Utilice esta página para realizar la configuración inicial del SDK para Web. @sorisdk/web-audio se ejecuta en el navegador; la principal diferencia reside en si lo instala mediante un gestor de paquetes o si más adelante utiliza una distribución como script independiente.

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.

Etiqueta de script independiente

Próximamente