@streamplace/components 0.0.1 → 0.7.0

package/dist/components/mobile-player/player.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { flex, layout, w, zIndex } from "../../lib/theme/atoms";
+import { useSegment } from "../../livestream-store";
+import { PlayerStatus, usePlayerStore, } from "../../player-store";
+import { useStreamplaceStore } from "../../streamplace-store";
+import { Text, View } from "../ui";
+import { Fullscreen } from "./fullscreen";
+const OFFLINE_THRESHOLD = 10000;
+export * as PlayerUI from "./ui";
+export function Player(props) {
+    const playing = usePlayerStore((x) => x.status === PlayerStatus.PLAYING);
+    const setOffline = usePlayerStore((x) => x.setOffline);
+    const setIngest = usePlayerStore((x) => x.setIngestConnectionState);
+    const clearControlsTimeout = usePlayerStore((x) => x.clearControlsTimeout);
+    // Will call back every few seconds to send health updates
+    usePlayerStatus();
+    useEffect(() => {
+        setIngest(props.ingest ? "new" : null);
+    }, []);
+    if (typeof props.src !== "string") {
+        return (_jsx(View, { children: _jsx(Text, { children: "No source provided \uD83E\uDD37" }) }));
+    }
+    useEffect(() => {
+        return () => {
+            clearControlsTimeout();
+        };
+    }, []);
+    const segment = useSegment();
+    const [lastCheck, setLastCheck] = useState(0);
+    useEffect(() => {
+        if (playing) {
+            setOffline(false);
+            return;
+        }
+        if (!segment) {
+            setOffline(false);
+            return;
+        }
+        const startTime = Date.parse(segment.startTime);
+        if (!startTime) {
+            console.error("startTime is not a number", segment.startTime);
+            return;
+        }
+        const timeSinceStart = Date.now() - startTime;
+        if (timeSinceStart > OFFLINE_THRESHOLD) {
+            setOffline(true);
+            return;
+        }
+        const handle = setTimeout(() => {
+            setLastCheck(Date.now());
+        }, 1000);
+        return () => clearTimeout(handle);
+    }, [segment, playing, lastCheck]);
+    return (_jsx(_Fragment, { children: _jsx(View, { style: [zIndex[0], flex.values[1], w.percent[100], layout.flex.center], children: _jsx(Fullscreen, { src: props.src }) }) }));
+}
+const POLL_INTERVAL = 5000;
+export function usePlayerStatus() {
+    const playerStatus = usePlayerStore((x) => x.status);
+    const url = useStreamplaceStore((x) => x.url);
+    const playerEvent = usePlayerStore((x) => x.playerEvent);
+    const [whatDoing, setWhatDoing] = useState(PlayerStatus.START);
+    const [whatDid, setWhatDid] = useState({});
+    const [doingSince, setDoingSince] = useState(Date.now());
+    const [lastUpdated, setLastUpdated] = useState(0);
+    const updateWhatDid = (now) => {
+        const prev = whatDid[whatDoing] ?? 0;
+        const duration = now.getTime() - doingSince;
+        const ret = {
+            ...whatDid,
+            [whatDoing]: prev + duration,
+        };
+        return ret;
+    };
+    // callback to update the status
+    useEffect(() => {
+        const now = new Date();
+        if (playerStatus !== whatDoing) {
+            setWhatDid(updateWhatDid(now));
+            setWhatDoing(playerStatus);
+            setDoingSince(now.getTime());
+        }
+    }, [playerStatus]);
+    useEffect(() => {
+        if (lastUpdated === 0) {
+            return;
+        }
+        const now = new Date();
+        const fullWhatDid = updateWhatDid(now);
+        setWhatDid({});
+        setDoingSince(now.getTime());
+        playerEvent(url, now.toISOString(), "aq-played", {
+            whatHappened: fullWhatDid,
+        });
+    }, [lastUpdated]);
+    useEffect(() => {
+        const interval = setInterval((_) => {
+            setLastUpdated(Date.now());
+        }, POLL_INTERVAL);
+        return () => clearInterval(interval);
+    }, []);
+    return [whatDoing];
+}

package/dist/components/mobile-player/props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/mobile-player/shared.js

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { PlayerProtocol, useStreamplaceStore } from "../..";
+const protocolSuffixes = {
+    m3u8: PlayerProtocol.HLS,
+    mp4: PlayerProtocol.PROGRESSIVE_MP4,
+    webm: PlayerProtocol.PROGRESSIVE_WEBM,
+    webrtc: PlayerProtocol.WEBRTC,
+};
+export function srcToUrl(props, protocol) {
+    const url = useStreamplaceStore((x) => x.url);
+    return useMemo(() => {
+        if (props.src.startsWith("http://") || props.src.startsWith("https://")) {
+            const segments = props.src.split(/[./]/);
+            const suffix = segments[segments.length - 1];
+            if (protocolSuffixes[suffix]) {
+                return {
+                    url: props.src,
+                    protocol: protocolSuffixes[suffix],
+                };
+            }
+            else {
+                throw new Error(`unknown playback protocol: ${suffix}`);
+            }
+        }
+        let outUrl;
+        if (protocol === PlayerProtocol.HLS) {
+            if (props.selectedRendition === "auto") {
+                outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8`;
+            }
+            else {
+                outUrl = `${url}/api/playback/${props.src}/hls/index.m3u8?rendition=${props.selectedRendition || "source"}`;
+            }
+        }
+        else if (protocol === PlayerProtocol.PROGRESSIVE_MP4) {
+            outUrl = `${url}/api/playback/${props.src}/stream.mp4`;
+        }
+        else if (protocol === PlayerProtocol.PROGRESSIVE_WEBM) {
+            outUrl = `${url}/api/playback/${props.src}/stream.webm`;
+        }
+        else if (protocol === PlayerProtocol.WEBRTC) {
+            outUrl = `${url}/api/playback/${props.src}/webrtc?rendition=${props.selectedRendition || "source"}`;
+        }
+        else {
+            throw new Error(`unknown playback protocol: ${protocol}`);
+        }
+        return {
+            protocol: protocol,
+            url: outUrl,
+        };
+    }, [props.src, props.selectedRendition, protocol, url]);
+}

package/dist/components/mobile-player/ui/countdown.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Animated, { runOnJS, useAnimatedStyle, useFrameCallback, useSharedValue, withTiming, } from "react-native-reanimated";
+export function CountdownOverlay({ visible, width, height, startFrom = 3, onDone, }) {
+    const [countdown, setCountdown] = useState(startFrom);
+    const startTimestamp = useSharedValue(null);
+    const done = useSharedValue(false);
+    // Animation values
+    const scale = useSharedValue(1);
+    const opacity = useSharedValue(1);
+    const updateCountdown = (value) => {
+        setCountdown(value);
+    };
+    const handleDone = () => {
+        if (onDone)
+            onDone();
+    };
+    // Accurate countdown using useFrameCallback
+    useFrameCallback(({ timestamp }) => {
+        if (!visible)
+            return;
+        // Set start timestamp on first frame
+        if (startTimestamp.value === null) {
+            startTimestamp.value = timestamp;
+            return;
+        }
+        const elapsed = (timestamp - startTimestamp.value) / 1000; // Convert to seconds
+        const remaining = Math.max(0, startFrom - Math.floor(elapsed));
+        // Use runOnJS to call JavaScript functions from worklet
+        runOnJS(updateCountdown)(remaining);
+        if (remaining === 0 && !done.value) {
+            done.value = true;
+            runOnJS(handleDone)();
+        }
+    });
+    useEffect(() => {
+        if (visible) {
+            startTimestamp.value = null; // Will be set on first frame
+            setCountdown(startFrom);
+            done.value = false;
+        }
+        else {
+            setCountdown(startFrom);
+        }
+    }, [visible, startFrom]);
+    // Animate scale and opacity on countdown change
+    useEffect(() => {
+        if (visible && countdown > 0) {
+            scale.value = 1;
+            opacity.value = 1;
+            scale.value = withTiming(1.5, { duration: 1000 });
+            opacity.value = withTiming(0, { duration: 1000 });
+        }
+    }, [countdown, visible, scale, opacity]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scale.value }],
+        opacity: opacity.value,
+    }));
+    if (!visible || countdown === 0)
+        return null;
+    return (_jsx(Animated.View, { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width,
+            height,
+            backgroundColor: "rgba(0,0,0,0.7)",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1000,
+        }, children: _jsx(Animated.Text, { style: [
+                {
+                    color: "white",
+                    fontSize: 120,
+                    fontWeight: "bold",
+                },
+                animatedStyle,
+            ], children: typeof countdown === "number" ? countdown : "" }) }));
+}

package/dist/components/mobile-player/ui/index.js

@@ -0,0 +1,5 @@
+export * from "./countdown";
+export * from "./input";
+export * from "./metrics";
+export * from "./streamer-context-menu";
+export * from "./viewer-context-menu";

package/dist/components/mobile-player/ui/input.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Keyboard, Pressable } from "react-native";
+import { useKeyboardSlide } from "../../../hooks";
+import * as atoms from "../../../lib/theme/atoms";
+import { Input, Text, View } from "../../ui";
+const { gap, h, layout, mt, p, position, px, py, sizes, w } = atoms;
+export function InputPanel({ title, setTitle, ingestStarting, toggleGoLive, }) {
+    const { slideKeyboard } = useKeyboardSlide();
+    return (_jsx(View, { style: [
+            layout.position.absolute,
+            h.percent[30],
+            position.bottom[0],
+            w.percent[100],
+            layout.flex.center,
+            { transform: [{ translateY: slideKeyboard }] },
+        ], children: _jsxs(View, { style: [
+                layout.flex.column,
+                gap.all[2],
+                sizes.maxWidth[80],
+                { padding: 10 },
+            ], children: [_jsx(View, { backgroundColor: "rgba(64,64,64,0.8)", borderRadius: 12, children: _jsx(Input, { value: title, onChange: setTitle, placeholder: "Enter stream title", onEndEditing: Keyboard.dismiss }) }), ingestStarting ? (_jsx(Text, { children: "Starting your stream..." })) : (_jsxs(View, { style: [layout.flex.center], children: [_jsxs(Pressable, { onPress: toggleGoLive, style: [
+                                px[4],
+                                py[2],
+                                layout.flex.row,
+                                layout.flex.center,
+                                gap.all[1],
+                                {
+                                    backgroundColor: "rgba(64,64,64, 0.8)",
+                                    borderRadius: 12,
+                                },
+                            ], children: [_jsx(View, { style: [
+                                        p[2],
+                                        {
+                                            backgroundColor: "rgba(256,0,0, 0.8)",
+                                            borderRadius: 12,
+                                        },
+                                    ] }), _jsx(Text, { center: true, children: "Go Live" })] }), _jsx(Text, { color: "muted", size: "xs", style: [mt[2]], children: "We'll announce that you're live on Bluesky." })] }))] }) }));
+}

package/dist/components/mobile-player/ui/metrics.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, CircleCheck, CircleX } from "lucide-react-native";
+import { useSegmentTiming } from "../../../hooks/useSegmentTiming";
+import * as atoms from "../../../lib/theme/atoms";
+import { Text, View } from "../../ui";
+export function MetricsPanel({ showMetrics }) {
+    const { connectionQuality, segmentDeltas, mean, range } = useSegmentTiming();
+    let icon = _jsx(CircleX, { color: "#d44" });
+    let color = "#d44";
+    if (connectionQuality === "good") {
+        icon = _jsx(CircleCheck, { color: "#4d4" });
+        color = "#4d4";
+    }
+    else if (connectionQuality === "degraded") {
+        icon = _jsx(AlertCircle, { color: "#aa4" });
+        color = "#aa4";
+    }
+    else {
+        icon = _jsx(CircleX, { color: "#d44" });
+        color = "#d44";
+    }
+    return (_jsxs(View, { style: {
+            alignItems: "center",
+            gap: 8,
+        }, children: [_jsxs(View, { style: {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    padding: 10,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    borderRadius: 8,
+                    gap: 4,
+                }, children: [icon, _jsx(Text, { style: [
+                            atoms.pt[0],
+                            {
+                                color,
+                            },
+                        ], children: connectionQuality.toUpperCase() })] }), showMetrics && (_jsxs(View, { children: [_jsxs(Text, { children: ["last \u0394:", " ", segmentDeltas.length > 0
+                                ? segmentDeltas[segmentDeltas.length - 1]
+                                : "—"] }), _jsxs(Text, { children: ["mean: ", mean] }), _jsxs(Text, { children: ["range: ", range] })] }))] }));
+}

package/dist/components/mobile-player/ui/streamer-context-menu.js

@@ -0,0 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export function StreamContextMenu() {
+    return _jsx(_Fragment, {});
+}

package/dist/components/mobile-player/ui/viewer-context-menu.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu } from "lucide-react-native";
+import { colors } from "../../../lib/theme";
+import { useLivestreamStore } from "../../../livestream-store";
+import { PlayerProtocol, usePlayerStore } from "../../../player-store/";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuInfo, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, ResponsiveDropdownMenuContent, Text, } from "../../ui";
+export function ContextMenu() {
+    const quality = usePlayerStore((x) => x.selectedRendition);
+    const setQuality = usePlayerStore((x) => x.setSelectedRendition);
+    const qualities = useLivestreamStore((x) => x.renditions);
+    const protocol = usePlayerStore((x) => x.protocol);
+    const setProtocol = usePlayerStore((x) => x.setProtocol);
+    const debugInfo = usePlayerStore((x) => x.showDebugInfo);
+    const setShowDebugInfo = usePlayerStore((x) => x.setShowDebugInfo);
+    const lowLatency = protocol === "webrtc";
+    const setLowLatency = (value) => {
+        setProtocol(value ? PlayerProtocol.WEBRTC : PlayerProtocol.HLS);
+    };
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Menu, { size: 32, color: colors.gray[200] }) }), _jsxs(ResponsiveDropdownMenuContent, { children: [_jsx(DropdownMenuGroup, { title: "Resolution", children: _jsxs(DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [_jsx(DropdownMenuRadioItem, { value: "source", children: _jsx(Text, { children: "Source" }) }), qualities.map((r) => (_jsx(DropdownMenuRadioItem, { value: r.name, children: _jsx(Text, { children: r.name }) })))] }) }), _jsxs(DropdownMenuGroup, { title: "Advanced", children: [_jsx(DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: _jsx(Text, { children: "Low Latency" }) }), _jsx(DropdownMenuInfo, { description: "Lowers the delay between video and chat messages." }), _jsx(DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: _jsx(Text, { children: "Segment Debug Info" }) })] }), _jsx(DropdownMenuInfo, { description: "Lowers the delay between video and chat messages." })] })] }));
+}

package/dist/components/mobile-player/use-webrtc.js

@@ -0,0 +1,232 @@
+import { useEffect, useRef, useState } from "react";
+import { usePlayerStore, useStreamKey } from "../..";
+import { RTCPeerConnection, RTCSessionDescription } from "./webrtc-primitives";
+export default function useWebRTC(endpoint) {
+    const [mediaStream, setMediaStream] = useState(null);
+    const [stuck, setStuck] = useState(false);
+    const lastChange = useRef(0);
+    useEffect(() => {
+        const peerConnection = new RTCPeerConnection({
+            bundlePolicy: "max-bundle",
+        });
+        peerConnection.addTransceiver("video", {
+            direction: "recvonly",
+        });
+        peerConnection.addTransceiver("audio", {
+            direction: "recvonly",
+        });
+        peerConnection.addEventListener("track", (event) => {
+            const track = event.track;
+            if (!track) {
+                return;
+            }
+            setMediaStream(event.streams[0]);
+        });
+        peerConnection.addEventListener("connectionstatechange", () => {
+            console.log("connection state change", peerConnection.connectionState);
+            if (peerConnection.connectionState === "closed") {
+                setStuck(true);
+            }
+            if (peerConnection.connectionState !== "connected") {
+                return;
+            }
+        });
+        peerConnection.addEventListener("negotiationneeded", () => {
+            negotiateConnectionWithClientOffer(peerConnection, endpoint);
+        });
+        let lastFramesReceived = 0;
+        let lastAudioFramesReceived = 0;
+        const handle = setInterval(async () => {
+            const stats = await peerConnection.getStats();
+            stats.forEach((stat) => {
+                const mediaType = stat.mediaType /* web */ ?? stat.kind; /* native */
+                if (stat.type === "inbound-rtp" && mediaType === "audio") {
+                    const audioFramesReceived = stat.lastPacketReceivedTimestamp;
+                    if (lastAudioFramesReceived !== audioFramesReceived) {
+                        lastAudioFramesReceived = audioFramesReceived;
+                        lastChange.current = Date.now();
+                        setStuck(false);
+                    }
+                }
+                if (stat.type === "inbound-rtp" && mediaType === "video") {
+                    const framesReceived = stat.framesReceived;
+                    if (lastFramesReceived !== framesReceived) {
+                        lastFramesReceived = framesReceived;
+                        lastChange.current = Date.now();
+                        setStuck(false);
+                    }
+                }
+            });
+            if (Date.now() - lastChange.current > 2000) {
+                setStuck(true);
+            }
+        }, 200);
+        return () => {
+            clearInterval(handle);
+            peerConnection.close();
+        };
+    }, [endpoint]);
+    return [mediaStream, stuck];
+}
+/**
+ * Performs the actual SDP exchange.
+ *
+ * 1. Constructs the client's SDP offer
+ * 2. Sends the SDP offer to the server,
+ * 3. Awaits the server's offer.
+ *
+ * SDP describes what kind of media we can send and how the server and client communicate.
+ *
+ * https://developer.mozilla.org/en-US/docs/Glossary/SDP
+ * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html#name-protocol-operation
+ */
+export async function negotiateConnectionWithClientOffer(peerConnection, endpoint, bearerToken) {
+    /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer */
+    const offer = await peerConnection.createOffer({
+        offerToReceiveAudio: true,
+        offerToReceiveVideo: true,
+    });
+    /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription */
+    await peerConnection.setLocalDescription(offer);
+    /** Wait for ICE gathering to complete */
+    let ofr = await waitToCompleteICEGathering(peerConnection);
+    if (!ofr) {
+        throw Error("failed to gather ICE candidates for offer");
+    }
+    /**
+     * As long as the connection is open, attempt to...
+     */
+    while (peerConnection.connectionState !== "closed") {
+        try {
+            /**
+             * This response contains the server's SDP offer.
+             * This specifies how the client should communicate,
+             * and what kind of media client and server have negotiated to exchange.
+             */
+            let response = await postSDPOffer(`${endpoint}`, ofr.sdp, bearerToken);
+            if (response.status === 201) {
+                let answerSDP = await response.text();
+                if (peerConnection.connectionState === "closed") {
+                    return;
+                }
+                await peerConnection.setRemoteDescription(new RTCSessionDescription({ type: "answer", sdp: answerSDP }));
+                return response.headers.get("Location");
+            }
+            else if (response.status === 405) {
+                console.log("Remember to update the URL passed into the WHIP or WHEP client");
+            }
+            else {
+                const errorMessage = await response.text();
+                console.error(errorMessage);
+            }
+        }
+        catch (e) {
+            console.error(`posting sdp offer failed: ${e}`);
+        }
+        /** Limit reconnection attempts to at-most once every 5 seconds */
+        await new Promise((r) => setTimeout(r, 5000));
+    }
+}
+async function postSDPOffer(endpoint, data, bearerToken) {
+    return await fetch(endpoint, {
+        method: "POST",
+        mode: "cors",
+        headers: {
+            "content-type": "application/sdp",
+            ...(bearerToken ? { Authorization: `Bearer ${bearerToken}` } : {}),
+        },
+        body: data,
+    });
+}
+/**
+ * Receives an RTCPeerConnection and waits until
+ * the connection is initialized or a timeout passes.
+ *
+ * https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html#section-4.1
+ * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/iceGatheringState
+ * https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/icegatheringstatechange_event
+ */
+async function waitToCompleteICEGathering(peerConnection) {
+    return new Promise((resolve) => {
+        /** Wait at most 1 second for ICE gathering. */
+        setTimeout(function () {
+            if (peerConnection.connectionState === "closed") {
+                return;
+            }
+            resolve(peerConnection.localDescription);
+        }, 1000);
+        peerConnection.addEventListener("icegatheringstatechange", (ev) => {
+            if (peerConnection.iceGatheringState === "complete") {
+                resolve(peerConnection.localDescription);
+            }
+        });
+    });
+}
+export function useWebRTCIngest({ endpoint, }) {
+    const [mediaStream, setMediaStream] = useState(null);
+    const ingestConnectionState = usePlayerStore((x) => x.ingestConnectionState);
+    const setIngestConnectionState = usePlayerStore((x) => x.setIngestConnectionState);
+    const storedKey = useStreamKey();
+    const [peerConnection, setPeerConnection] = useState(null);
+    const videoTransceiver = useRef(null);
+    const audioTransceiver = useRef(null);
+    const [retryTime, setRetryTime] = useState(0);
+    const ingestLive = usePlayerStore((x) => x.ingestLive);
+    // "Outer loop": when we need a new peer connection, this sets that up
+    useEffect(() => {
+        if (!storedKey) {
+            return;
+        }
+        if (!ingestLive) {
+            return;
+        }
+        const peerConnection = new RTCPeerConnection({
+            bundlePolicy: "max-bundle",
+        });
+        videoTransceiver.current = peerConnection.addTransceiver("video", {
+            direction: "sendonly",
+        });
+        audioTransceiver.current = peerConnection.addTransceiver("audio", {
+            direction: "sendonly",
+        });
+        peerConnection.addEventListener("connectionstatechange", (ev) => {
+            setIngestConnectionState(peerConnection.connectionState);
+            console.log("connection state change", peerConnection.connectionState);
+            if (peerConnection.connectionState === "failed") {
+                setRetryTime(Date.now());
+            }
+        });
+        peerConnection.addEventListener("negotiationneeded", (ev) => {
+            negotiateConnectionWithClientOffer(peerConnection, endpoint, storedKey.streamKey?.privateKey);
+        });
+        peerConnection.addEventListener("track", (ev) => {
+            console.log(ev);
+        });
+        setPeerConnection(peerConnection);
+        return () => {
+            peerConnection.close();
+        };
+    }, [endpoint, storedKey.streamKey?.privateKey, retryTime, ingestLive]);
+    // "Inner loop": when our tracks change, we update the transceivers
+    useEffect(() => {
+        if (!mediaStream) {
+            return;
+        }
+        if (!peerConnection) {
+            return;
+        }
+        if (!ingestLive) {
+            return;
+        }
+        for (const track of mediaStream.getTracks()) {
+            console.log("adding track", track.kind, track.label, track.enabled, track.readyState);
+            if (track.kind === "video") {
+                videoTransceiver.current?.sender?.replaceTrack(track);
+            }
+            else if (track.kind === "audio") {
+                audioTransceiver.current?.sender?.replaceTrack(track);
+            }
+        }
+    }, [peerConnection, mediaStream, ingestLive]);
+    return [mediaStream, setMediaStream];
+}