heyquilt 0.3.121 → 0.3.138

package/src/ui/voice-call.js

@@ -2,25 +2,32 @@
 // windows, one connection per person (WebRTC); the setup for each pair travels in presence
 // through this app's server (POST /api/sessions/:id/voice, `voice` events). When you agreed to
 // transcripts and the owner has them on, your own speech is cut into clips at pauses and sent
-// to be written down. The parts with no browser in them are in voice-model.js.
-import { offersTo, newOfferId, nextStep, Segmenter, downsample, wavBytes, toBase64, rms, speakingNow, keepMissing } from './voice-model.js'
+// to be written down. A screen you share goes the same way, on a video line every connection opens
+// from the start, so sharing needs no new call setup. The parts with no browser in them are in
+// voice-model.js.
+import { offersTo, newOfferId, nextStep, Segmenter, downsample, wavBytes, toBase64, rms, speakingNow, keepMissing, leftCall, peopleInCall, callSound } from './voice-model.js'
 
 const GATHER_MS = 3000 // most addresses come in well under this; the rest aren't worth the wait
 const MIC = { audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }, video: false }
+// A screen: text stays sharp at a low frame rate. The desktop app picks what is shared (desktop/screen-share.js).
+const SCREEN = { video: { frameRate: { ideal: 15, max: 30 } }, audio: false }
 
 export class VoiceCall {
   /**
    * `post(body)`: our part in the call to the app server, answers the call as it sees it.
    * `ice()`: { iceServers }. `onChange()`: something shown changed (who speaks, muted, left).
-   * `getStream`: the microphone (tests give a tone).
+   * `onPeople(sound)`: someone came into the call ('callIn') or left it ('callOut').
+   * `getStream`: the microphone (tests give a tone). `getScreen`: a screen to share (tests draw one).
    */
-  constructor ({ post, ice, clip, onChange = () => {}, getStream = () => navigator.mediaDevices.getUserMedia(MIC) }) {
-    Object.assign(this, { post, ice, clip, onChange, getStream })
+  constructor ({ post, ice, clip, onChange = () => {}, onPeople = () => {}, getStream = () => navigator.mediaDevices.getUserMedia(MIC), getScreen = () => navigator.mediaDevices.getDisplayMedia(SCREEN) }) {
+    Object.assign(this, { post, ice, clip, onChange, onPeople, getStream, getScreen })
+    this.people = new Set() // names in the call with us: in voice, or kept through a relay blip
     this.in = false
     this.muted = false
     this.transcribing = false
     this.me = 0
-    this.links = new Map() // peer id -> { pc, n, accepted, answered, failed, since, audio, analyser, name }
+    this.links = new Map() // peer id -> { pc, n, accepted, answered, failed, since, audio, analyser, name, screenTx, screen }
+    this.screen = null // the screen we share, while we do
     this.sig = {} // peer id -> the signal we leave them
     this.levels = new Map() // 'me' or peer id -> { speaking, at }
     this.view = null
@@ -45,7 +52,7 @@ export class VoiceCall {
     this.timer = setInterval(() => this.measure(), 100)
     // An offer nobody answered is made again after a while: look every few seconds, not only on news.
     this.retry = setInterval(() => { if (this.view) this.update(this.view) }, 5000)
-    this.update(await this.post({ muted: false, transcribing, sig: {} }))
+    this.update(await this.post({ muted: false, transcribing, sharing: false, sig: {} }))
   }
 
   /** Leaves: every connection closes, the microphone stops, and presence says we're out. */
@@ -54,8 +61,11 @@ export class VoiceCall {
     this.in = false
     clearInterval(this.timer)
     clearInterval(this.retry)
+    this.stopShare()
     this.segmenter?.end()
     for (const id of [...this.links.keys()]) this.drop(id)
+    this.people = new Set()
+    this.counted = false
     this.stream?.getTracks().forEach((t) => t.stop())
     this.worklet?.disconnect()
     await this.ctx?.close().catch(() => {})
@@ -73,6 +83,35 @@ export class VoiceCall {
     this.onChange()
   }
 
+  get sharing () { return !!this.screen }
+
+  /** Shares a screen with everyone in the call: the system or the desktop app asks which. */
+  async share () {
+    if (!this.in || this.screen) return
+    const stream = await this.getScreen()
+    const track = stream.getVideoTracks()[0]
+    if (!track || !this.in || this.screen) { stream.getTracks().forEach((t) => t.stop()); return }
+    track.contentHint = 'detail'
+    // "Stop sharing" in the system's own bar, or the shared window closing, ends it here too.
+    track.addEventListener('ended', () => { if (this.screen === stream) this.stopShare() })
+    this.screen = stream
+    for (const l of this.links.values()) l.screenTx?.sender.replaceTrack(track).catch(() => {})
+    this.publish()
+    this.onChange()
+  }
+
+  stopShare () {
+    if (!this.screen) return
+    this.screen.getTracks().forEach((t) => t.stop())
+    this.screen = null
+    for (const l of this.links.values()) l.screenTx?.sender.replaceTrack(null).catch(() => {})
+    this.publish()
+    this.onChange()
+  }
+
+  /** The screen one person shares with us, once it arrives (they say they share in presence). */
+  screenOf (id) { return this.links.get(id)?.screen || null }
+
   /** Transcripts on or off for our own speech (we agreed, and the owner has them on). */
   async setTranscribing (on) {
     this.transcribing = !!on
@@ -92,14 +131,22 @@ export class VoiceCall {
     const here = new Set(view.peers.map((p) => p.id))
     // Someone missing from presence is often a relay blip, not a hang-up: their connection is
     // kept while it is up (keepMissing), and goes once it isn't or they've been gone too long.
+    // Someone still in the session but out of voice hung up: theirs goes at once.
     const t = Date.now()
     for (const [id, l] of [...this.links]) {
       if (here.has(id)) { l.missingSince = 0; continue }
       l.missingSince = l.missingSince || t
-      if (!keepMissing({ state: l.pc.connectionState, missingSince: l.missingSince, now: t })) this.drop(id)
+      if (leftCall({ id, here: view.here }) || !keepMissing({ state: l.pc.connectionState, missingSince: l.missingSince, now: t })) this.drop(id)
     }
     for (const id of Object.keys(this.sig)) if (!here.has(Number(id)) && !this.links.has(Number(id))) delete this.sig[id]
     for (const p of view.peers) this.step(p).catch((err) => console.warn('voice', p.name, err))
+    // The join and leave sounds follow who is in the call, not presence: a relay blip plays neither.
+    const people = peopleInCall(view.peers, this.links)
+    const sound = callSound(this.people, people)
+    // Those already in when we join are no news: joining plays its own sound.
+    if (sound && this.counted) this.onPeople(sound)
+    this.people = people
+    this.counted = true
     this.onChange()
   }
 
@@ -108,7 +155,7 @@ export class VoiceCall {
     const what = nextStep({ me: this.me, peer: p.id, signal: p.signal, link })
     if (link) link.name = p.name
     if (what === 'offer') {
-      const l = this.connect(p)
+      const l = this.connect(p, newOfferId(), { offering: true })
       const offer = await l.pc.createOffer()
       await l.pc.setLocalDescription(offer)
       await gathered(l.pc)
@@ -118,6 +165,10 @@ export class VoiceCall {
     } else if (what === 'answer') {
       const l = this.connect(p, p.signal.n)
       await l.pc.setRemoteDescription({ type: 'offer', sdp: p.signal.sdp })
+      // Their offer's video line, open both ways: either of us can share. An app from before
+      // screen sharing offers none, and nobody's screen goes to or comes from it.
+      const tx = l.pc.getTransceivers().find((t) => t.receiver.track.kind === 'video')
+      if (tx) l.screenTx = screenLine(tx, this.screen)
       const answer = await l.pc.createAnswer()
       await l.pc.setLocalDescription(answer)
       await gathered(l.pc)
@@ -131,13 +182,16 @@ export class VoiceCall {
     }
   }
 
-  /** A fresh connection to one person, replacing any old one. */
-  connect (p, n = newOfferId()) {
+  /** A fresh connection to one person, replacing any old one. The one offering adds the video line for a screen. */
+  connect (p, n = newOfferId(), { offering = false } = {}) {
     this.drop(p.id, { keepSig: true })
-    const pc = new RTCPeerConnection({ iceServers: this.servers?.iceServers || [] })
+    // One transport for the voice and the screen: its addresses are in the offer once.
+    const pc = new RTCPeerConnection({ iceServers: this.servers?.iceServers || [], bundlePolicy: 'max-bundle' })
     for (const t of this.stream.getAudioTracks()) pc.addTrack(t, this.stream)
-    const l = { pc, n, accepted: false, answered: false, failed: false, since: Date.now(), name: p.name }
+    const l = { pc, n, accepted: false, answered: false, failed: false, since: Date.now(), name: p.name, screenTx: null, screen: null }
+    if (offering) l.screenTx = screenLine(pc.addTransceiver('video', { direction: 'sendrecv' }), this.screen)
     pc.ontrack = (e) => {
+      if (e.track.kind === 'video') { l.screen = new MediaStream([e.track]); this.onChange(); return }
       if (l.audio) return
       const s = e.streams[0] || new MediaStream([e.track])
       l.audio = new Audio()
@@ -181,7 +235,7 @@ export class VoiceCall {
   publish () {
     if (!this.in) return
     if (this.sending) { this.again = true; return }
-    this.sending = this.post({ muted: this.muted, transcribing: this.transcribing, sig: this.sig })
+    this.sending = this.post({ muted: this.muted, transcribing: this.transcribing, sharing: !!this.screen, sig: this.sig })
       .then((view) => { this.sending = null; this.update(view) }, () => { this.sending = null })
       .finally(() => { if (this.again) { this.again = false; this.publish() } })
   }
@@ -221,6 +275,21 @@ export class VoiceCall {
   }
 }
 
+/**
+ * A connection's video line for a screen: open both ways, the codecs that suit a screen first (and
+ * fewer of them, so the offer stays small: voice.js MAX_SDP), and our screen on it if we share one.
+ */
+function screenLine (tx, screen) {
+  tx.direction = 'sendrecv'
+  try {
+    const codecs = RTCRtpReceiver.getCapabilities('video').codecs.filter((c) => /^video\/(VP9|VP8|rtx)$/i.test(c.mimeType))
+    if (codecs.some((c) => !/rtx/i.test(c.mimeType))) tx.setCodecPreferences(codecs.sort((a, b) => /VP9/i.test(b.mimeType) - /VP9/i.test(a.mimeType)))
+  } catch {}
+  const track = screen?.getVideoTracks()[0]
+  if (track) tx.sender.replaceTrack(track).catch(() => {})
+  return tx
+}
+
 /** Waits until the connection has gathered its addresses (or GATHER_MS), so one offer or answer carries them all. */
 function gathered (pc) {
   if (pc.iceGatheringState === 'complete') return Promise.resolve()

package/src/ui/voice-model.js

@@ -141,3 +141,42 @@ export function keepMissing ({ state, missingSince, now = Date.now(), graceMs =
   const gone = now - missingSince
   return state === 'connected' ? gone < connectedMs : gone < graceMs
 }
+
+/**
+ * Whether someone missing from the call's presence hung up: they are still in the session
+ * (`here`, every presence id the app server sees) but no longer in voice. Someone gone from the
+ * session altogether may be a relay blip (keepMissing).
+ */
+export const leftCall = ({ id, here }) => Array.isArray(here) && here.includes(id)
+
+/** Who is in the call with us, by name: in voice now, or missing from presence with their connection kept. */
+export function peopleInCall (peers, links) {
+  return new Set([...peers.map((p) => p.name), ...[...links.values()].map((l) => l.name)].filter(Boolean))
+}
+
+/**
+ * Whose shared screen fills the middle of the session: the one picked while they still share,
+ * otherwise the first to share. `hidden`: those whose screen was hidden (until they stop sharing).
+ */
+export function screenShown ({ peers, picked = null, hidden = new Set() }) {
+  const sharing = peers.filter((p) => p.sharing && !hidden.has(p.id))
+  return (sharing.find((p) => p.id === picked) || sharing[0])?.id ?? null
+}
+
+/** The sound for a change in who is in the call: 'callIn', 'callOut' or null. */
+export function callSound (before, now) {
+  if ([...now].some((n) => !before.has(n))) return 'callIn'
+  if ([...before].some((n) => !now.has(n))) return 'callOut'
+  return null
+}
+
+/**
+ * What to say when sharing a screen didn't start: nothing when the person backed out of the picker
+ * (AbortError from the desktop app, "by user" from a browser), otherwise why, so the button never
+ * does nothing in silence.
+ */
+export function shareRefused (err) {
+  if (!err || err.name === 'AbortError' || /by user/i.test(err.message || '')) return ''
+  if (err.name === 'NotAllowedError') return "Quilt can't share your screen. On a Mac, allow Quilt in System Settings → Privacy & Security → Screen & System Audio Recording, then quit and reopen Quilt."
+  return `Couldn't share your screen: ${err.message || err.name}`
+}

package/src/ui/voice.js

@@ -2,10 +2,12 @@
 // going on is pinned to the bottom of the chat, above the message box: who is in it, Join, or
 // once you're in it mute, leave, a ring around whoever speaks and the latest lines as each is
 // written down. A transcribed call says so before your microphone opens. Finished calls stay in
-// the chat as cards that open their transcript in place. The audio is voice-call.js; the call as
-// the app's server sees it comes as `voice` events.
+// the chat as cards that open their transcript in place. A screen someone shares fills the middle
+// of the session, the chat staying on the right; Hide puts back what was there. The audio and the
+// screens are voice-call.js; the call as the app's server sees it comes as `voice` events.
 import { $, esc, api, toast, avatar, I, TOKEN, clock } from './common.js'
 import { VoiceCall } from './voice-call.js'
+import { screenShown, shareRefused } from './voice-model.js'
 import { playSound } from './sounds.js'
 
 const views = new Map() // session id -> the call as that session's server sees it
@@ -19,15 +21,44 @@ let options = false // the transcript choices, open in the pinned call
 const opened = new Set() // finished calls whose transcript is open in the chat
 const full = new Map() // call id -> its lines, once opened
 const checked = new Set() // sessions whose leftover "in the call" (from before a reload) was cleared
+let picked = null // whose shared screen was picked to show, when several share
+const hiddenScreens = new Set() // presence ids whose screen was hidden, until they stop sharing
+let actualSize = false // a shared screen at its own size (scrolling) instead of fitted
+let picking = null // { sources, blocked, resolve }: the desktop app asks which screen or window to share
+let stageDrawn = ''
+let screenVideo = null // the shared screen's picture: one element kept across Hide and Show, so it keeps its last frame
+let selfClosed = false // our own screen's preview closed, until we stop sharing
+let selfVideo = null // our own screen's preview: one element, like screenVideo
 let drawn = '' // what the pinned call was last drawn from: redrawn only when that changes, so a click is never lost mid-press
 let callsDrawn = ''
 
+const NO_SCREEN = "Quilt can't see your screen. Allow it for Quilt in System Settings → Privacy & Security → Screen & System Audio Recording, then quit and reopen Quilt."
 const NO_MIC = "Quilt can't use your microphone. Allow it for Quilt in System Settings → Privacy & Security → Microphone, then try again."
 
 /** "Call" in the chat's header, shown while no call is going. */
 export const callButtonMarkup = () => `<button type="button" class="chat-call" id="chat-call" data-call-join="ask" title="Start a voice call in this session" hidden>${I.headset}<span>Call</span></button>`
 /** The call going on, pinned above the message box. */
 export const callPinMarkup = () => '<div class="call-pin" id="call-pin" role="region" aria-label="Voice call" hidden></div>'
+/** A shared screen (or what to share), over the middle of the session. */
+export const screenStageMarkup = () => '<div class="screen-stage" id="screen-stage" role="region" aria-label="Shared screen" hidden></div><div class="self-share" id="self-share" role="region" aria-label="What you are sharing" hidden></div>'
+
+// The desktop app with no system picker (Windows, macOS before 15) asks here which screen or
+// window to share (desktop/screen-share.js): the choices fill the middle, the answer goes back.
+window.quiltDesktop?.onPickScreen?.((ask) => pickScreen(ask))
+
+/** Shows what can be shared (`sources`, or `blocked` when the system doesn't let Quilt see the screen); resolves to the id picked, or null. */
+export function pickScreen ({ sources = [], blocked = false } = {}) {
+  endPicking(null)
+  if (!shown || !live || live.sid !== shown.id) return Promise.resolve(null)
+  return new Promise((resolve) => { picking = { sources, blocked, resolve }; renderCall() })
+}
+
+function endPicking (id) {
+  if (!picking) return
+  const { resolve } = picking
+  picking = null
+  resolve(id)
+}
 
 /**
  * A session is on screen: wire the call into its chat. `who()`: { owner, me, colorOf(name) } now;
@@ -39,32 +70,28 @@ export function mountCall (id, signal, who, chatChanged = () => {}) {
   options = false
   drawn = ''
   callsDrawn = ''
+  stageDrawn = ''
   $('#chat-pane')?.addEventListener('click', onClick, { signal })
+  $('#screen-stage')?.addEventListener('click', onClick, { signal })
+  $('#self-share')?.addEventListener('click', onClick, { signal })
   const tick = setInterval(renderCall, 20000) // the call's minutes
   signal.addEventListener('abort', () => clearInterval(tick))
   api('GET', `/api/sessions/${id}/voice`).then((v) => voiceEvent(id, v), () => {})
   renderCall()
 }
 
-export function unmountCall () { shown = null; asking = false; options = false }
+export function unmountCall () { endPicking(null); shown = null; asking = false; options = false }
 
 /** The call as the app's server sees it now (a `voice` event, or an answer). */
 export function voiceEvent (id, view) {
-  const was = views.get(id)
   views.set(id, view)
   // Left in the call by a window that closed or reloaded without leaving: out now.
   if (!checked.has(id)) {
     checked.add(id)
     if (view.in && !(live && live.sid === id)) { api('POST', `/api/sessions/${id}/voice`, { in: false }).then((v) => voiceEvent(id, v), () => {}); return }
   }
-  if (live && live.sid === id) {
-    // Someone came into or left the call we're in.
-    const before = new Set((was?.peers || []).map((p) => p.id))
-    const now = new Set(view.peers.map((p) => p.id))
-    if ([...now].some((p) => !before.has(p))) playSound('callIn', { force: true })
-    else if ([...before].some((p) => !now.has(p))) playSound('callOut', { force: true })
-    live.call.update(view)
-  }
+  // The call we're in: it plays the join and leave sounds itself (onPeople), so a relay blip plays neither.
+  if (live && live.sid === id) live.call.update(view)
   if (shown && shown.id === id) {
     renderCall()
     // A call ended: its card joins the chat. The call going on now changes every few seconds and
@@ -97,7 +124,8 @@ async function join (id, transcribing) {
         }
         throw err
       }),
-      onChange: () => { if (shown && shown.id === id) renderCall() }
+      onChange: () => { if (shown && shown.id === id) renderCall() },
+      onPeople: (sound) => playSound(sound, { force: true })
     })
     live = { sid: id, call }
     await call.join({ transcribing })
@@ -116,6 +144,12 @@ async function leave () {
   const { sid, call } = live
   live = null
   options = false
+  endPicking(null)
+  picked = null
+  hiddenScreens.clear()
+  if (screenVideo) screenVideo.srcObject = null
+  selfClosed = false
+  if (selfVideo) selfVideo.srcObject = null
   const v = await call.leave().catch(() => null)
   if (v) voiceEvent(sid, v)
   playSound('callOut', { force: true })
@@ -130,7 +164,7 @@ window.addEventListener('pagehide', () => {
 
 async function onClick (e) {
   const t = e.target.closest('button')
-  if (!t || !shown || !t.closest('#chat-call, #call-pin, .call-card')) return
+  if (!t || !shown || !t.closest('#chat-call, #call-pin, #screen-stage, #self-share, .call-card')) return
   const id = shown.id
   const view = views.get(id) || EMPTY
   const d = t.dataset
@@ -145,6 +179,32 @@ async function onClick (e) {
   } else if (d.callOptions !== undefined) {
     options = !options
     renderCall()
+  } else if (d.callShare !== undefined) {
+    if (!live) return
+    if (live.call.sharing) live.call.stopShare()
+    else live.call.share().catch((err) => { const why = shareRefused(err); if (why) toast(why) })
+  } else if (d.screenShow) {
+    picked = Number(d.screenShow)
+    hiddenScreens.clear()
+    renderCall()
+  } else if (d.screenHide !== undefined) {
+    // Hidden until they stop sharing: everyone sharing now, so another screen doesn't take its place.
+    for (const p of view.peers) if (p.sharing) hiddenScreens.add(p.id)
+    renderCall()
+  } else if (d.selfShare) {
+    selfClosed = d.selfShare === 'close'
+    renderCall()
+  } else if (d.screenSize) {
+    actualSize = d.screenSize === 'actual'
+    renderCall()
+  } else if (d.screenFull !== undefined) {
+    $('#screen-stage .ss-view')?.requestFullscreen?.().catch(() => {})
+  } else if (d.screenSrc) {
+    endPicking(d.screenSrc)
+    renderCall()
+  } else if (d.screenCancel !== undefined) {
+    endPicking(null)
+    renderCall()
   } else if (d.callMute !== undefined) {
     live?.call.setMuted(!live.call.muted)
   } else if (d.callLeave !== undefined) {
@@ -207,7 +267,14 @@ export function renderCall () {
   // The latest lines change every few seconds: they're drawn on their own, so the controls above
   // them (Join, mute, leave) are never redrawn under a click.
   const lines = here && view.recent.length ? view.recent.map((l) => lineHtml(l, colorOf)).join('') : ''
-  const key = JSON.stringify([id, here, joining, asking, options, owner, elsewhere, view.transcribe, others.map((p) => [p.id, p.name, p.color, p.muted, p.transcribing]), me.name, me.color, c && [c.muted, c.transcribing], minutes(view.since || Date.now())])
+  // A screen hidden stays hidden until its person stops sharing; the next time they share, it shows.
+  for (const pid of [...hiddenScreens]) if (!others.some((p) => p.id === pid && p.sharing)) hiddenScreens.delete(pid)
+  const showing = here ? screenShown({ peers: others, picked, hidden: hiddenScreens }) : null
+  renderStage({ here, showing, others, colorOf })
+  // Closing the preview lasts until we stop sharing; the next share shows it again.
+  if (!c?.sharing) selfClosed = false
+  renderSelf(c)
+  const key = JSON.stringify([id, here, joining, asking, options, owner, elsewhere, view.transcribe, others.map((p) => [p.id, p.name, p.color, p.muted, p.transcribing, p.sharing]), me.name, me.color, c && [c.muted, c.transcribing, c.sharing], selfClosed, showing, minutes(view.since || Date.now())])
   if (key === drawn && (pin.hidden || pin.childElementCount)) { paintLines(pin, lines); paintTalk(); return }
   drawn = key
   linesDrawn = null
@@ -221,7 +288,7 @@ export function renderCall () {
       <div class="cp-two"><button type="button" class="btn sm primary" data-call-join="transcribed">${others.length ? 'Join' : 'Start'}, transcribed</button><button type="button" class="btn sm" data-call-join="plain">${others.length ? 'Join' : 'Start'}, not transcribed</button></div>`
   } else if (!here) {
     pin.innerHTML = `<div class="cp-top"><span class="call-dot"></span><span class="call-faces">${others.map((p) => face(p.id, p.name, p.color, p.muted)).join('')}</span>
-        <span class="cp-what"><b>${esc(names(others.map((p) => p.name)))} ${others.length === 1 ? 'is' : 'are'} in a call</b><span class="call-sub">${[dur, view.transcribe ? 'transcribed' : ''].filter(Boolean).join(' · ')}</span></span>
+        <span class="cp-what"><b>${esc(names(others.map((p) => p.name)))} ${others.length === 1 ? 'is' : 'are'} in a call</b><span class="call-sub">${[dur, view.transcribe ? 'transcribed' : '', ...others.filter((p) => p.sharing).map((p) => `${esc(p.name)} sharing a screen`)].filter(Boolean).join(' · ')}</span></span>
         <button type="button" class="btn sm primary cp-end" data-call-join="ask" ${elsewhere ? 'disabled title="Leave your other call first"' : others.length >= FULL ? 'disabled title="This call is full: calls hold six people for now."' : ''}>Join</button></div>`
   } else {
     const mine = c.transcribing && view.transcribe
@@ -235,16 +302,99 @@ export function renderCall () {
       ? `<div class="cp-opt"><span><b>Transcripts</b> · ${view.transcribe ? 'On: people who agree are written down for the session and its agents.' : 'Off: nothing said in calls is written down.'}</span><button type="button" class="btn sm" data-call-owner="${view.transcribe ? 'off' : 'on'}">${view.transcribe ? 'Turn off' : 'Turn on'}</button></div>`
       : ''
     pin.innerHTML = `<div class="cp-top"><span class="call-dot"></span><b>Call</b><span class="call-sub">${esc(dur)}</span>
-        <button type="button" class="call-ic cp-end" data-call-mute aria-pressed="${c.muted}" title="${c.muted ? 'Unmute' : 'Mute'}" aria-label="${c.muted ? 'Unmute' : 'Mute'}">${c.muted ? I.micOff : I.mic}</button>
+        <button type="button" class="call-ic cp-end" data-call-share aria-pressed="${c.sharing}" title="${c.sharing ? 'Stop sharing your screen' : 'Share your screen'}" aria-label="${c.sharing ? 'Stop sharing your screen' : 'Share your screen'}">${c.sharing ? I.screenOff : I.screenShare}</button>
+        <button type="button" class="call-ic" data-call-mute aria-pressed="${c.muted}" title="${c.muted ? 'Unmute' : 'Mute'}" aria-label="${c.muted ? 'Unmute' : 'Mute'}">${c.muted ? I.micOff : I.mic}</button>
         <button type="button" class="call-ic bad" data-call-leave title="Leave the call" aria-label="Leave the call">${I.hangUp}</button></div>
       <div class="cp-row"><span class="call-faces">${face('me', me.name, me.color, c.muted)}${others.map((p) => face(p.id, p.name, p.color, p.muted)).join('')}</span>${tag}</div>
       ${options ? `<div class="cp-opts">${myChoice}${ownerChoice}</div>` : ''}
+      ${c.sharing ? `<div class="cp-share">${I.screenShare}<span class="cp-says">Sharing your screen</span>${selfClosed ? '<button type="button" class="btn sm ghost" data-self-share="open" title="Show what you share, in the corner">Show</button>' : ''}<button type="button" class="btn sm" data-call-share>Stop sharing</button></div>` : ''}
+      ${others.filter((p) => p.sharing).map((p) => `<div class="cp-share">${I.screenShare}<span class="cp-says">${esc(p.name)} is sharing a screen</span>${p.id === showing ? '<span class="call-sub">in the middle</span>' : `<button type="button" class="btn sm" data-screen-show="${p.id}">Show</button>`}</div>`).join('')}
       <div class="cp-lines" aria-live="polite" hidden></div>`
   }
   paintLines(pin, lines)
   paintTalk()
 }
 
+/**
+ * The middle of the session while we're in the call: the screen someone shares (`showing`, a
+ * presence id), or what to share when the desktop app asks. Hidden otherwise, which puts back
+ * whatever was there. Redrawn only when what it shows changes; the picture itself never redraws.
+ */
+function renderStage ({ here, showing, others, colorOf }) {
+  const stage = $('#screen-stage')
+  if (!stage) return
+  const p = showing != null ? others.find((x) => x.id === showing) : null
+  const sharers = others.filter((x) => x.sharing)
+  const open = !!(here && (picking || p))
+  stage.hidden = !open
+  const key = JSON.stringify(open ? (picking ? ['pick', picking.blocked, picking.sources.map((s) => s.id)] : ['screen', p.id, p.name, p.color, sharers.map((x) => [x.id, x.name])]) : null)
+  if (key !== stageDrawn) {
+    stageDrawn = key
+    stage.innerHTML = !open ? '' : picking ? pickerHtml(picking) : screenHtml(p, sharers, colorOf)
+  }
+  if (!open || picking) return
+  // Fit or its own size: the same picture, never reloaded.
+  stage.querySelector('.ss-view').classList.toggle('actual', actualSize)
+  for (const b of stage.querySelectorAll('[data-screen-size]')) {
+    const on = (b.dataset.screenSize === 'actual') === actualSize
+    b.classList.toggle('on', on)
+    b.setAttribute('aria-pressed', on)
+  }
+  const stream = live.call.screenOf(p.id)
+  if (!screenVideo) screenVideo = Object.assign(document.createElement('video'), { autoplay: true, muted: true, playsInline: true })
+  const video = screenVideo
+  const box = stage.querySelector('.ss-view')
+  const wait = stage.querySelector('.ss-wait')
+  if (video.parentNode !== box) box.prepend(video)
+  if (video.srcObject !== stream) video.srcObject = stream
+  // Taken out of the page (Hide) pauses it.
+  if (stream && video.paused) video.play().catch(() => {})
+  // Until its first picture arrives (a moment after they start sharing), say whose it will be.
+  wait.hidden = !!(stream && video.videoWidth)
+  video.onresize = () => { if (video.parentNode) video.parentNode.querySelector('.ss-wait').hidden = true }
+}
+
+/** What we share, small in the corner of the middle, so we see what everyone sees. `c`: our call, when we're in one. */
+function renderSelf (c) {
+  const box = $('#self-share')
+  if (!box) return
+  const open = !!(c && c.sharing && c.screen && !selfClosed)
+  box.hidden = !open
+  if (!open) { if (selfVideo) selfVideo.srcObject = null; return }
+  if (!box.childElementCount) {
+    box.innerHTML = `<div class="sf-bar">${I.screenShare}<span>You're sharing this</span><button type="button" class="sf-x" data-self-share="close" title="Close the preview (you keep sharing)" aria-label="Close the preview">${I.x}</button></div><div class="sf-view"></div>`
+  }
+  if (!selfVideo) selfVideo = Object.assign(document.createElement('video'), { autoplay: true, muted: true, playsInline: true })
+  const view = box.querySelector('.sf-view')
+  if (selfVideo.parentNode !== view) view.append(selfVideo)
+  if (selfVideo.srcObject !== c.screen) selfVideo.srcObject = c.screen
+  if (selfVideo.paused) selfVideo.play().catch(() => {})
+}
+
+function screenHtml (p, sharers, colorOf) {
+  const chips = sharers.length > 1
+    ? `<div class="loom-seg" role="group" aria-label="Whose screen">${sharers.map((x) => `<button type="button" class="loom-chip${x.id === p.id ? ' on' : ''}" data-screen-show="${x.id}" aria-pressed="${x.id === p.id}">${esc(x.name)}</button>`).join('')}</div>`
+    : ''
+  return `<div class="loom-bar ss-bar">
+      <div class="loom-title ss-who">${avatar(p.name, p.color || colorOf(p.name))}<b>${esc(p.name)}'s screen</b><span class="hint">live in the call</span></div>
+      ${chips}<span class="spacer"></span>
+      <div class="loom-seg" role="group" aria-label="Size"><button type="button" class="loom-chip${actualSize ? '' : ' on'}" data-screen-size="fit" aria-pressed="${!actualSize}">Fit</button><button type="button" class="loom-chip${actualSize ? ' on' : ''}" data-screen-size="actual" aria-pressed="${actualSize}">Actual size</button></div>
+      <button type="button" class="loom-chip" data-screen-full>${I.fullScreen}<span>Full screen</span></button>
+      <button type="button" class="loom-chip" data-screen-hide title="Back to what was here">Hide</button>
+    </div>
+    <div class="ss-view${actualSize ? ' actual' : ''}"><p class="ss-wait">Waiting for ${esc(p.name)}'s screen…</p></div>`
+}
+
+function pickerHtml ({ sources, blocked }) {
+  const card = (s) => `<button type="button" class="ss-src" data-screen-src="${esc(s.id)}" title="${esc(s.name)}"><span class="ss-thumb">${s.thumb ? `<img src="${esc(s.thumb)}" alt="">` : I.screenShare}</span><span class="ss-name">${esc(s.name || (s.screen ? 'Screen' : 'Window'))}</span></button>`
+  const group = (title, list) => list.length ? `<h4>${title}</h4><div class="ss-grid">${list.map(card).join('')}</div>` : ''
+  const body = blocked
+    ? `<p class="ss-note">${esc(NO_SCREEN)}</p>`
+    : sources.length ? group('Screens', sources.filter((s) => s.screen)) + group('Windows', sources.filter((s) => !s.screen)) : '<p class="ss-note">There is nothing to share.</p>'
+  return `<div class="loom-bar ss-bar"><div class="loom-title"><b>Share your screen</b><span class="hint">Everyone in the call sees what you pick</span></div><span class="spacer"></span><button type="button" class="loom-chip" data-screen-cancel>Cancel</button></div>
+    <div class="ss-pick">${body}</div>`
+}
+
 let linesDrawn = null
 /** The latest lines of the call, under its controls. */
 function paintLines (pin, html) {