Rork × LiveKit: AI 音声エージェントを本番運用する通話インフラ設計ガイド

// server/token-api/src/index.ts
import { Hono } from "hono";
import { cors } from "hono/cors";
import { AccessToken } from "livekit-server-sdk";
import { createClient } from "@supabase/supabase-js";
 
type Env = {
  LIVEKIT_API_KEY: string;
  LIVEKIT_API_SECRET: string;
  SUPABASE_URL: string;
  SUPABASE_SERVICE_KEY: string;
};
 
const app = new Hono<{ Bindings: Env }>();
app.use("*", cors({ origin: ["https://your-app.example"] }));
 
app.post("/token", async (c) => {
  const { authorization } = c.req.header();
  if (!authorization?.startsWith("Bearer ")) {
    return c.json({ error: "unauthorized" }, 401);
  }
 
  // ① Supabase でユーザー検証
  const supabase = createClient(c.env.SUPABASE_URL, c.env.SUPABASE_SERVICE_KEY);
  const {
    data: { user },
    error,
  } = await supabase.auth.getUser(authorization.replace("Bearer ", ""));
  if (error || !user) return c.json({ error: "invalid token" }, 401);
 
  // ② 今月の残通話時間をチェック
  const { data: usage } = await supabase
    .from("voice_usage")
    .select("seconds_used, seconds_limit")
    .eq("user_id", user.id)
    .eq("period", new Date().toISOString().slice(0, 7)) // YYYY-MM
    .single();
 
  const remaining = (usage?.seconds_limit ?? 600) - (usage?.seconds_used ?? 0);
  if (remaining <= 30) {
    return c.json({ error: "quota_exceeded", remaining }, 402);
  }
 
  // ③ LiveKit JWT 発行
  const roomName = `voice-${user.id}-${Date.now()}`;
  const at = new AccessToken(c.env.LIVEKIT_API_KEY, c.env.LIVEKIT_API_SECRET, {
    identity: user.id,
    ttl: Math.min(remaining, 1800), // 最大 30 分か残り時間の短い方
    metadata: JSON.stringify({ plan: user.app_metadata?.plan ?? "free" }),
  });
  at.addGrant({
    roomJoin: true,
    room: roomName,
    canPublish: true,
    canSubscribe: true,
  });
 
  return c.json({
    token: await at.toJwt(),
    url: "wss://your-project.livekit.cloud",
    room: roomName,
    secondsRemaining: remaining,
  });
});
 
export default app;

{
  "token": "eyJhbGci...",
  "url": "wss://your-project.livekit.cloud",
  "room": "voice-abc-1713775200000",
  "secondsRemaining": 480
}

npx expo install @livekit/react-native @livekit/react-native-webrtc
npx expo install expo-av expo-permissions

// app.config.ts（抜粋）
export default {
  expo: {
    // ...
    ios: {
      infoPlist: {
        NSMicrophoneUsageDescription: "AI アシスタントと会話するためにマイクを使用します。",
      },
    },
    android: {
      permissions: ["RECORD_AUDIO", "MODIFY_AUDIO_SETTINGS"],
    },
    plugins: ["@livekit/react-native-expo-plugin", "@config-plugins/react-native-webrtc"],
  },
};

// lib/livekit.ts
import { Room, RoomEvent, ConnectionState, Track, LocalAudioTrack } from "livekit-client";
 
export type VoiceConnectionState = "idle" | "connecting" | "connected" | "disconnected" | "error";
 
export class VoiceClient {
  private room: Room;
  private listeners = new Set<(s: VoiceConnectionState) => void>();
  private state: VoiceConnectionState = "idle";
 
  constructor() {
    this.room = new Room({
      adaptiveStream: true,
      dynacast: true,
      publishDefaults: {
        audioPreset: {
          maxBitrate: 32_000, // 音声のみなので 32kbps で十分
        },
      },
    });
 
    // 状態変化のフック
    this.room.on(RoomEvent.ConnectionStateChanged, (cs) => {
      if (cs === ConnectionState.Connected) this.setState("connected");
      if (cs === ConnectionState.Disconnected) this.setState("disconnected");
      if (cs === ConnectionState.Reconnecting) this.setState("connecting");
    });
 
    // ネットワーク劣化時の通知
    this.room.on(RoomEvent.ConnectionQualityChanged, (quality, participant) => {
      if (quality === "poor") {
        console.warn("connection quality degraded", participant.identity);
      }
    });
  }
 
  async connect(url: string, token: string) {
    try {
      this.setState("connecting");
      await this.room.connect(url, token);
      const track = await LocalAudioTrack.createMicrophoneTrack({
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true,
      });
      await this.room.localParticipant.publishTrack(track);
    } catch (e) {
      this.setState("error");
      throw e;
    }
  }
 
  async disconnect() {
    await this.room.disconnect();
    this.setState("idle");
  }
 
  onState(cb: (s: VoiceConnectionState) => void) {
    this.listeners.add(cb);
    return () => this.listeners.delete(cb);
  }
 
  private setState(s: VoiceConnectionState) {
    this.state = s;
    this.listeners.forEach((l) => l(s));
  }
}

// app/(tabs)/voice.tsx
import { useEffect, useRef, useState } from "react";
import { View, Text, Pressable, ActivityIndicator, StyleSheet } from "react-native";
import { registerGlobals } from "@livekit/react-native";
import { VoiceClient, VoiceConnectionState } from "../../lib/livekit";
import { requestToken } from "../../lib/api";
 
registerGlobals();
 
export default function VoiceScreen() {
  const [state, setState] = useState<VoiceConnectionState>("idle");
  const [remaining, setRemaining] = useState<number | null>(null);
  const [error, setError] = useState<string | null>(null);
  const clientRef = useRef<VoiceClient | null>(null);
 
  useEffect(() => {
    const client = new VoiceClient();
    clientRef.current = client;
    const unsub = client.onState(setState);
    return () => {
      unsub();
      client.disconnect();
    };
  }, []);
 
  const handleStart = async () => {
    try {
      setError(null);
      const token = await requestToken();
      if ("error" in token) {
        if (token.error === "quota_exceeded") {
          setError("今月の無料枠を使い切りました。プランをアップグレードしてください。");
        } else {
          setError("接続に失敗しました。しばらくしてからお試しください。");
        }
        return;
      }
      setRemaining(token.secondsRemaining);
      await clientRef.current?.connect(token.url, token.token);
    } catch (e) {
      setError((e as Error).message);
    }
  };
 
  const handleStop = async () => {
    await clientRef.current?.disconnect();
  };
 
  const isActive = state === "connected" || state === "connecting";
 
  return (
    <View style={styles.container}>
      {state === "connecting" && <ActivityIndicator size="large" />}
      {state === "connected" && (
        <Text style={styles.status}>通話中 — 残り {remaining}秒</Text>
      )}
      {error && <Text style={styles.error}>{error}</Text>}
 
      <Pressable
        onPress={isActive ? handleStop : handleStart}
        style={[styles.button, isActive && styles.buttonActive]}
      >
        <Text style={styles.buttonText}>{isActive ? "通話を終了" : "通話を開始"}</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: "center", alignItems: "center", padding: 24 },
  status: { fontSize: 18, marginBottom: 24 },
  error: { color: "#c00", marginBottom: 12, textAlign: "center" },
  button: {
    width: 200,
    height: 200,
    borderRadius: 100,
    backgroundColor: "#4a90e2",
    justifyContent: "center",
    alignItems: "center",
  },
  buttonActive: { backgroundColor: "#e2574a" },
  buttonText: { color: "white", fontSize: 20, fontWeight: "600" },
});

// metro.config.js
const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname);
config.transformer.minifierConfig = {
  keep_fnames: true,
  mangle: { keep_fnames: true },
};
module.exports = config;

// server/token-api/src/webhook.ts
app.post("/livekit-webhook", async (c) => {
  const event = await c.req.json();
  if (event.event === "room_finished") {
    const userId = event.room.name.split("-")[1];
    const duration = event.room.duration; // 秒
    const supabase = createClient(c.env.SUPABASE_URL, c.env.SUPABASE_SERVICE_KEY);
    await supabase.rpc("add_voice_seconds", { uid: userId, secs: duration });
  }
  return c.json({ ok: true });
});

-- Supabase 側のストアドプロシージャ
CREATE OR REPLACE FUNCTION add_voice_seconds(uid uuid, secs int)
RETURNS void AS $$
DECLARE
  cur_period text := to_char(now(), 'YYYY-MM');
  user_limit int;
BEGIN
  SELECT CASE
    WHEN plan = 'pro' THEN 54000
    WHEN plan = 'standard' THEN 10800
    ELSE 600
  END INTO user_limit
  FROM users WHERE id = uid;
 
  INSERT INTO voice_usage (user_id, period, seconds_used, seconds_limit)
  VALUES (uid, cur_period, secs, user_limit)
  ON CONFLICT (user_id, period)
  DO UPDATE SET seconds_used = voice_usage.seconds_used + EXCLUDED.seconds_used;
END;
$$ LANGUAGE plpgsql;

CREATE VIEW voice_cost_monitor AS
SELECT
  u.email,
  vu.seconds_used,
  ROUND(vu.seconds_used * 0.0000667::numeric, 2) AS cost_usd,
  p.monthly_revenue_usd,
  CASE WHEN vu.seconds_used * 0.0000667 > p.monthly_revenue_usd
       THEN 'LOSS' ELSE 'OK' END AS status
FROM voice_usage vu
JOIN users u ON u.id = vu.user_id
JOIN plans p ON p.id = u.plan_id
WHERE vu.period = to_char(now(), 'YYYY-MM');