Voice and video calls in DMs (NIP-AC, as Amethyst, nospeak and Noscall speak it): 📞 and 🎥 in a conversation's header; a call from someone you follow or have written to rings over any page (tone, buzz, a notification when the app is out of sight) with Answer and Decline; mute, camera off, switch camera, minimize to a bar, hang up. WebRTC device to device (DTLS-SRTP), set up by signed messages in ephemeral gift wraps to the DM inboxes; TURN from coinos's live server (Cloudflare) for the connections that can't go direct. A remote signer puts the candidates inside the offer and answer instead of signing one each.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_013ZDf1cyCQLkfjftYhymZAg

1 files changed, 210 insertions, 6 deletions

diff --git a/src/features/messages.js b/src/features/messages.js
index 33ba903..57acc3b 100644
--- a/src/features/messages.js
+++ b/src/features/messages.js
@@ -52,6 +52,7 @@ import { animateZap, warmZapSound } from '../zap-animation.js';
 import { SIGNER_SILENT } from '../dm.js';
 import { cacheStorage, onCacheReady, cacheIsReady } from '../cache-store.js';
 import { dlog } from '../debug.js';
+import { createCalls, openCall, wrapCall, CALL_WRAP } from '../calls.js';
 import { LIVE_KIND, LIVE_CHAT_KIND, LIVE_RELAYS, liveAddr, liveHost, liveTitle, liveSummary, liveImage, liveViewers, liveStarts, liveStream, liveRecording, liveStatus, isLiveNow, liveRelays, newestByAddr, zapLine, setZapAddr } from '../live.js';
 import { qrSvg } from '../qr.js';
 
@@ -3255,6 +3256,14 @@ export function messagesFeature(ctx) {
       return true;
     }
     dmSub(DM_RELAYS);
+    // calls ringing in (ephemeral wraps: only what comes while we listen)
+    const callSub = (relays, authed) => {
+      const f = { kinds: [CALL_WRAP], '#p': pks, since: Math.floor(Date.now() / 1000) - 20 };
+      const on = (w) => { onCallWrap(w).catch(() => {}); };
+      const u = authed ? subscribeAuthed(relays, f, on, { onauth: relayAuth, onclose: noteSubClosed }) : subscribeOn(relays, f, on, { onclose: noteSubClosed });
+      allUnsubs.push(u); dmUnsubs.push(u);
+    };
+    callSub(DM_RELAYS, false);
     // Senders deliver to the relays our kind-10050 advertises — a list other
     // clients may have published with relays beyond our defaults. Read those
     // too, or a compliant sender's DM lands somewhere we never look (a reply
@@ -3269,6 +3278,7 @@ export function messagesFeature(ctx) {
           // in Adam's list, while a cap of three read the first three)
           .slice(0, 8);
         ownInbox = extras;
+        if (extras.length && dmStarted) callSub(extras, true);
         // inbox relays are often NIP-42 gated: authenticate as the identity
         if (extras.length && dmStarted) {
           const u = subscribeAuthed(extras, { kinds: [1059], '#p': pks, limit: 400 }, (wrap) => {
@@ -9024,6 +9034,194 @@ export function messagesFeature(ctx) {
         h('div', { class: 'small faint' }, t('goLiveHint'))));
   }
 
+  // ---- calls (NIP-AC: src/calls.js) ------------------------------------------
+  // A 📞 or 🎥 in a conversation's header calls that person; a call from
+  // someone you follow (or talk to) rings over whatever page is up. The setup
+  // goes as ephemeral gift wraps to their DM inboxes and ours; TURN comes from
+  // coinos's live server (Cloudflare's), for the connections that can't go direct.
+  const liveBase = () => {
+    const local = typeof location !== 'undefined' && /^(localhost|127\.0\.0\.1)$/.test(location.hostname);
+    return local ? location.origin : APP_BASE;
+  };
+  let calls = null;
+  const callInbox = new Map(); // peer -> their inbox relays, for this session
+  async function inboxFor(pk) {
+    if (callInbox.has(pk)) return callInbox.get(pk);
+    const p = (isMe(pk) ? Promise.resolve(ownInbox) : fetchInboxRelays(pk).catch(() => []))
+      .then((l) => [...new Set([...DM_RELAYS, ...(l || []).filter((r) => /^wss:\/\//i.test(r)).slice(0, 4)])]);
+    callInbox.set(pk, p);
+    return p;
+  }
+  async function signAsMe(tmpl) {
+    const id = await requireIdentity();
+    return id.signer instanceof Uint8Array ? finalizeEvent(tmpl, id.signer) : id.signer.signEvent(tmpl);
+  }
+  let iceCache = null; // { servers, until }
+  async function callIce() {
+    if (iceCache && Date.now() < iceCache.until) return iceCache.servers;
+    const STUN = [{ urls: ['stun:stun.cloudflare.com:3478', 'stun:stun.l.google.com:19302'] }];
+    try {
+      const auth = await signAsMe({ kind: 27235, created_at: Math.floor(Date.now() / 1000), content: '', tags: [['u', APP_BASE + '/live/turn'], ['method', 'GET']] });
+      const r = await fetch(liveBase() + '/live/turn', { headers: { authorization: 'Nostr ' + btoa(JSON.stringify(auth)) }, signal: AbortSignal.timeout(8000) });
+      const j = await r.json();
+      if (!Array.isArray(j.iceServers) || !j.iceServers.length) return STUN;
+      iceCache = { servers: j.iceServers, until: Date.now() + Math.max(60, (j.ttl || 600) - 600) * 1000 };
+      return j.iceServers;
+    } catch { return STUN; }
+  }
+  function callMedia(type, facing = 'user') {
+    const video = { facingMode: facing, width: { ideal: 1280 }, height: { ideal: 720 } };
+    const audio = { echoCancellation: true, noiseSuppression: true, autoGainControl: true };
+    if (type === 'video-only') return navigator.mediaDevices.getUserMedia({ video });
+    return navigator.mediaDevices.getUserMedia(type === 'video' ? { audio, video } : { audio });
+  }
+  // who may ring: someone you follow, or someone you've written to
+  const mayRing = (pk) => !hiddenPk(pk) && (followsNow().set.has(pk)
+    || [...(threads.get(pk) || new Map()).values()].some((m) => m.mine));
+  function callsNow() {
+    if (calls) return calls;
+    calls = createCalls({
+      me: () => dmSubKeys()[0],
+      sign: signAsMe,
+      send: async (pk, signed) => {
+        const ok = await publishOn(await inboxFor(pk), wrapCall(signed, pk), { onauth: relayAuth });
+        if (!ok) throw new Error('not delivered');
+      },
+      iceServers: callIce,
+      media: callMedia,
+      mayRing: async (pk) => mayRing(pk),
+      changed: () => { callRing(); render(); },
+      // a key of our own signs each candidate at once; a remote signer gets
+      // them all inside the offer or answer instead
+      trickle: () => { try { if (localStorage.getItem('coinos-call-trickle') === '0') return false; } catch {} const id = hook('nostrLoginIdentity'); return !id || id.signer instanceof Uint8Array; },
+    });
+    return calls;
+  }
+  // a wrap addressed to us: opened by whichever of our keys it's for
+  async function onCallWrap(wrap) {
+    for (const d of dmDecryptors()) {
+      const dec = d instanceof Uint8Array ? async (pk, ct) => nip44.decrypt(ct, nip44.getConversationKey(d, pk)) : (pk, ct) => d.decryptFrom(pk, ct);
+      const inner = await openCall(wrap, dec).catch(() => null);
+      if (inner) { profileOf(inner.pubkey); await callsNow().handle(inner); return; }
+    }
+  }
+  function startCall(peer, type) {
+    if (typeof RTCPeerConnection === 'undefined' || !navigator.mediaDevices?.getUserMedia) { toast(t('callUnsupported')); return; }
+    const cur = callsNow().call;
+    if (cur && cur.state !== 'ended') { ui.callMin = false; render(); return; }
+    ui.callMin = false;
+    callsNow().start(peer, type).catch(() => {});
+  }
+
+  // The ring: a tone (two short bursts every few seconds) and the phone's
+  // buzz for a call coming in, a softer one while ours rings them; and, with
+  // the app out of sight, a notification.
+  let ringCtx = null, ringTimer = null, ringFor = null;
+  function tone(ctx, freqs, at, len, vol) {
+    for (const f of freqs) {
+      const o = ctx.createOscillator(), g = ctx.createGain();
+      o.frequency.value = f; o.connect(g); g.connect(ctx.destination);
+      g.gain.setValueAtTime(0, at); g.gain.linearRampToValueAtTime(vol, at + 0.02); g.gain.setValueAtTime(vol, at + len - 0.05); g.gain.linearRampToValueAtTime(0, at + len);
+      o.start(at); o.stop(at + len + 0.05);
+    }
+  }
+  function callRing() {
+    const c = calls && calls.call;
+    const want = c && (c.state === 'incoming' || c.state === 'offering') ? c.id + ':' + c.state : null;
+    if (want === ringFor) return;
+    ringFor = want;
+    clearInterval(ringTimer); ringTimer = null;
+    try { navigator.vibrate && navigator.vibrate(0); } catch {}
+    if (!want) return;
+    const incoming = c.state === 'incoming';
+    const beat = () => {
+      try {
+        ringCtx = ringCtx || new (window.AudioContext || window.webkitAudioContext)();
+        if (ringCtx.state === 'suspended') ringCtx.resume().catch(() => {});
+        const t0 = ringCtx.currentTime + 0.05;
+        if (incoming) { tone(ringCtx, [440, 480], t0, 0.4, 0.12); tone(ringCtx, [440, 480], t0 + 0.6, 0.4, 0.12); }
+        else tone(ringCtx, [440, 480], t0, 1.2, 0.05); // the ringback, heard by the caller
+      } catch {}
+      if (incoming) { try { navigator.vibrate && navigator.vibrate([400, 200, 400]); } catch {} }
+    };
+    beat();
+    ringTimer = setInterval(beat, incoming ? 3000 : 4000);
+    if (incoming && typeof document !== 'undefined' && document.hidden) {
+      try {
+        if (Notification.permission === 'granted') navigator.serviceWorker?.ready.then((r) => r.showNotification(t('callIncomingFrom', { name: displayName(c.peer) }), {
+          body: t(c.type === 'video' ? 'callIncomingVideo' : 'callIncomingVoice'), tag: 'call', renotify: true, requireInteraction: true,
+        })).catch(() => {});
+      } catch {}
+    }
+  }
+
+  // the call's sound and pictures into their elements, after each paint
+  function mountCallMedia() {
+    const c = calls && calls.call;
+    const put = (sel, stream) => {
+      const el = document.querySelector(sel);
+      if (el && stream && el.srcObject !== stream) { el.srcObject = stream; el.play().catch(() => {}); }
+    };
+    if (!c) return;
+    put('audio.call-audio', c.remote);
+    put('video.call-remote', c.remote);
+    put('video.call-local', c.local);
+  }
+  const callReason = (r) => t({ 'no-answer': 'callNoAnswer', 'peer-declined': 'callDeclined', busy: 'callBusy', failed: 'callFailed', error: 'callFailed',
+    'no-permission': 'callNoPermission', missed: 'callMissed', 'answered-elsewhere': 'callAnsweredElsewhere', 'declined-elsewhere': 'callDeclinedElsewhere' }[r] || 'callEnded');
+  const CALL_ICONS = {
+    phone: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z"/></svg>',
+    video: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 8-6 4 6 4V8z"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>',
+    mic: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10a7 7 0 0 0 14 0M12 17v5"/></svg>',
+    micOff: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 2 20 20M9 9v1a3 3 0 0 0 5.1 2.1M15 9.3V5a3 3 0 0 0-5.9-.6M17 16.9A7 7 0 0 1 5 10M19 10a7 7 0 0 1-.3 2M12 17v5"/></svg>',
+    camOff: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 2 20 20M16 16v1a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2m4 0h4a2 2 0 0 1 2 2v3.3l1 1 5-3.3v8"/></svg>',
+    flip: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7h-3l-2-3H9L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/><path d="m14 11 2 2-2 2M10 15l-2-2 2-2M8 13h8"/></svg>',
+    hang: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12 9c-1.6 0-3.2.3-4.6.7v3.1c0 .4-.2.7-.6.9-1 .5-1.9 1.1-2.7 1.8-.2.2-.4.3-.7.3s-.5-.1-.7-.3L.3 13.1c-.2-.2-.3-.4-.3-.7s.1-.5.3-.7C3.3 8.9 7.4 7 12 7s8.7 1.9 11.7 4.7c.2.2.3.4.3.7s-.1.5-.3.7l-2.4 2.4c-.2.2-.4.3-.7.3s-.5-.1-.7-.3c-.8-.7-1.7-1.3-2.7-1.8-.3-.2-.6-.5-.6-.9V9.7C15.2 9.3 13.6 9 12 9z"/></svg>',
+    min: '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 14 6 0 0 6M20 10l-6 0 0-6M14 10l7-7M3 21l7-7"/></svg>',
+  };
+  const callIcon = (k) => h('span', { style: 'display:flex', html: CALL_ICONS[k] });
+  // The call, over any page: who, how it's going, and its buttons; minimized,
+  // a bar across the top to come back by.
+  function callOverlay() {
+    const c = calls && calls.call;
+    if (!c) return null;
+    queueMicrotask(mountCallMedia);
+    if (c.state === 'connected') setTimeout(scheduleRepaint, 1000); // the clock
+    const video = c.type === 'video';
+    const remoteVideo = video && c.remote && c.remote.getVideoTracks().length > 0;
+    const sound = h('audio', { class: 'call-audio', 'data-key': 'call-audio:' + c.id, autoplay: '' });
+    const status = c.state === 'incoming' ? t(video ? 'callIncomingVideo' : 'callIncomingVoice')
+      : c.state === 'starting' || c.state === 'offering' ? t('callCalling')
+      : c.state === 'connecting' ? t('callConnecting')
+      : c.state === 'connected' ? clockOf((Date.now() - c.connectedAt) / 1000)
+      : callReason(c.reason);
+    if (ui.callMin && c.state !== 'incoming' && c.state !== 'ended') {
+      return h('div', { class: 'call-overlay call-min', 'data-key': 'call-overlay' }, sound,
+        h('button', { class: 'call-min-bar', onClick: () => { ui.callMin = false; render(); } },
+          h('span', { class: 'go-live-dot' }), h('span', { class: 'call-min-name' }, displayName(c.peer)), h('span', { class: 'call-min-status' }, status)));
+    }
+    const btn = (cls, icon, label, onClick, on = false) => h('button', { class: 'call-btn ' + cls + (on ? ' on' : ''), title: label, 'aria-label': label, onClick }, callIcon(icon));
+    return h('div', { class: 'call-overlay' + (remoteVideo && c.state === 'connected' ? ' has-video' : ''), 'data-key': 'call-overlay' },
+      sound,
+      video ? h('video', { class: 'call-remote', 'data-key': 'call-remote:' + c.id, autoplay: '', playsinline: '', muted: '' }) : null,
+      h('div', { class: 'call-who' },
+        avatar(c.peer, 'chat-avatar profile-avatar call-avatar', false),
+        h('div', { class: 'call-name' }, displayName(c.peer)),
+        h('div', { class: 'call-status' }, status)),
+      video && c.local ? h('video', { class: 'call-local' + (c.facing === 'user' ? ' mirror' : ''), 'data-key': 'call-local:' + c.id, autoplay: '', playsinline: '', muted: '' }) : null,
+      c.state === 'incoming'
+        ? h('div', { class: 'call-bar' },
+            btn('call-decline', 'hang', t('callDecline'), () => callsNow().reject()),
+            btn('call-accept', video ? 'video' : 'phone', t('callAccept'), () => callsNow().accept()))
+        : c.state === 'ended' ? null
+        : h('div', { class: 'call-bar' },
+            btn('', c.muted ? 'micOff' : 'mic', t(c.muted ? 'callUnmute' : 'callMute'), () => callsNow().setMuted(!c.muted), c.muted),
+            video ? btn('', c.camOff ? 'camOff' : 'video', t(c.camOff ? 'callCamOn' : 'callCamOff'), () => callsNow().setCamOff(!c.camOff), c.camOff) : null,
+            video ? btn('', 'flip', t('callFlip'), () => callsNow().flip()) : null,
+            btn('', 'min', t('callMinimize'), () => { ui.callMin = true; render(); }),
+            btn('call-hang', 'hang', t('callHangUp'), () => callsNow().hangup())));
+  }
+
   // A quote inside a quote: one line of who and what, never a third level
   // of cards (a bare "view note" link said nothing about where it leads).
   function quoteMini(ref) {
@@ -16180,12 +16378,16 @@ export function messagesFeature(ctx) {
         h('div', { class: 'col clickable', style: 'gap:2px;min-width:0', onClick: () => openProfile(peer) },
           h('div', { class: 'chat-title' }, displayName(peer)),
           h('div', { class: 'muted small' }, t('msgDmEncrypted'))),
-        // Only where there is a choice: this person can be reached two ways.
-        // The pill says which way the next message goes; tapping it pins one.
-        choice ? h('button', {
-          class: 'btn-sm route-pill', style: 'margin-left:auto;flex-shrink:0', title: t('msgRouteTitle'), 'aria-haspopup': 'true',
-          onClick: () => { ui.msgRoutePick = !ui.msgRoutePick; render(); },
-        }, t(choice.now === 'wn' ? 'msgRouteWn' : 'msgRouteDm'), ' ▾') : null),
+        h('div', { class: 'row gap6', style: 'margin-left:auto;flex-shrink:0;align-items:center' },
+          // a call: voice or video, to this one person
+          isMe(peer) ? null : h('button', { class: 'iconbtn call-start', 'data-call': 'voice', title: t('callVoice'), 'aria-label': t('callVoice'), onClick: () => startCall(peer, 'voice') }, callIcon('phone')),
+          isMe(peer) ? null : h('button', { class: 'iconbtn call-start', 'data-call': 'video', title: t('callVideo'), 'aria-label': t('callVideo'), onClick: () => startCall(peer, 'video') }, callIcon('video')),
+          // Only where there is a choice: this person can be reached two ways.
+          // The pill says which way the next message goes; tapping it pins one.
+          choice ? h('button', {
+            class: 'btn-sm route-pill', style: 'flex-shrink:0', title: t('msgRouteTitle'), 'aria-haspopup': 'true',
+            onClick: () => { ui.msgRoutePick = !ui.msgRoutePick; render(); },
+          }, t(choice.now === 'wn' ? 'msgRouteWn' : 'msgRouteDm'), ' ▾') : null)),
       h('div', {
         class: 'chat-log',
         onScroll: (e) => {
@@ -16876,6 +17078,7 @@ export function messagesFeature(ctx) {
       return def && adhocFeeds.has(def.id) ? feedPath(def) : null;
     },
     avatarNode(pk, cls) { return avatar(pk, cls || 'chat-avatar mini', false); },
+    callOverlay() { return callOverlay(); },
     init() {
       const session = ++feedWarmSession;
       // this wallet's own feed (the feature outlives a sign-out): a feed
@@ -16965,6 +17168,7 @@ export function messagesFeature(ctx) {
       clearTimeout(drainTimer);
       pendingWraps.clear();
       dmStarted = false;
+      if (calls) { try { calls.stop(); } catch {} calls = null; callInbox.clear(); iceCache = null; callRing(); }
       listsSynced = false;
       if (zapLiveUnsub) { try { zapLiveUnsub(); } catch {} zapLiveUnsub = null; }
       clearTimeout(zapTimer); zapTimer = null; zapQueue = new Set(); zapRecent = [];