fix(voice): transporte de áudio WebRTC via DataChannel pcm, resolução por wa_lid e avatar na UI

Author: eudanielhenrique

app/api/v1/voice/calls/[id]/accept/route.ts

@@ -29,10 +29,18 @@ export async function POST(
   const call = await resolveVoiceCall(supabase, activeOrg.orgId, id);
   if (!call) return fail("not_found", "Chamada não encontrada.", 404, { requestId });
 
+  if (call.status === "connected") {
+    return ok({ id, status: "connected" }, { requestId });
+  }
+
   try {
     await wacalls.acceptCall(call.wacallsSessionId, call.wacallsCallId, user.id);
     return ok({ id, status: "connected" }, { requestId });
   } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    if (msg.includes("409") || msg.includes("already")) {
+      return ok({ id, status: "connected" }, { requestId });
+    }
     return fail("wacalls_error", wacallsFriendlyError(err), 502, { requestId });
   }
 }

components/voice/ActiveCallPanel.tsx

@@ -5,7 +5,7 @@ import { useVoiceCall } from "@/components/voice/VoiceCallContext";
 import { useContact } from "@/hooks/contacts/useContact";
 import { rotuloDoContato } from "@/lib/contacts/rotulo-do-contato";
 import { phoneForDisplay } from "@/lib/channels/phone-variants";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { CircleNotch, Microphone, MicrophoneSlash, PhoneX } from "@/lib/ui/icons";
 import { useT } from "@/hooks/i18n/useT";
@@ -63,6 +63,13 @@ export function ActiveCallPanel() {
       className="fixed bottom-4 right-4 z-50 flex w-[min(320px,calc(100%-2rem))] items-center gap-3 rounded-xl border border-border bg-popover p-3 shadow-2xl animate-in fade-in slide-in-from-bottom-4"
     >
       <Avatar className="h-10 w-10 shrink-0">
+        {contact?.id ? (
+          <AvatarImage
+            src={`/api/v1/contacts/${contact.id}/avatar`}
+            alt=""
+            className="object-cover"
+          />
+        ) : null}
         <AvatarFallback className="bg-primary/15 text-sm font-semibold text-primary">
           {inicial}
         </AvatarFallback>

components/voice/IncomingCallBanner.tsx

@@ -5,7 +5,7 @@ import { useVoiceCall } from "@/components/voice/VoiceCallContext";
 import { useContact } from "@/hooks/contacts/useContact";
 import { rotuloDoContato } from "@/lib/contacts/rotulo-do-contato";
 import { phoneForDisplay } from "@/lib/channels/phone-variants";
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Phone, PhoneX } from "@/lib/ui/icons";
 import { useT } from "@/hooks/i18n/useT";
@@ -69,6 +69,13 @@ export function IncomingCallBanner() {
       className="fixed inset-x-0 top-4 z-50 mx-auto flex w-[min(420px,calc(100%-2rem))] items-center gap-4 rounded-xl border border-border bg-popover p-4 shadow-2xl animate-in fade-in slide-in-from-top-4"
     >
       <Avatar className="h-12 w-12 shrink-0">
+        {contact?.id ? (
+          <AvatarImage
+            src={`/api/v1/contacts/${contact.id}/avatar`}
+            alt=""
+            className="object-cover"
+          />
+        ) : null}
         <AvatarFallback className="bg-primary/15 text-base font-semibold text-primary">
           {inicial}
         </AvatarFallback>

hooks/voice/useVoiceCallSession.ts

@@ -5,6 +5,7 @@ import { apiClient } from "@/lib/api/client";
 import { showApiError } from "@/components/feedback/ApiErrorToast";
 import { useAuth } from "@/hooks/auth/AuthProvider";
 import { useRealtimeChannel } from "@/hooks/realtime/useRealtimeChannel";
+import { float32ToInt16LE, int16LEToFloat32 } from "@/lib/wacalls/pcm";
 
 export type VoiceCallStatus = "starting" | "ringing" | "connected" | "ended";
 
@@ -47,8 +48,11 @@ export function useVoiceCallSession(remoteAudioRef: RefObject<HTMLAudioElement |
   const [connectingMedia, setConnectingMedia] = useState(false);
 
   const pcRef = useRef<RTCPeerConnection | null>(null);
+  const dcRef = useRef<RTCDataChannel | null>(null);
+  const audioCtxRef = useRef<AudioContext | null>(null);
   const localStreamRef = useRef<MediaStream | null>(null);
   const callRef = useRef<VoiceCallRow | null>(null);
+  const isAcceptingRef = useRef(false);
   // Sincronizado em efeito, não durante o render: `callRef` só serve pra
   // closures de callback (accept/reject/hangUp) lerem o valor mais recente
   // sem entrar nas dependências — nunca é lido durante a renderização em si.
@@ -57,10 +61,26 @@ export function useVoiceCallSession(remoteAudioRef: RefObject<HTMLAudioElement |
   }, [call]);
 
   const teardownMedia = useCallback(() => {
-    pcRef.current?.close();
+    try {
+      dcRef.current?.close();
+    } catch {}
+    dcRef.current = null;
+
+    try {
+      pcRef.current?.close();
+    } catch {}
     pcRef.current = null;
-    localStreamRef.current?.getTracks().forEach((t) => t.stop());
+
+    try {
+      localStreamRef.current?.getTracks().forEach((t) => t.stop());
+    } catch {}
     localStreamRef.current = null;
+
+    try {
+      void audioCtxRef.current?.close();
+    } catch {}
+    audioCtxRef.current = null;
+
     if (remoteAudioRef.current) remoteAudioRef.current.srcObject = null;
     setMuted(false);
     setConnectingMedia(false);
@@ -112,29 +132,77 @@ export function useVoiceCallSession(remoteAudioRef: RefObject<HTMLAudioElement |
     enabled: !!orgId,
   });
 
-  /** Abre a RTCPeerConnection, captura o microfone e troca o SDP com o backend. */
+  /** Abre a RTCPeerConnection, conecta o DataChannel "pcm" e troca o áudio via AudioWorklets. */
   const conectarMidia = useCallback(async (callId: string) => {
     setConnectingMedia(true);
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       localStreamRef.current = stream;
 
-      const pc = new RTCPeerConnection();
+      const pc = new RTCPeerConnection({ iceServers: [] });
       pcRef.current = pc;
-      stream.getTracks().forEach((track) => pc.addTrack(track, stream));
-      pc.ontrack = (ev) => {
-        if (remoteAudioRef.current) {
-          remoteAudioRef.current.srcObject = ev.streams[0] ?? null;
-          void remoteAudioRef.current.play().catch(() => {});
+
+      // O WaCalls opera áudio via DataChannel rotulado "pcm" com PCM 16kHz mono (Int16 LE)
+      const dc = pc.createDataChannel("pcm", { ordered: true });
+      dc.binaryType = "arraybuffer";
+      dcRef.current = dc;
+
+      const AudioContextClass =
+        window.AudioContext ||
+        (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+      const ctx = new AudioContextClass({ sampleRate: 16000 });
+      audioCtxRef.current = ctx;
+
+      await ctx.audioWorklet.addModule("/worklets/capture-processor.js");
+      await ctx.audioWorklet.addModule("/worklets/playback-processor.js");
+      await ctx.resume();
+
+      // Microfone -> capture-processor -> DataChannel (PCM 16-bit LE)
+      const micSource = ctx.createMediaStreamSource(stream);
+      const captureNode = new AudioWorkletNode(ctx, "capture-processor");
+      captureNode.port.onmessage = (e: MessageEvent<Float32Array>) => {
+        if (dc.readyState === "open") {
+          dc.send(float32ToInt16LE(e.data));
         }
       };
+      micSource.connect(captureNode);
+      // Conectar ao destination mantém o AudioWorkletNode ativo no Chromium
+      captureNode.connect(ctx.destination);
+
+      // DataChannel (PCM 16-bit LE) -> playback-processor -> MediaStreamDestination -> tag <audio>
+      const playbackNode = new AudioWorkletNode(ctx, "playback-processor");
+      const streamDest = ctx.createMediaStreamDestination();
+      playbackNode.connect(streamDest);
+      dc.onmessage = (e: MessageEvent<ArrayBuffer>) => {
+        playbackNode.port.postMessage(int16LEToFloat32(e.data));
+      };
+
+      if (remoteAudioRef.current) {
+        remoteAudioRef.current.srcObject = streamDest.stream;
+        void remoteAudioRef.current.play().catch(() => {});
+      }
 
-      const offer = await pc.createOffer({ offerToReceiveAudio: true });
+      const offer = await pc.createOffer();
       await pc.setLocalDescription(offer);
 
+      // Aguarda a coleta de candidatos ICE completar para enviar a oferta com todos os candidatos
+      await new Promise<void>((resolve) => {
+        if (pc.iceGatheringState === "complete") {
+          resolve();
+        } else {
+          const checkState = () => {
+            if (pc.iceGatheringState === "complete") {
+              pc.removeEventListener("icegatheringstatechange", checkState);
+              resolve();
+            }
+          };
+          pc.addEventListener("icegatheringstatechange", checkState);
+        }
+      });
+
       const res = await apiClient.post<{ data: { sdpAnswer: string } }>(
         `/api/v1/voice/calls/${callId}/webrtc`,
-        { sdpOffer: offer.sdp },
+        { sdpOffer: pc.localDescription!.sdp },
       );
       await pc.setRemoteDescription({ type: "answer", sdp: res.data.sdpAnswer });
     } catch (err) {
@@ -143,7 +211,7 @@ export function useVoiceCallSession(remoteAudioRef: RefObject<HTMLAudioElement |
     } finally {
       setConnectingMedia(false);
     }
-  }, [teardownMedia, remoteAudioRef]);
+  }, [remoteAudioRef, teardownMedia]);
 
   // Assim que o Realtime confirma `connected`, abre o áudio — não antes: o
   // WaCalls só aceita a troca de SDP depois que o `<call>` foi realmente
@@ -168,11 +236,14 @@ export function useVoiceCallSession(remoteAudioRef: RefObject<HTMLAudioElement |
 
   const acceptCall = useCallback(async () => {
     const atual = callRef.current;
-    if (!atual) return;
+    if (!atual || isAcceptingRef.current) return;
+    isAcceptingRef.current = true;
     try {
       await apiClient.post(`/api/v1/voice/calls/${atual.id}/accept`, {});
     } catch (err) {
       showApiError(err);
+    } finally {
+      isAcceptingRef.current = false;
     }
   }, []);
 

lib/wacalls/events-bridge.ts

@@ -91,10 +91,11 @@ async function handleCallStatus(
        (organization_id, channel_session_id, contact_id, wacalls_call_id, direction,
         peer_phone, status, started_at)
      values ($1, $2,
-             (select id from contacts where organization_id = $1 and phone_number = $5 limit 1),
+             (select id from contacts where organization_id = $1 and (phone_number = $5 or wa_lid = $5) and is_merged_into is null limit 1),
              $3, $4, $5, $6, to_timestamp($7 / 1000.0))
      on conflict (organization_id, wacalls_call_id) do update
        set status = excluded.status,
+           contact_id = coalesce(voice_calls.contact_id, excluded.contact_id),
            answered_at = case
              when voice_calls.answered_at is null and excluded.status = 'connected'
                then now()

lib/wacalls/pcm.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from "vitest";
+import { float32ToInt16LE, int16LEToFloat32 } from "./pcm";
+
+describe("PCM 16-bit LE audio converters", () => {
+  it("converte Float32Array para ArrayBuffer Int16LE e de volta para Float32Array", () => {
+    const input = new Float32Array([0, 0.5, -0.5, 1, -1]);
+    const buffer = float32ToInt16LE(input);
+
+    expect(buffer.byteLength).toBe(input.length * 2);
+
+    const output = int16LEToFloat32(buffer);
+    expect(output.length).toBe(input.length);
+
+    // Precisão aproximada devido à quantização 16-bit
+    for (let i = 0; i < input.length; i++) {
+      expect(output[i]).toBeCloseTo(input[i]!, 2);
+    }
+  });
+
+  it("limita amplitudes fora da faixa [-1, 1]", () => {
+    const input = new Float32Array([1.5, -1.5, NaN]);
+    const buffer = float32ToInt16LE(input);
+    const output = int16LEToFloat32(buffer);
+
+    expect(output[0]).toBeCloseTo(1, 2);
+    expect(output[1]).toBeCloseTo(-1, 2);
+    expect(output[2]).toBe(0);
+  });
+});

lib/wacalls/pcm.ts

@@ -0,0 +1,27 @@
+/**
+ * Converte Float32Array (áudio capturado do microfone) para PCM 16-bit Little Endian ArrayBuffer.
+ */
+export function float32ToInt16LE(pcm: Float32Array): ArrayBuffer {
+  const view = new DataView(new ArrayBuffer(pcm.length * 2));
+  for (let i = 0; i < pcm.length; i += 1) {
+    let s = pcm[i] ?? 0;
+    if (Number.isNaN(s)) s = 0;
+    else if (s > 1) s = 1;
+    else if (s < -1) s = -1;
+    view.setInt16(i * 2, s < 0 ? Math.round(s * 32768) : Math.round(s * 32767), true);
+  }
+  return view.buffer;
+}
+
+/**
+ * Converte PCM 16-bit Little Endian ArrayBuffer recebido do DataChannel para Float32Array (playback).
+ */
+export function int16LEToFloat32(buf: ArrayBuffer): Float32Array {
+  const view = new DataView(buf);
+  const n = Math.floor(buf.byteLength / 2);
+  const out = new Float32Array(n);
+  for (let i = 0; i < n; i += 1) {
+    out[i] = view.getInt16(i * 2, true) / 32768;
+  }
+  return out;
+}

public/worklets/capture-processor.js

@@ -0,0 +1,11 @@
+class CaptureProcessor extends AudioWorkletProcessor {
+  process(inputs) {
+    const channel = inputs[0] && inputs[0][0];
+    if (channel && channel.length) {
+      this.port.postMessage(channel.slice(0));
+    }
+    return true;
+  }
+}
+
+registerProcessor("capture-processor", CaptureProcessor);

public/worklets/playback-processor.js

@@ -0,0 +1,40 @@
+const RING_SIZE = 16000 * 2;
+
+class PlaybackProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this.ring = new Float32Array(RING_SIZE);
+    this.read = 0;
+    this.write = 0;
+    this.available = 0;
+    this.port.onmessage = (e) => {
+      const data = e.data;
+      for (let i = 0; i < data.length; i += 1) {
+        this.ring[this.write] = data[i];
+        this.write = (this.write + 1) % RING_SIZE;
+        if (this.available < RING_SIZE) {
+          this.available += 1;
+        } else {
+          this.read = (this.read + 1) % RING_SIZE;
+        }
+      }
+    };
+  }
+
+  process(_inputs, outputs) {
+    const out = outputs[0] && outputs[0][0];
+    if (!out) return true;
+    for (let i = 0; i < out.length; i += 1) {
+      if (this.available > 0) {
+        out[i] = this.ring[this.read];
+        this.read = (this.read + 1) % RING_SIZE;
+        this.available -= 1;
+      } else {
+        out[i] = 0;
+      }
+    }
+    return true;
+  }
+}
+
+registerProcessor("playback-processor", PlaybackProcessor);