Camera sharing, and the proxy's relay for the desktop app

- A camera is a second source in the share dialog; streams carry their kind,
  so icons and wording follow. Browsers without screen capture (phones) start
  on the camera.
- Settings, Voice: the address of a mumh5 web version as relay; its STUN and
  relay are then offered with every stream and take over when no direct
  connection comes up.
- The proxy hands out relay credentials at GET /api/relay, readable from any
  origin.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/ui/ChannelNode.svelte

@@ -169,14 +169,15 @@
             <span class="label" class:talking={voice.talking[u.session] || (isSelf && voice.transmitting)}>{store.displayName(u)}</span>
             {#if u.userId != null}<span class="reg" title="Registered">R</span>{/if}
             {#if session.sharing[u.session]}
+              {@const kind = session.sharing[u.session]}
               {#if isSelf}
-                <span class="state sharing" title="You are sharing your screen"><Icon name="screen" size={14} /></span>
+                <span class="state sharing" title="You are sharing your {kind}"><Icon name={kind} size={14} /></span>
               {:else}
                 <!-- A button cannot sit inside the row's button -->
-                <span class="state sharing" role="button" tabindex="0" title="Sharing their screen. Click to watch" aria-label="Watch the screen of {store.displayName(u)}"
+                <span class="state sharing" role="button" tabindex="0" title="Sharing their {kind}. Click to watch" aria-label="Watch the {kind} of {store.displayName(u)}"
                   onclick={e => { e.stopPropagation(); clearTimeout(timer); share.watch(sessions.active, u.session); }}
                   ondblclick={e => e.stopPropagation()}
-                  onkeydown={e => { if (e.key === 'Enter') { e.stopPropagation(); share.watch(sessions.active, u.session); } }}><Icon name="screen" size={14} /></span>
+                  onkeydown={e => { if (e.key === 'Enter') { e.stopPropagation(); share.watch(sessions.active, u.session); } }}><Icon name={kind} size={14} /></span>
               {/if}
             {/if}
             {#if u.comment || u.commentHash}<span class="state" title="Has a description"><Icon name="message" size={12} /></span>{/if}

src/ui/RightPanel.svelte

@@ -128,8 +128,8 @@
 
       {#if session.sharing[user.session]}
         <div class="sharing">
-          <Icon name="screen" size={16} />
-          <span>{isSelf ? 'You are sharing your screen' : 'Sharing their screen'}</span>
+          <Icon name={session.sharing[user.session]} size={16} />
+          <span>{isSelf ? `You are sharing your ${session.sharing[user.session]}` : `Sharing their ${session.sharing[user.session]}`}</span>
           {#if isSelf}<button class="btn" onclick={() => share.stop()}>Stop sharing</button>
           {:else if share.watching?.session === user.session}<button class="btn" onclick={() => share.unwatch()}>Stop watching</button>
           {:else}<button class="btn primary" onclick={() => share.watch(sessions.active, user.session)}>Watch</button>{/if}

src/ui/SettingsDialog.svelte

@@ -84,6 +84,10 @@
     {#if stunChoice === 'custom'}
       <input class="stun-custom" bind:value={s.stunServer} onchange={() => store.saveSettings()} placeholder="stun.example.com:3478" autocomplete="off" aria-label="STUN server address" />
     {/if}
+    <label for="s-relay">Relay <span class="opt">(optional)</span></label>
+    <input id="s-relay" bind:value={s.relayServer} onchange={() => { s.relayServer = s.relayServer.trim(); store.saveSettings(); }}
+      placeholder={isWeb ? 'this site (automatic)' : 'https://voice.example.com'} autocomplete="off" />
+    <p class="help">The address of a mumh5 web version. When a direct connection is not possible (mobile data, strict company networks), the stream goes through that server instead, by itself. {isWeb ? 'Empty uses the site you are on.' : 'Its operator sees your IP address and carries the stream, but cannot watch it.'}</p>
     <p class="help">Screen sharing connects you directly to the people watching. Across the internet both sides need a STUN server to find a route; it learns your IP address but never sees the stream. {isWeb ? 'By default the site you are on provides it.' : 'With none, no outside server is contacted and streams only work on the same network.'} Networks that block direct connections, like many mobile ones, need more than STUN.</p>
   {:else if tab === 'sounds'}
     <SoundSettings />
@@ -146,6 +150,7 @@
   .tabs button.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
   h3 { margin: 22px 0 0; font-size: 14px; }
   .stun-custom { margin-top: 6px; }
+  .opt { text-transform: none; font-weight: 400; letter-spacing: 0; color: var(--text-faint); }
   .help { margin: 10px 0 0; font-size: 13px; color: var(--text-dim); }
   .row { display: flex; align-items: flex-end; gap: 8px; }
   .row > div { flex: 1; }

src/ui/ShareDialog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onDestroy } from 'svelte';
   import Modal from './Modal.svelte';
-  import { share, QUALITY } from '../lib/share.svelte.ts';
+  import { share, QUALITY, type ShareKind } from '../lib/share.svelte.ts';
   import { desktop, type ScreenSource } from '../lib/native.ts';
   import { store } from '../lib/settings.svelte.ts';
 
@@ -12,6 +12,12 @@
   const target = share.dialog!;
 
   let info = $state<{ portal: boolean; audio: 'pipewire' | 'loopback' | 'browser' | 'none'; micLabel: string }>({ portal: true, audio: desktop ? 'none' : 'browser', micLabel: '' });
+  // What to show: the screen (or a window), or a camera
+  // Phones have no screen capture in the browser; there the camera is the only choice
+  const canScreen = !!navigator.mediaDevices?.getDisplayMedia;
+  let kind = $state<ShareKind>(canScreen ? 'screen' : 'camera');
+  let cameras = $state<MediaDeviceInfo[]>([]);
+  let camera = $state('');
   let sources = $state<ScreenSource[]>([]);
   let selected = $state('');
   let preview = $state.raw<MediaStream | null>(null);
@@ -67,6 +73,32 @@
     }
   }
 
+  async function showCamera(deviceId = camera) {
+    error = '';
+    dropPreview();
+    try {
+      preview = await navigator.mediaDevices.getUserMedia({
+        video: { deviceId: deviceId ? { exact: deviceId } : undefined, width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: fps() }
+      });
+      // Names are only given out once a camera was allowed
+      cameras = (await navigator.mediaDevices.enumerateDevices()).filter(d => d.kind === 'videoinput');
+      camera = preview.getVideoTracks()[0]?.getSettings().deviceId ?? deviceId;
+    } catch (e) {
+      error = (e as Error).name === 'NotFoundError' ? 'No camera was found.' : `Could not open the camera: ${(e as Error).message}`;
+    }
+  }
+
+  if (!canScreen) showCamera();
+
+  function setKind(next: ShareKind) {
+    if (kind === next) return;
+    kind = next;
+    selected = '';
+    dropPreview();
+    error = '';
+    if (next === 'camera') showCamera();
+  }
+
   // The system's or the browser's picker
   async function chooseElsewhere() {
     error = '';
@@ -106,7 +138,9 @@
     error = '';
     let usesVirtualMic = false;
     try {
-      if (audio && info.audio === 'pipewire') {
+      // A camera comes without extra sound: your voice already goes through the voice chat
+      if (kind === 'camera') { /* nothing to add */ }
+      else if (audio && info.audio === 'pipewire') {
         usesVirtualMic = true;
         await desktop!.shareAudioStart(audio === 'all' ? { kind: 'all' } : { kind: 'app', name: audio.slice(4) });
         preview.addTrack(await virtualMic());
@@ -125,7 +159,7 @@
       return;
     }
     handedOver = true;
-    share.go(target, preview, usesVirtualMic);
+    share.go(target, preview, usesVirtualMic, kind);
     onclose();
   }
 
@@ -135,11 +169,24 @@
 <Modal title="Share your screen" {onclose} width={760}>
   <p class="help">mumh5 users in your channel can watch. Nothing is sent until you press Start sharing.</p>
 
-  {#if !desktop && info.audio === 'browser'}
+  <div class="kinds" role="tablist" aria-label="What to share">
+    <button role="tab" aria-selected={kind === 'screen'} class:active={kind === 'screen'} disabled={!canScreen}
+      title={canScreen ? undefined : 'This browser cannot capture the screen'} onclick={() => setKind('screen')}>Screen or window</button>
+    <button role="tab" aria-selected={kind === 'camera'} class:active={kind === 'camera'} onclick={() => setKind('camera')}>Camera</button>
+  </div>
+
+  {#if kind === 'camera'}
+    <label for="sh-cam">Camera</label>
+    <select id="sh-cam" value={camera} onchange={e => showCamera(e.currentTarget.value)} disabled={!cameras.length}>
+      {#each cameras as c, i (c.deviceId)}<option value={c.deviceId}>{c.label || `Camera ${i + 1}`}</option>{:else}<option value="">{error ? 'None' : 'Asking for the camera...'}</option>{/each}
+    </select>
+  {:else if !desktop && info.audio === 'browser'}
     <label class="check"><input type="checkbox" bind:checked={browserAudio} disabled={!!preview} /> Include sound (the browser offers what it can share, usually a tab's sound)</label>
   {/if}
 
-  {#if desktop && !info.portal}
+  {#if kind === 'camera'}
+    <!-- chosen above -->
+  {:else if desktop && !info.portal}
     <div class="row head"><label for="sh-src">Screen or window</label><button class="link" onclick={loadSources}>Refresh</button></div>
     <ul class="sources" id="sh-src">
       {#each sources as s (s.id)}
@@ -165,7 +212,7 @@
   </div>
 
   <div class="row two">
-    {#if desktop}
+    {#if desktop && kind === 'screen'}
       <div>
         <label for="sh-audio">Sound</label>
         {#if info.audio === 'pipewire'}
@@ -202,6 +249,9 @@
 
 <style>
   .help { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }
+  .kinds { display: flex; gap: 2px; margin-top: 12px; border-bottom: 1px solid var(--line); }
+  .kinds button { padding: 6px 14px; color: var(--text-dim); font-weight: 600; }
+  .kinds button.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
   .row { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
   .row.head { justify-content: space-between; margin-top: 0; }
   .row.two { align-items: flex-end; gap: 12px; }

src/ui/Sidebar.svelte

@@ -168,9 +168,9 @@
       onclick={() => session.setSelfDeaf(!deafened)} oncontextmenu={e => openQuick(e, 'output')}>
       <Icon name={deafened ? 'headphones-off' : 'headphones'} size={18} />
     </button>
-    <button class="icon-btn" class:live={sharingHere} title={sharingHere ? 'Stop sharing your screen' : 'Share your screen with your channel'}
-      aria-label={sharingHere ? 'Stop sharing your screen' : 'Share your screen'} disabled={!sharingHere && !canShare} onclick={toggleShare}>
-      <Icon name="screen" size={18} />
+    <button class="icon-btn" class:live={sharingHere} title={sharingHere ? `Stop sharing your ${share.kind}` : 'Share your screen or camera with your channel'}
+      aria-label={sharingHere ? `Stop sharing your ${share.kind}` : 'Share your screen or camera'} disabled={!sharingHere && !canShare} onclick={toggleShare}>
+      <Icon name={sharingHere ? share.kind : 'screen'} size={18} />
     </button>
     <span class="sep"></span>
     <button class="icon-btn" title="Change your description" aria-label="Change your description" disabled={!self} onclick={editDescription}>

src/ui/VoiceStage.svelte

@@ -43,6 +43,8 @@
   let focus = $state<number | null>(null);
   const focused = $derived(focus != null ? streamOf(focus) : null);
   const focusUser = $derived(focus != null ? session.user(focus) : undefined);
+  // Screen or camera, for the wording and the icons
+  const focusKind = $derived((focus != null && session.sharing[focus]) || 'screen');
   // A stream we just started watching goes to the stage; it leaves when the stream ends
   let lastWatch: number | null = null;
   $effect(() => {
@@ -206,7 +208,7 @@
   // The window follows the picture on the stage and closes with it
   $effect(() => {
     const stream = focused;
-    const title = focus === self?.session ? 'Your screen' : focusUser ? store.displayName(focusUser) : 'Screen share';
+    const title = focus === self?.session ? `Your ${focusKind}` : focusUser ? store.displayName(focusUser) : 'Screen share';
     if (!popped) return;
     if (!stream) return popIn();
     if (popVideo && popVideo.srcObject !== stream) popVideo.srcObject = stream;
@@ -221,8 +223,8 @@
   {#if self && focus != null && focused}
       <div class="spot" role="region" aria-label="Screen share" bind:this={frame}>
       <div class="spot-head">
-        <Icon name="screen" size={16} />
-        <span class="spot-who">{focus === self.session ? 'Your screen' : focusUser ? store.displayName(focusUser) : 'Screen share'}</span>
+        <Icon name={focusKind} size={16} />
+        <span class="spot-who">{focus === self.session ? `Your ${focusKind}` : focusUser ? store.displayName(focusUser) : 'Screen share'}</span>
         {#if focus !== self.session && hasSound}
           <Icon name={store.settings.shareVolume === 0 ? 'headphones-off' : 'headphones'} size={16} />
           <input class="vol" type="range" min="0" max="1" step="0.01" bind:value={store.settings.shareVolume} onchange={() => store.saveSettings()}
@@ -236,7 +238,7 @@
         {/if}
         {#if focus !== self.session}<button class="btn small" onclick={() => share.unwatch()}>Stop watching</button>
         {:else if videoOnly}
-          <span class="status" role="status" title="People watching your screen">{share.viewers} watching</span>
+          <span class="status" role="status" title="People watching your {share.kind}">{share.viewers} watching</span>
           <button class="btn small" onclick={() => share.stop()}>Stop sharing</button>
         {/if}
         {#if !videoOnly}<button class="icon-btn" title="Back to tiles" aria-label="Back to tiles" onclick={() => (focus = null)}><Icon name="x" size={16} /></button>{/if}
@@ -250,7 +252,7 @@
           <video bind:this={spotVideo} use:media={focused} autoplay playsinline muted ondblclick={fullscreen}></video>
           {#if focus !== self.session && watching && watching.state !== 'live'}
             <p class="pending" class:bad={watching.state === 'failed'}>{watching.state === 'failed'
-              ? 'Could not connect to the stream. Across the internet both of you need a STUN server; some mobile and company networks block direct connections altogether.'
+              ? 'Could not connect to the stream. Across the internet both of you need a STUN server; networks that block direct connections need a relay. Both are in Settings, Voice.'
               : 'Connecting to the stream...'}</p>
           {/if}
           {#if showStats}<ShareStats own={focus === self.session} onclose={() => (showStats = false)} />{/if}
@@ -294,7 +296,7 @@
         {/if}
       </button>
       {#if mine}
-        <span class="status" role="status" title="People watching your screen"><Icon name="screen" size={14} />{share.viewers} watching</span>
+        <span class="status" role="status" title="People watching your {share.kind}"><Icon name={share.kind} size={14} />{share.viewers} watching</span>
         <button class="btn small" onclick={() => share.stop()}>Stop sharing</button>
       {/if}
       <button class="icon-btn" class:on={self.selfMute} aria-label={self.selfMute ? 'Unmute' : 'Mute'} title={self.selfMute ? 'Unmute' : 'Mute'}
@@ -317,19 +319,19 @@
           <div class="row" role="presentation">
         {#each row as u (u.session)}
           {@const stream = streamOf(u.session)}
-          {@const sharing = !!session.sharing[u.session]}
+          {@const sharing = session.sharing[u.session]}
           {@const isSelf = u.session === self.session}
           <button class="tile" class:talking={talking(u.session)} class:self={isSelf} class:focused={focus === u.session}
             onclick={() => tileClick(u.session)}
             oncontextmenu={e => menu.show(e, userMenu(u))}
-            title={stream ? (focus === u.session ? 'Hide the stream' : 'Show the stream') : sharing && !isSelf ? 'Sharing their screen. Click to watch' : store.displayName(u)}
-            aria-label={stream ? `${focus === u.session ? 'Hide' : 'Show'} the screen of ${store.displayName(u)}` : sharing && !isSelf ? `Watch the screen of ${store.displayName(u)}` : store.displayName(u)}>
+            title={stream ? (focus === u.session ? 'Hide the stream' : 'Show the stream') : sharing && !isSelf ? `Sharing their ${sharing}. Click to watch` : store.displayName(u)}
+            aria-label={stream ? `${focus === u.session ? 'Hide' : 'Show'} the ${sharing || 'stream'} of ${store.displayName(u)}` : sharing && !isSelf ? `Watch the ${sharing} of ${store.displayName(u)}` : store.displayName(u)}>
             <Avatar name={u.name} size={avatar} speaking={talking(u.session)} />
             <span class="who">{store.displayName(u)}</span>
             {#if watching?.session === u.session && watching.state !== 'live'}
               <span class="note">{watching.state === 'connecting' ? 'Connecting...' : 'Could not connect'}</span>
             {/if}
-            {#if sharing}<span class="badge live"><Icon name="screen" size={13} /></span>
+            {#if sharing}<span class="badge live"><Icon name={sharing} size={13} /></span>
             {:else if u.deaf || u.selfDeaf}
               <span class="badge" class:admin={u.deaf}><Icon name="headphones-off" size={13} /></span>
             {:else if u.mute || u.selfMute || u.suppress}