complete screen share

src/client/src/lib/components/lesson/Container.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { type Call, type StreamVideoParticipant } from '@stream-io/video-client';
-	
+
 	import Participant from './Participant.svelte';
+	import ScreenShare from './ScreenShare.svelte';
 
 	export let call: Call;
 
@@ -19,8 +20,9 @@
 	});
 </script>
 
-<div id="participants">
+<div id="participants" class="flex">
 	{#each participants as participant}
 		<Participant {call} {participant} />
+		<ScreenShare {call} {participant} />
 	{/each}
 </div>

src/client/src/lib/components/lesson/ControlPanel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { type Call } from '@stream-io/video-client';
+	import { goto } from '$app/navigation';
 
 	export let call: Call;
 
@@ -10,24 +11,43 @@
 	function toggleCamera() {
 		call.camera.toggle();
 	}
+
+	function toggleScreenShare() {
+		call.screenShare.toggle();
+	}
+
+	function endCall() {
+		call.leave();
+		goto('/lessons');
+	}
 </script>
 
 <div>
-	<button on:click={toggleMicrophone}>
-		<!-- {#if call.microphone.state.status === 'enabled'}
-			Turn off mic
-		{:else}
-			Turn on mic
-		{/if} -->
-        Mic
+	<button
+		on:click={toggleMicrophone}
+		class="rounded bg-blue-500 px-2 py-1 font-bold text-white hover:bg-blue-700"
+	>
+		Mic
+	</button>
+
+	<button
+		on:click={toggleCamera}
+		class="rounded bg-blue-500 px-2 py-1 font-bold text-white hover:bg-blue-700"
+	>
+		Camera
+	</button>
+
+	<button
+		on:click={toggleScreenShare}
+		class="rounded bg-blue-500 px-2 py-1 font-bold text-white hover:bg-blue-700"
+	>
+		Share Screen
 	</button>
 
-	<button on:click={toggleCamera}>
-		<!-- {#if call.camera.state.status === 'enabled'}
-			Turn off camera
-		{:else}
-			Turn on camera
-		{/if} -->
-        Camera
+	<button
+		on:click={endCall}
+		class="rounded bg-red-500 px-2 py-1 font-bold text-white hover:bg-red-700"
+	>
+		End Call
 	</button>
 </div>

src/client/src/lib/components/lesson/Participant.svelte

@@ -7,7 +7,7 @@
 	export let participant: StreamVideoParticipant;
 </script>
 
-<div>
+<div class="bg-gray-200 m-5">
 	<Video {call} {participant} />
 	<Audio {call} {participant} />
-</div>
+</div>

src/client/src/lib/components/lesson/ScreenShare.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Call, type StreamVideoParticipant } from '@stream-io/video-client';
+
+	export let call: Call;
+	export let participant: StreamVideoParticipant;
+
+	let videoEl: HTMLVideoElement;
+
+	onMount(() => {
+		const unbind = call.bindVideoElement(videoEl, participant.sessionId, 'screenShareTrack');
+		const untrack = call.trackElementVisibility(videoEl, participant.sessionId, 'screenShareTrack');
+
+		return () => {
+			if (unbind) unbind();
+
+			untrack();
+		};
+	});
+</script>
+
+<video
+	bind:this={videoEl}
+	data-session-id={participant.sessionId}
+	width={333}
+	height={250}
+	style="object-fit: contain;"
+>
+	<track kind="captions" />
+</video>

src/client/src/routes/lessons/[id]/+page.svelte

@@ -20,14 +20,14 @@
 			user: { id: $userInfo.username, name: $userInfo.name }
 		});
 
-		call = client.call('default', $page.params.id );
+		call = client.call('default', $page.params.id);
 
+		await call.camera.disable();
+		await call.microphone.disable();
 		await call.join({ create: true });
-		await call.camera.enable();
-		await call.microphone.enable();
 	});
 
-	onDestroy(() => {
+	onDestroy(() : void => {
 		if (call) call.leave();
 		if (client) client.disconnectUser();
 	});