framerate configuration (in progress)

Author: PiterWeb

frontend/src/lib/webrtc/stream/host_stream_hook.ts

@@ -33,14 +33,17 @@ resolutions.set(fixedResolutions.resolution720p,{width: 1280, height: 720})
 resolutions.set(fixedResolutions.resolution480p, {width:854, height: 480})
 resolutions.set(fixedResolutions.resolution360p, {width: 640, height:360})
 
+const DEFAULT_MAX_FRAMERATE = 60
+const DEFAULT_IDEAL_FRAMERATE = 30
+
 let stream: MediaStream | undefined
 let unlistenerStreamingSignal: (() => void) | undefined
 
-async function getDisplayMediaStream(resolution: fixedResolutions = fixedResolutions.resolution720p) {
+async function getDisplayMediaStream(resolution: fixedResolutions = fixedResolutions.resolution720p, idealFrameRate = DEFAULT_IDEAL_FRAMERATE, maxFramerate = DEFAULT_MAX_FRAMERATE) {
 	try {
 		const mediastream = await navigator.mediaDevices.getDisplayMedia({
 			video: { 
-				frameRate: { ideal:30, max: 60 },
+				frameRate: { ideal: idealFrameRate, max: maxFramerate },
 				...(resolutions.get(resolution) ?? {}),
 				noiseSuppression: true, 
 				autoGainControl: true,
@@ -73,7 +76,7 @@ export function StopStreaming() {
 	}
 }
 
-export function CreateHostStream(resolution: fixedResolutions = fixedResolutions.resolution720p) {
+export function CreateHostStream(resolution: fixedResolutions = fixedResolutions.resolution720p, idealFrameRate = DEFAULT_IDEAL_FRAMERATE, maxFramerate = DEFAULT_MAX_FRAMERATE) {
 	initStreamingPeerConnection();
 
 	if (!peerConnection) {
@@ -135,9 +138,8 @@ export function CreateHostStream(resolution: fixedResolutions = fixedResolutions
 				if (!offer || offerArrived) return;
 				await peerConnection.setRemoteDescription(offer);
 				offerArrived = true
-				console.log("displaymedia");
 				// eslint-disable-next-line no-case-declarations
-				stream = await getDisplayMediaStream(resolution);
+				stream = await getDisplayMediaStream(resolution, idealFrameRate, maxFramerate);
 
 				stream?.getTracks().forEach((track) => {
 					if (!stream) return
@@ -149,7 +151,7 @@ export function CreateHostStream(resolution: fixedResolutions = fixedResolutions
 					}
 					params.encodings.forEach((_, i) => {
 						params.encodings[i].maxBitrate =  5_000_000
-						params.encodings[i].maxFramerate = 60
+						params.encodings[i].maxFramerate = maxFramerate
 						// params.encodings[i].scaleResolutionDownBy = 1.25
 						params.encodings[i].priority = "high"
 					})

frontend/src/routes/mode/host/connection/+page.svelte

@@ -3,11 +3,15 @@
 	import { ListenForConnectionChanges } from '$lib/webrtc/host_webrtc_hook';
 	import { _ } from 'svelte-i18n'
 	import { streaming } from "$lib/webrtc/stream/stream_signal_hook.svelte";
+	import { slide } from 'svelte/transition';
 
 	import { onMount } from 'svelte';
+	import { elasticOut } from 'svelte/easing';
 
 	let selected_resolution = $state(fixedResolutions.resolution720p)
 
+	let idealFramerate = $state(25)
+
 	function createStream() {
 		CreateHostStream(selected_resolution);
 		streaming.value = true;
@@ -18,13 +22,43 @@
 	});
 </script>
 
-<div class:hidden={streaming.value} class="w-full h-full">
-	<h2>{$_("resolutions")}</h2>
-	<select class="select select-primary w-full max-w-xs"  bind:value={selected_resolution} id="resolution" aria-label="Default select example">
-		{#each Object.values(fixedResolutions) as resolution}
-			<option selected={resolution === selected_resolution} value={resolution}>{resolution}</option>
-		{/each}
-	</select>
+<div class:hidden={streaming.value} class="w-full h-full grid grid-rows-2 grid-cols-1 gap-10">
+	<div class="w-full h-full">
+		<h3>{$_("resolutions")}</h3>
+		<select class="select select-primary w-full max-w-xs mt-6"  bind:value={selected_resolution} id="resolution" aria-label="Default select example">
+			{#each Object.values(fixedResolutions) as resolution}
+			<option selected={resolution === selected_resolution} value={resolution}>{resolution}p</option>
+			{/each}
+		</select>
+	</div>
+	<div class="w-full h-full">
+		<h3 class="">{$_("framerate")}</h3>
+		<div class="flex flex-row gap-10 h-full w-full mt-6">
+			<div class="w-full h-full flex flex-col">
+				<h4>{$_("ideal-framerate")}</h4>
+				<div class="w-10 h-10 bg-neutral">
+					{#key idealFramerate}
+						<p transition:slide={{easing: elasticOut }} class="text-white text-center">
+							{idealFramerate}
+						</p>
+					{/key}
+				</div>
+				<input type="range" min="25" max="145" bind:value={idealFramerate} class="range range-lg" step="5" />
+				
+			</div>
+			<div class="w-full h-full flex flex-col">
+				<h4>{$_("max-framerate")}</h4>
+				<input type="range" min="30" max="150" value="30" class="range range-lg" step="30" />
+				<div class="flex w-full justify-between px-2 text-xs">
+				<span>30</span>
+				<span>60</span>
+				<span>90</span>
+				<span>120</span>
+				<span>150</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>
 
 <button onclick={createStream} disabled={streaming.value} class="btn btn-primary">{$_('start-streaming')}</button>