Add basic screen sharing

2026-03-26 10:59:50 -04:00
parent fe04c4c52c
commit ad8e9ed802
4 changed files with 137 additions and 27 deletions
@@ -27,6 +27,7 @@
    isLocal: boolean
    trackSid: string
    attachable: Track | undefined
+    source: Track.Source.Camera | Track.Source.ScreenShare
  }

  const {variant, url, h, visible = true, class: className = ""}: Props = $props()
@@ -60,17 +61,40 @@
        isLocal: true,
        trackSid: localPub?.trackSid ?? "local-camera",
        attachable: localPub?.track,
+        source: Track.Source.Camera,
+      })
+    }
+
+    if (session.screenShareOn) {
+      const localPub = lp.getTrackPublication(Track.Source.ScreenShare)
+      out.push({
+        identity: lp.identity,
+        isLocal: true,
+        trackSid: localPub?.trackSid ?? "local-screen",
+        attachable: localPub?.track,
+        source: Track.Source.ScreenShare,
      })
    }

    for (const rp of room.remoteParticipants.values()) {
-      const pub = rp.getTrackPublication(Track.Source.Camera)
-      if (pub?.isSubscribed && pub.track) {
+      const camPub = rp.getTrackPublication(Track.Source.Camera)
+      if (camPub?.isSubscribed && camPub.track) {
        out.push({
          identity: rp.identity,
          isLocal: false,
-          trackSid: pub.trackSid,
-          attachable: pub.track,
+          trackSid: camPub.trackSid,
+          attachable: camPub.track,
+          source: Track.Source.Camera,
+        })
+      }
+      const screenPub = rp.getTrackPublication(Track.Source.ScreenShare)
+      if (screenPub?.isSubscribed && screenPub.track) {
+        out.push({
+          identity: rp.identity,
+          isLocal: false,
+          trackSid: screenPub.trackSid,
+          attachable: screenPub.track,
+          source: Track.Source.ScreenShare,
        })
      }
    }
@@ -85,9 +109,10 @@
    }
  })

-  const labelFor = (identity: string) => {
+  const labelFor = (identity: string, source: Tile["source"]) => {
    const pk = pubkeyFromLiveKitIdentity(identity)
-    return pk ? displayProfileByPubkey(pk) : "Unknown"
+    const name = pk ? displayProfileByPubkey(pk) : "Unknown"
+    return source === Track.Source.ScreenShare ? `${name} · screen` : name
  }

  const showTileGrid = $derived(tiles.length > 0)
@@ -106,9 +131,17 @@
    )}>
    {#if showTileGrid}
      {#each tiles as tile (tile.trackSid + tile.identity)}
-        <div class="relative aspect-video overflow-hidden rounded-box bg-base-100 shadow-sm">
+        <div
+          class={cx(
+            "relative aspect-video overflow-hidden rounded-box shadow-sm",
+            tile.source === Track.Source.ScreenShare ? "bg-black" : "bg-base-100",
+          )}>
          {#if tile.attachable}
-            <VideoCallVideo track={tile.attachable} muted={tile.isLocal} class="absolute inset-0" />
+            <VideoCallVideo
+              track={tile.attachable}
+              muted={tile.isLocal}
+              fit={tile.source === Track.Source.ScreenShare ? "contain" : "cover"}
+              class="absolute inset-0" />
          {:else}
            <div class="absolute inset-0 flex items-center justify-center">
              <ProfileCircle pubkey={pubkeyFromLiveKitIdentity(tile.identity)} {url} size={14} />
@@ -116,15 +149,17 @@
          {/if}
          <span
            class="absolute bottom-1 left-1 max-w-[calc(100%-0.5rem)] truncate rounded bg-base-100/80 px-1.5 py-0.5 text-xs">
-            {labelFor(tile.identity)}{tile.isLocal ? " (you)" : ""}
+            {labelFor(tile.identity, tile.source)}{tile.isLocal ? " (you)" : ""}
          </span>
        </div>
      {/each}
    {:else}
      <div
        class="flex min-h-[12rem] flex-1 flex-col items-center justify-center gap-2 rounded-box bg-base-100/50 p-4 text-center text-sm opacity-80">
-        <p>No camera video yet.</p>
-        <p class="text-xs">Use the camera control in the voice widget to share video.</p>
+        <p>No camera or screen share yet.</p>
+        <p class="text-xs">
+          Use the camera or screen share control in the voice widget to share video.
+        </p>
      </div>
    {/if}
  </div>
@@ -5,10 +5,11 @@
  type Props = {
    track: Track
    muted?: boolean
+    fit?: "cover" | "contain"
    class?: string
  }

-  const {track, muted = true, class: className = ""}: Props = $props()
+  const {track, muted = true, fit = "cover", class: className = ""}: Props = $props()

  let el = $state<HTMLVideoElement | undefined>()

@@ -23,5 +24,8 @@
  })
 </script>

-<video bind:this={el} class={cx("h-full w-full object-cover", className)} playsinline {muted}
-></video>
+<video
+  bind:this={el}
+  class={cx("h-full w-full", fit === "contain" ? "object-contain" : "object-cover", className)}
+  playsinline
+  {muted}></video>
@@ -8,6 +8,8 @@
  import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
  import Videocamera from "@assets/icons/videocamera.svg?dataurl"
  import VideocameraRecord from "@assets/icons/videocamera-record.svg?dataurl"
+  import ScreenShare from "@assets/icons/screen-share.svg?dataurl"
+  import Screencast from "@assets/icons/screencast.svg?dataurl"
  import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
  import PhoneCallingRounded from "@assets/icons/phone-calling-rounded.svg?dataurl"
  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
@@ -34,6 +36,7 @@
    leaveVoiceRoom,
    toggleMute,
    toggleCamera,
+    toggleScreenShare,
    cancelJoinVoiceRoom,
  } from "@app/voice"

@@ -122,6 +125,14 @@
          btn-ghost" onclick={openAudioSettings}>
          <Icon icon={Settings} size={4} />
        </Button>
+        <Button
+          data-tip={$currentVoiceSession.screenShareOn ? "Stop sharing" : "Share screen"}
+          class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.screenShareOn
+            ? 'btn-ghost'
+            : 'btn-error'}"
+          onclick={toggleScreenShare}>
+          <Icon icon={$currentVoiceSession.screenShareOn ? Screencast : ScreenShare} size={4} />
+        </Button>
        <Button
          data-tip="Leave room"
          class="center tooltip tooltip-top btn btn-sm btn-square btn-error"
@@ -4,12 +4,13 @@
 */
 import {
  DisconnectReason,
+  LocalParticipant,
+  LocalTrackPublication,
  Room as LiveKitRoom,
  RoomEvent,
  Track,
  supportsAudioOutputSelection,
  type AudioCaptureOptions,
-  type LocalParticipant,
 } from "livekit-client"
 import {derived, get, writable} from "svelte/store"
 import {map, removeUndefined, uniqBy} from "@welshman/lib"
@@ -33,6 +34,7 @@ export type VoiceSession = {
  room: LiveKitRoom
  muted: boolean
  cameraOn: boolean
+  screenShareOn: boolean
 }

 export type Pubkey = string
@@ -253,6 +255,18 @@ const onParticipantDisconnected = (participant: {identity: string}) => {
  deleteParticipant(participant.identity)
 }

+const onLocalTrackUnpublished = (
+  publication: LocalTrackPublication,
+  participant: LocalParticipant,
+) => {
+  if (publication.source !== Track.Source.ScreenShare) return
+  const session = get(currentVoiceSession)
+  if (!session || participant.identity !== session.room.localParticipant.identity) return
+  if (!session.screenShareOn) return
+  currentVoiceSession.set({...session, screenShareOn: false})
+  bumpVideoCallLayoutRevision()
+}
+
 let joinAbortController: AbortController | undefined

 export const cancelJoinVoiceRoom = () => {
@@ -290,6 +304,7 @@ export const joinVoiceRoom = async (
    liveKitRoom.on(RoomEvent.ParticipantDisconnected, onParticipantDisconnected)
    liveKitRoom.on(RoomEvent.TrackSubscribed, onTrackSubscribed)
    liveKitRoom.on(RoomEvent.TrackUnsubscribed, onTrackUnsubscribed)
+    liveKitRoom.on(RoomEvent.LocalTrackUnpublished, onLocalTrackUnpublished)
    liveKitRoom.on(RoomEvent.ActiveSpeakersChanged, onActiveSpeakersChanged)

    try {
@@ -313,7 +328,14 @@ export const joinVoiceRoom = async (

    const muted = await setUpMicrophone(startMuted, preferredMicId, liveKitRoom.localParticipant)

-    currentVoiceSession.set({url, h, room: liveKitRoom, muted, cameraOn: false})
+    currentVoiceSession.set({
+      url,
+      h,
+      room: liveKitRoom,
+      muted,
+      cameraOn: false,
+      screenShareOn: false,
+    })
    voiceState.set(VoiceState.Connected)
    playJoinSound()
  } catch (e) {
@@ -340,6 +362,14 @@ export const leaveVoiceRoom = async () => {
    }
  }

+  if (session.screenShareOn) {
+    try {
+      await session.room.localParticipant.setScreenShareEnabled(false)
+    } catch {
+      /* pass */
+    }
+  }
+
  voiceState.set(VoiceState.Disconnected)
  videoCallLayoutRevision.set(0)
  currentVoiceSession.set(undefined)
@@ -374,26 +404,29 @@ export const toggleMute = async () => {
  }
 }

-const roomHasSubscribedRemoteCamera = (room: LiveKitRoom): boolean => {
+const VISUAL_SOURCES = [Track.Source.Camera, Track.Source.ScreenShare] as const
+
+const roomHasSubscribedRemoteVisual = (room: LiveKitRoom): boolean => {
  for (const p of room.remoteParticipants.values()) {
-    const pub = p.getTrackPublication(Track.Source.Camera)
-    if (pub?.isSubscribed && pub.track) return true
+    for (const source of VISUAL_SOURCES) {
+      const pub = p.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) return true
+    }
  }
  return false
 }

-/** True when the connected session has local camera on or any subscribed remote camera track. */
+/** True when local camera/screen share is on or any subscribed remote camera/screen track. */
 export const videoCallContentActive = derived(
  [currentVoiceSession, voiceState, videoCallLayoutRevision],
  ([$session, $state, _rev]) => {
    if ($state !== VoiceState.Connected || !$session) return false
-    if ($session.cameraOn) return true
-    return roomHasSubscribedRemoteCamera($session.room)
+    if ($session.cameraOn || $session.screenShareOn) return true
+    return roomHasSubscribedRemoteVisual($session.room)
  },
 )

-/** Live camera tracks (local + remote) for layout automation. */
-const countLiveCameraFeeds = (session: VoiceSession): number => {
+const countLiveVisualFeeds = (session: VoiceSession): number => {
  const room = session.room
  let n = 0
  const lp = room.localParticipant
@@ -401,9 +434,15 @@ const countLiveCameraFeeds = (session: VoiceSession): number => {
    const pub = lp.getTrackPublication(Track.Source.Camera)
    if (pub?.track) n += 1
  }
+  if (session.screenShareOn) {
+    const pub = lp.getTrackPublication(Track.Source.ScreenShare)
+    if (pub?.track) n += 1
+  }
  for (const rp of room.remoteParticipants.values()) {
-    const pub = rp.getTrackPublication(Track.Source.Camera)
-    if (pub?.isSubscribed && pub.track) n += 1
+    for (const source of VISUAL_SOURCES) {
+      const pub = rp.getTrackPublication(source)
+      if (pub?.isSubscribed && pub.track) n += 1
+    }
  }
  return n
 }
@@ -412,7 +451,7 @@ export const videoTileCount = derived(
  [currentVoiceSession, voiceState, videoCallLayoutRevision],
  ([$session, $state, _rev]) => {
    if ($state !== VoiceState.Connected || !$session) return 0
-    return countLiveCameraFeeds($session)
+    return countLiveVisualFeeds($session)
  },
 )

@@ -436,3 +475,24 @@ export const toggleCamera = async () => {
    pushToast({theme: "error", message: "Could not access camera"})
  }
 }
+
+export const toggleScreenShare = async () => {
+  const session = get(currentVoiceSession)
+  if (!session) return
+
+  const screenShareOn = !session.screenShareOn
+  if (!screenShareOn) {
+    session.room.localParticipant.setScreenShareEnabled(false)
+    currentVoiceSession.set({...session, screenShareOn})
+    bumpVideoCallLayoutRevision()
+    return
+  }
+
+  try {
+    await session.room.localParticipant.setScreenShareEnabled(true)
+    currentVoiceSession.set({...session, screenShareOn})
+    bumpVideoCallLayoutRevision()
+  } catch (e) {
+    pushToast({theme: "error", message: "Could not start screen sharing"})
+  }
+}