WebRTC 통합

// app/api/webrtc-call/token/route.ts (Next.js)
const API_BASE = process.env.CLAWOPS_API_BASE!;          // https://api.claw-ops.com
const ACCOUNT_ID = process.env.CLAWOPS_ACCOUNT_ID!;
const CREDENTIAL_ID = process.env.CLAWOPS_WEBRTC_CREDENTIAL_ID!;
const API_KEY = process.env.CLAWOPS_API_KEY!;

export async function POST() {
  const headers = { Authorization: `Bearer ${API_KEY}` };

  // 1. SIP 단기 토큰 발급 (TTL 7분)
  const tokenRes = await fetch(
    `${API_BASE}/v1/accounts/${ACCOUNT_ID}/sip-credentials/${CREDENTIAL_ID}/tokens`,
    {
      method: 'POST',
      headers: { ...headers, 'content-type': 'application/json' },
      body: JSON.stringify({ ttl_seconds: 420 }),
    },
  );
  const { token } = await tokenRes.json();

  // 2. ICE/TURN 서버 정보
  const iceRes = await fetch(`${API_BASE}/v1/accounts/${ACCOUNT_ID}/ice-servers`, { headers });
  const { ice_servers } = await iceRes.json();

  // 3. 브라우저로 그대로 전달
  return Response.json({ token, iceServers: ice_servers });
}

npm install jssip

import { UA, WebSocketInterface } from 'jssip';

// JWT payload 디코드 — 서명 검증은 ClawOps 게이트웨이가 함
function decodeJwtPayload(jwt: string) {
  const base64 = jwt.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
  return JSON.parse(atob(base64));
}

export async function call(destination: string) {
  // 1. 서버에서 토큰 + ICE 받기
  const res = await fetch('/api/webrtc-call/token', { method: 'POST' });
  const { token, iceServers } = await res.json();

  // 2. JWT payload 에서 SIP 자격 추출
  const claims = decodeJwtPayload(token);
  const wsUri        = claims.ws_url;             // wss://sip.claw-ops.com:5063
  const realm        = claims.realm;              // <random>.sip.claw-ops.com
  const sipUsername  = claims.sip_username;       // ephem_xxxxx (1회용)
  const sipPassword  = claims.sip_password;
  const callerId     = claims.allowed_caller_ids[0];  // 발신자로 표시될 070 번호

  // 3. JsSIP UA 만들기
  const socket = new WebSocketInterface(wsUri);
  const ua = new UA({
    sockets: [socket],
    uri: `sip:${sipUsername}@${realm}`,
    password: sipPassword,
    register: false,
  });
  ua.start();

  // 4. 발신
  const session = ua.call(`sip:${destination}@${realm}`, {
    mediaConstraints: { audio: true, video: false },
    pcConfig: { iceServers },
    // From URI 발신번호 (자세한 이유는 아래 박스)
    fromUserName: callerId,
  });

  // 5. 통화 연결 후 상대 음성 재생
  session.on('confirmed', () => {
    const audioEl = document.querySelector<HTMLAudioElement>('#remote-audio')!;
    const tracks = session.connection.getReceivers().map(r => r.track).filter(Boolean);
    audioEl.srcObject = new MediaStream(tracks);
  });

  return {
    hangup: () => { session.terminate(); ua.stop(); },
  };
}

<audio id="remote-audio" autoplay />
<button onclick="call('07012345678')">전화하기</button>

- // ❌ 클라이언트가 보낸 destination 을 그대로 사용
- const { destination } = await req.json();

+ // ✅ 서버가 세션 컨텍스트로부터 결정
+ const destination = await resolveDestinationForUser(req);  // 예: 사용자 ID → 담당자 번호

// lib/turnstile-context.tsx — 페이지 로드 시 토큰 사전 발급
'use client';
import { createContext, useContext, useEffect, useRef, useState } from 'react';

const SITEKEY = process.env.NEXT_PUBLIC_TURNSTILE_SITEKEY!;
const Ctx = createContext<{ token: string | null; consume: () => void }>({
  token: null, consume: () => {},
});
export const useTurnstile = () => useContext(Ctx);

export function TurnstileProvider({ children }: { children: React.ReactNode }) {
  const [token, setToken] = useState<string | null>(null);
  const widgetIdRef = useRef<string | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!document.getElementById('cf-turnstile-script')) {
      const s = document.createElement('script');
      s.id = 'cf-turnstile-script';
      s.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
      s.async = true;
      document.head.appendChild(s);
    }
    const t = setInterval(() => {
      if (!window.turnstile || !containerRef.current || widgetIdRef.current) return;
      widgetIdRef.current = window.turnstile.render(containerRef.current, {
        sitekey: SITEKEY,
        callback: setToken,
      });
      clearInterval(t);
    }, 200);
    return () => clearInterval(t);
  }, []);

  const consume = () => {
    setToken(null);
    if (widgetIdRef.current) window.turnstile?.reset(widgetIdRef.current);
  };

  return (
    <Ctx.Provider value={{ token, consume }}>
      {children}
      <div ref={containerRef} style={{ position: 'fixed', left: -9999, top: -9999 }} />
    </Ctx.Provider>
  );
}

const { turnstileToken } = await req.json();
const ok = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({ secret: process.env.TURNSTILE_SECRET!, response: turnstileToken }),
}).then(r => r.json()).then(r => r.success);
if (!ok) return NextResponse.json({ error: 'turnstile_failed' }, { status: 403 });