설정

이 문서는 Web SDK의 초기 설정을 설명합니다. @sorisdk/web-audio는 브라우저에서 실행되며, 주된 차이는 패키지 매니저로 설치하는지 이후 standalone script 배포를 사용하는지 정도입니다.

Web SDK는 현재 Beta 상태이므로, 패키지가 발전하면서 설정 방식이 일부 변경될 수 있습니다.

패키지 매니저 설치

npm

npm install @sorisdk/web-audio

yarn

yarn add @sorisdk/web-audio

pnpm

pnpm add @sorisdk/web-audio

bun

bun add @sorisdk/web-audio

프레임워크 앱을 위한 Wasm 로더

React, Vue, Svelte, Nuxt 같은 Vite 기반 프레임워크를 사용한다면 vite-plugin-wasm을 추가하고 프레임워크 설정에 wasm()을 등록하세요.

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

최소 브라우저 설정

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

키 발급과 relay 패턴은 Ephemeral Key에서 확인하세요.

참고 사항

• @sorisdk/web-audio는 Node.js 런타임이 아니라 브라우저 코드에서 실행되어야 합니다.
• Node.js 앱은 주로 설치, 번들링, SSR, 선택적 relay 로직에 사용됩니다.
• AudioRecognizer는 session storage와 pack caching을 내부적으로 관리합니다.
• 권장 패턴은 ephemeralKey에 문자열 또는 async handler를 전달하는 방식입니다.
• Vite 기반 프레임워크 앱에서는 SDK를 가져오기 전에 vite-plugin-wasm을 구성하세요.

Standalone Script 태그

Soon