diff --git a/native-app/src/hooks/useHeliumStreamer.ts b/native-app/src/hooks/useHeliumStreamer.ts index a8030dc..9039fbb 100644 --- a/native-app/src/hooks/useHeliumStreamer.ts +++ b/native-app/src/hooks/useHeliumStreamer.ts @@ -32,6 +32,25 @@ interface UseHeliumStreamerResult { stopSharing: () => void; } +async function applyLowLatencyEncoding( + sender: ReturnType, +): Promise { + const parameters = sender.getParameters(); + + if (!parameters.encodings || parameters.encodings.length === 0) { + return; + } + + parameters.degradationPreference = "maintain-framerate"; + + const [firstEncoding] = parameters.encodings; + firstEncoding.maxBitrate = 1_200_000; + firstEncoding.maxFramerate = 24; + firstEncoding.scaleResolutionDownBy = 2; + + await sender.setParameters(parameters); +} + function serializeIceCandidate(candidate: RTCIceCandidate): NativeIceCandidateInit { const raw = candidate as unknown as { candidate?: string; @@ -125,7 +144,11 @@ export function useHeliumStreamer( setViewerCount(Object.keys(peersRef.current).length); localStream.getTracks().forEach((track) => { - peer.addTrack(track, localStream); + const sender = peer.addTrack(track, localStream); + + if (track.kind === "video") { + void applyLowLatencyEncoding(sender); + } }); peerWithHandlers.onicecandidate = (event): void => { diff --git a/native-app/src/screens/StreamerScreen.tsx b/native-app/src/screens/StreamerScreen.tsx index 8e2cb8d..c408323 100644 --- a/native-app/src/screens/StreamerScreen.tsx +++ b/native-app/src/screens/StreamerScreen.tsx @@ -8,7 +8,6 @@ import { Text, View, } from "react-native"; -import { RTCView } from "react-native-webrtc"; import { useHeliumStreamer } from "../hooks/useHeliumStreamer"; import { useAppTheme } from "../lib/theme"; @@ -30,7 +29,6 @@ export function StreamerScreen() { status, roomCode, viewerCount, - streamUrl, isSharing, startSharing, stopSharing, @@ -150,16 +148,12 @@ export function StreamerScreen() { - {isSharing && streamUrl ? ( - + {isSharing ? ( + + Screen capture active. Preview disabled to reduce latency. + ) : ( - Screen preview appears after sharing starts + Start sharing to broadcast this phone screen )} @@ -278,10 +272,6 @@ function createStyles(theme: ReturnType) { justifyContent: "center", overflow: "hidden", }, - video: { - height: "100%", - width: "100%", - }, previewPlaceholder: { color: theme.mutedForeground, paddingHorizontal: 16,