@streamplace/components 0.0.1 → 0.7.0

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

@@ -0,0 +1,375 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Hls from "hls.js";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { IngestMediaSource, PlayerProtocol, PlayerStatus, usePlayerStore, useStreamplaceStore, } from "../..";
+import { borderRadius, colors, mt, p } from "../../lib/theme/atoms";
+import { Text, View } from "../ui/index";
+import { srcToUrl } from "./shared";
+import useWebRTC, { useWebRTCIngest } from "./use-webrtc";
+import { logWebRTCDiagnostics, useWebRTCDiagnostics, } from "./webrtc-diagnostics";
+import { checkWebRTCSupport } from "./webrtc-primitives";
+function assignVideoRef(ref, instance) {
+    if (!ref)
+        return;
+    if (typeof ref === "function")
+        ref(instance);
+    else
+        ref.current = instance;
+}
+function useVideoDimensions(videoRef) {
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        if (!videoRef.current)
+            return;
+        function updateSize() {
+            setDimensions({
+                width: videoRef.current?.videoWidth || 0,
+                height: videoRef.current?.videoHeight || 0,
+            });
+        }
+        updateSize();
+        const observer = new window.ResizeObserver(updateSize);
+        observer.observe(videoRef.current);
+        videoRef.current.addEventListener("loadedmetadata", updateSize);
+        videoRef.current.addEventListener("resize", updateSize);
+        return () => {
+            observer.disconnect();
+            videoRef.current?.removeEventListener("loadedmetadata", updateSize);
+            videoRef.current?.removeEventListener("resize", updateSize);
+        };
+    }, [videoRef, videoRef.current]);
+    return dimensions;
+}
+export default function WebVideo() {
+    const inProto = usePlayerStore((x) => x.protocol);
+    const isIngesting = usePlayerStore((x) => x.ingestConnectionState !== null);
+    const selectedRendition = usePlayerStore((x) => x.selectedRendition);
+    const src = usePlayerStore((x) => x.src);
+    const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
+    const setPlayerHeight = usePlayerStore((x) => x.setPlayerHeight);
+    const { url, protocol } = srcToUrl({ src: src, selectedRendition }, inProto);
+    const videoRef = useRef(null);
+    const dimensions = useVideoDimensions(videoRef);
+    useEffect(() => {
+        if (videoRef.current) {
+            setPlayerWidth(dimensions.width);
+            setPlayerHeight(dimensions.height);
+        }
+    }, [dimensions, setPlayerWidth, setPlayerHeight]);
+    const playerProps = { url, videoRef };
+    return (_jsx(_Fragment, { children: isIngesting ? (_jsx(WebcamIngestPlayer, { ...playerProps })) : protocol === PlayerProtocol.PROGRESSIVE_MP4 ? (_jsx(ProgressiveMP4Player, { ...playerProps })) : protocol === PlayerProtocol.PROGRESSIVE_WEBM ? (_jsx(ProgressiveWebMPlayer, { ...playerProps })) : protocol === PlayerProtocol.HLS ? (_jsx(HLSPlayer, { ...playerProps })) : protocol === PlayerProtocol.WEBRTC ? (_jsx(WebRTCPlayer, { ...playerProps })) : ((() => {
+            throw new Error(`unknown playback protocol ${inProto}`);
+        })()) }));
+}
+const updateEvents = {
+    playing: true,
+    waiting: true,
+    stalled: true,
+    pause: true,
+    suspend: true,
+    mute: true,
+};
+const VideoElement = forwardRef((props, ref) => {
+    const x = usePlayerStore((x) => x);
+    const url = useStreamplaceStore((x) => x.url);
+    const playerEvent = usePlayerStore((x) => x.playerEvent);
+    const setMuted = usePlayerStore((x) => x.setMuted);
+    const setMuteWasForced = usePlayerStore((x) => x.setMuteWasForced);
+    const muted = usePlayerStore((x) => x.muted);
+    const ingest = usePlayerStore((x) => x.ingestConnectionState !== null);
+    const volume = usePlayerStore((x) => x.volume);
+    const setStatus = usePlayerStore((x) => x.setStatus);
+    const setUserInteraction = usePlayerStore((x) => x.setUserInteraction);
+    const setVideoRef = usePlayerStore((x) => x.setVideoRef);
+    const event = (evType) => (e) => {
+        console.log(evType);
+        const now = new Date();
+        if (updateEvents[evType]) {
+            x.setStatus(evType);
+        }
+        console.log("Sending", evType, "status to", url);
+        playerEvent(url, now.toISOString(), evType, {});
+    };
+    const [firstAttempt, setFirstAttempt] = useState(true);
+    const localVideoRef = props.videoRef ?? useRef(null);
+    const canPlayThrough = (e) => {
+        event("canplaythrough")(e);
+        if (firstAttempt && localVideoRef.current) {
+            setFirstAttempt(false);
+            localVideoRef.current.play().catch((err) => {
+                if (err.name === "NotAllowedError") {
+                    if (localVideoRef.current) {
+                        setMuted(true);
+                        localVideoRef.current.muted = true;
+                        localVideoRef.current
+                            .play()
+                            .then(() => {
+                            console.warn("Browser forced video to start muted");
+                            setMuteWasForced(true);
+                        })
+                            .catch((err) => {
+                            console.error("error playing video", err);
+                        });
+                    }
+                }
+            });
+        }
+    };
+    useEffect(() => {
+        return () => {
+            setStatus(PlayerStatus.START);
+        };
+    }, []);
+    useEffect(() => {
+        if (localVideoRef.current) {
+            localVideoRef.current.volume = volume;
+            console.log("Setting volume to", volume);
+        }
+    }, [volume]);
+    useEffect(() => {
+        console.log(localVideoRef.current?.width, localVideoRef.current?.height);
+        setVideoRef(localVideoRef);
+    }, [setVideoRef, localVideoRef]);
+    const handleVideoRef = (videoElement) => {
+        if (typeof ref === "function") {
+            ref(videoElement);
+        }
+        else if (ref) {
+            ref.current =
+                videoElement;
+        }
+        // if (localVideoRef && typeof localVideoRef !== "function") {
+        //   localVideoRef.current = videoElement;
+        // }
+    };
+    return (_jsx("video", { autoPlay: true, playsInline: true, ref: handleVideoRef, controls: false, src: ingest ? undefined : props.url, muted: muted, crossOrigin: "anonymous", onMouseMove: setUserInteraction, onClick: setUserInteraction, onAbort: event("abort"), onCanPlay: event("canplay"), onCanPlayThrough: canPlayThrough, onEmptied: event("emptied"), onEncrypted: event("encrypted"), onEnded: event("ended"), onError: event("error"), onLoadedData: event("loadeddata"), onLoadedMetadata: event("loadedmetadata"), onLoadStart: event("loadstart"), onPause: event("pause"), onPlay: event("play"), onPlaying: event("playing"), onRateChange: event("ratechange"), onSeeked: event("seeked"), onSeeking: event("seeking"), onStalled: event("stalled"), onSuspend: event("suspend"), onVolumeChange: event("volumechange"), onWaiting: event("waiting"), style: {
+            objectFit: "contain",
+            backgroundColor: "transparent",
+            width: "100%",
+            height: "100%",
+            transform: ingest ? "scaleX(-1)" : undefined,
+        } }));
+});
+export function ProgressiveMP4Player(props) {
+    return _jsx(VideoElement, { ...props });
+}
+export function ProgressiveWebMPlayer(props) {
+    return _jsx(VideoElement, { ...props });
+}
+export function HLSPlayer(props) {
+    const localRef = useRef(null);
+    useEffect(() => {
+        if (!localRef.current) {
+            return;
+        }
+        if (Hls.isSupported()) {
+            var hls = new Hls({ maxAudioFramesDrift: 20 });
+            hls.loadSource(props.url);
+            try {
+                hls.attachMedia(localRef.current);
+            }
+            catch (e) {
+                console.error("error on attachMedia");
+                hls.stopLoad();
+                return;
+            }
+            hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                if (!localRef.current) {
+                    return;
+                }
+                localRef.current.play();
+            });
+            return () => {
+                hls.stopLoad();
+            };
+        }
+        else if (localRef.current.canPlayType("application/vnd.apple.mpegurl")) {
+            localRef.current.src = props.url;
+            localRef.current.addEventListener("canplay", () => {
+                if (!localRef.current) {
+                    return;
+                }
+                localRef.current.play();
+            });
+        }
+    }, [props.url]);
+    return _jsx(VideoElement, { ...props, ref: localRef });
+}
+export function WebRTCPlayer(props) {
+    const [webrtcError, setWebrtcError] = useState(null);
+    const setStatus = usePlayerStore((x) => x.setStatus);
+    const setProtocol = usePlayerStore((x) => x.setProtocol);
+    const diagnostics = useWebRTCDiagnostics();
+    // Check WebRTC compatibility on component mount
+    useEffect(() => {
+        try {
+            checkWebRTCSupport();
+            console.log("WebRTC Player - Browser compatibility check passed");
+            logWebRTCDiagnostics();
+        }
+        catch (error) {
+            console.error("WebRTC Player - Compatibility error:", error.message);
+            setWebrtcError(error.message);
+            setStatus(PlayerStatus.START);
+            return;
+        }
+    }, []);
+    // Monitor diagnostics for errors
+    useEffect(() => {
+        if (!diagnostics.browserSupport && diagnostics.errors.length > 0) {
+            setWebrtcError(diagnostics.errors.join(", "));
+        }
+    }, [diagnostics]);
+    if (!diagnostics.done)
+        return _jsx(_Fragment, {});
+    if (webrtcError) {
+        setProtocol(PlayerProtocol.HLS);
+        return (_jsx(View, { backgroundColor: "#111", children: _jsxs(View, { children: [_jsx(View, { children: _jsx(Text, { children: "WebRTC Not Supported" }) }), _jsx(Text, { children: webrtcError }), diagnostics.errors.length > 0 && (_jsxs(View, { children: [_jsx(Text, { children: "Technical Details:" }), diagnostics.errors.map((error, index) => (_jsxs(Text, { children: ["\u2022 ", error] }, index)))] })), _jsx(Text, { children: "\u2022 To use WebRTC, you may need to disable any blocking extensions or update your browser." }), _jsx(Text, { style: [mt[2]], children: "Switching to HLS..." })] }) }));
+    }
+    return _jsx(WebRTCPlayerInner, { url: props.url, videoRef: props.videoRef });
+}
+export function WebRTCPlayerInner({ videoRef, url, width, height, }) {
+    const [connectionStatus, setConnectionStatus] = useState("initializing");
+    const status = usePlayerStore((x) => x.status);
+    const setStatus = usePlayerStore((x) => x.setStatus);
+    const playerEvent = usePlayerStore((x) => x.playerEvent);
+    const spurl = useStreamplaceStore((x) => x.url);
+    const [mediaStream, stuck] = useWebRTC(url);
+    useEffect(() => {
+        if (stuck) {
+            setConnectionStatus("connection-failed");
+        }
+        else if (mediaStream) {
+            setConnectionStatus("connected");
+        }
+        else {
+            setConnectionStatus("connecting");
+        }
+    }, [url, mediaStream, stuck, status]);
+    useEffect(() => {
+        if (stuck && status === PlayerStatus.PLAYING) {
+            setStatus(PlayerStatus.STALLED);
+        }
+        if (!stuck && mediaStream) {
+            setStatus(PlayerStatus.PLAYING);
+        }
+    }, [stuck, status, mediaStream]);
+    useEffect(() => {
+        if (!mediaStream) {
+            return;
+        }
+        const evt = (evType) => (e) => {
+            console.log("webrtc event", evType);
+            playerEvent(spurl, new Date().toISOString(), evType, {});
+        };
+        const active = evt("active");
+        const inactive = evt("inactive");
+        const ended = evt("ended");
+        const mute = evt("mute");
+        const unmute = evt("playing");
+        mediaStream.addEventListener("active", active);
+        mediaStream.addEventListener("inactive", inactive);
+        mediaStream.addEventListener("ended", ended);
+        for (const track of mediaStream.getTracks()) {
+            track.addEventListener("ended", ended);
+            track.addEventListener("mute", mute);
+            track.addEventListener("unmute", unmute);
+        }
+        return () => {
+            for (const track of mediaStream.getTracks()) {
+                track.removeEventListener("ended", ended);
+                track.removeEventListener("mute", mute);
+                track.removeEventListener("unmute", unmute);
+            }
+            mediaStream.removeEventListener("active", active);
+            mediaStream.removeEventListener("inactive", inactive);
+            mediaStream.removeEventListener("ended", ended);
+        };
+    }, [mediaStream]);
+    useEffect(() => {
+        if (!videoRef || !videoRef.current) {
+            return;
+        }
+        videoRef.current.srcObject = mediaStream;
+    }, [mediaStream]);
+    if (!mediaStream) {
+        return (_jsx(View, { backgroundColor: "#111", style: { minWidth: "100%", minHeight: "100%" }, children: _jsxs(View, { backgroundColor: colors.primary[800], style: { borderRadius: borderRadius.md }, children: [_jsx(View, { children: _jsx(Text, { children: "Connecting..." }) }), _jsxs(Text, { children: ["Establishing WebRTC connection (", connectionStatus, ")"] })] }) }));
+    }
+    return _jsx(VideoElement, { url: url, ref: videoRef });
+}
+export function WebcamIngestPlayer(props) {
+    const ingestStarting = usePlayerStore((x) => x.ingestStarting);
+    const ingestMediaSource = usePlayerStore((x) => x.ingestMediaSource);
+    const ingestAutoStart = usePlayerStore((x) => x.ingestAutoStart);
+    const [error, setError] = useState(null);
+    let streamKey = null;
+    const [videoElement, setVideoElement] = useState(null);
+    const handleRef = useCallback((node) => {
+        if (node) {
+            setVideoElement(node);
+        }
+    }, []);
+    const url = useStreamplaceStore((x) => x.url);
+    const [localMediaStream, setLocalMediaStream] = useState(null);
+    // we assign a stream key in the webrtcingest hook
+    const [remoteMediaStream, setRemoteMediaStream] = useWebRTCIngest({
+        endpoint: `${url}/api/ingest/webrtc`,
+    });
+    useEffect(() => {
+        if (ingestMediaSource === IngestMediaSource.DISPLAY) {
+            navigator.mediaDevices
+                .getDisplayMedia({
+                audio: true,
+                video: true,
+            })
+                .then((stream) => {
+                setLocalMediaStream(stream);
+            })
+                .catch((e) => {
+                console.error("error getting display media", e);
+            });
+        }
+        else {
+            navigator.mediaDevices
+                .getUserMedia({
+                audio: true,
+                video: {
+                    width: { min: 200, ideal: 1080, max: 2160 },
+                    height: { min: 200, ideal: 1920, max: 3840 },
+                },
+            })
+                .then((stream) => {
+                setLocalMediaStream(stream);
+            })
+                .catch((e) => {
+                console.error("error getting user media", e.name);
+                if (e.name == "NotAllowedError") {
+                    setError(new Error("Unable to access video! Please allow it in your browser settings."));
+                }
+            });
+        }
+    }, [ingestMediaSource]);
+    useEffect(() => {
+        if (!ingestStarting && !ingestAutoStart) {
+            setRemoteMediaStream(null);
+            return;
+        }
+        if (!localMediaStream) {
+            return;
+        }
+        setRemoteMediaStream(localMediaStream);
+    }, [localMediaStream, ingestStarting, ingestAutoStart]);
+    useEffect(() => {
+        if (!videoElement) {
+            return;
+        }
+        if (!localMediaStream) {
+            return;
+        }
+        videoElement.srcObject = localMediaStream;
+    }, [videoElement, localMediaStream]);
+    if (error) {
+        return (_jsxs(View, { backgroundColor: colors.destructive[900], style: [p[4], { borderRadius: borderRadius.md }], children: [_jsx(View, { children: _jsx(Text, { size: "xl", weight: "extrabold", children: "Error encountered!" }) }), _jsx(Text, { children: error.message })] }));
+    }
+    return _jsx(VideoElement, { ...props, ref: handleRef });
+}

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

@@ -0,0 +1,238 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useVideoPlayer, VideoView } from "expo-video";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { RTCView, RTCView as RTCViewIngest, } from "react-native-webrtc";
+import { IngestMediaSource, PlayerStatus as IngestPlayerStatus, PlayerProtocol, PlayerStatus, Text, usePlayerStore as useIngestPlayerStore, usePlayerStore, useStreamplaceStore, View, } from "../..";
+import { borderRadius, colors, p } from "../../lib/theme/atoms";
+import { srcToUrl } from "./shared";
+import useWebRTC, { useWebRTCIngest } from "./use-webrtc";
+import { mediaDevices } from "./webrtc-primitives.native";
+// Add NativeIngestPlayer to the switch below!
+export default function VideoNative() {
+    const protocol = usePlayerStore((x) => x.protocol);
+    const ingest = usePlayerStore((x) => x.ingestConnectionState) != null;
+    return (_jsx(View, { children: ingest ? (_jsx(NativeIngestPlayer, {})) : protocol === PlayerProtocol.WEBRTC ? (_jsx(NativeWHEP, {})) : (_jsx(NativeVideo, {})) }));
+}
+export function NativeVideo() {
+    const videoRef = useRef(null);
+    const protocol = usePlayerStore((x) => x.protocol);
+    const selectedRendition = usePlayerStore((x) => x.selectedRendition);
+    const src = usePlayerStore((x) => x.src);
+    const { url } = srcToUrl({ src: src, selectedRendition }, protocol);
+    const setStatus = usePlayerStore((x) => x.setStatus);
+    const muted = usePlayerStore((x) => x.muted);
+    const volume = usePlayerStore((x) => x.volume);
+    const setFullscreen = usePlayerStore((x) => x.setFullscreen);
+    const fullscreen = usePlayerStore((x) => x.fullscreen);
+    const playerEvent = usePlayerStore((x) => x.playerEvent);
+    const spurl = useStreamplaceStore((x) => x.url);
+    const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
+    const setPlayerHeight = usePlayerStore((x) => x.setPlayerHeight);
+    // State for live dimensions
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const handleLayout = useCallback((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setDimensions({ width, height });
+        setPlayerWidth(width);
+        setPlayerHeight(height);
+    }, []);
+    useEffect(() => {
+        return () => {
+            setStatus(PlayerStatus.START);
+        };
+    }, [setStatus]);
+    const player = useVideoPlayer(url, (player) => {
+        player.loop = true;
+        player.muted = muted;
+        player.play();
+    });
+    useEffect(() => {
+        player.muted = muted;
+    }, [muted, player]);
+    useEffect(() => {
+        player.volume = volume;
+    }, [volume, player]);
+    useEffect(() => {
+        const subs = [
+            "playToEnd",
+            "playbackRateChange",
+            "playingChange",
+            "sourceChange",
+            "statusChange",
+            "volumeChange",
+        ].map((evType) => {
+            return player.addListener(evType, (...args) => {
+                const now = new Date();
+                playerEvent(spurl, now.toISOString(), evType, { args: args });
+            });
+        });
+        subs.push(player.addListener("playingChange", (newIsPlaying) => {
+            if (newIsPlaying) {
+                setStatus(PlayerStatus.PLAYING);
+            }
+            else {
+                setStatus(PlayerStatus.WAITING);
+            }
+        }));
+        return () => {
+            for (const sub of subs) {
+                sub.remove();
+            }
+        };
+    }, [player, playerEvent, setStatus, spurl]);
+    return (_jsx(_Fragment, { children: _jsx(VideoView, { ref: videoRef, player: player, allowsFullscreen: true, nativeControls: fullscreen, onFullscreenEnter: () => {
+                setFullscreen(true);
+            }, onFullscreenExit: () => {
+                setFullscreen(false);
+            }, allowsPictureInPicture: true, onLayout: handleLayout }) }));
+}
+export function NativeWHEP() {
+    const selectedRendition = usePlayerStore((x) => x.selectedRendition);
+    const src = usePlayerStore((x) => x.src);
+    const { url } = srcToUrl({ src: src, selectedRendition }, PlayerProtocol.WEBRTC);
+    const [stream, stuck] = useWebRTC(url);
+    const setPlayerWidth = usePlayerStore((x) => x.setPlayerWidth);
+    const setPlayerHeight = usePlayerStore((x) => x.setPlayerHeight);
+    // PiP support: wire up videoRef (no direct ref for RTCView)
+    const setVideoRef = usePlayerStore((x) => x.setVideoRef);
+    // State for live dimensions
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const handleLayout = useCallback((event) => {
+        const { width, height } = event.nativeEvent.layout;
+        setDimensions({ width, height });
+        setPlayerWidth(width);
+        setPlayerHeight(height);
+    }, []);
+    const setStatus = usePlayerStore((x) => x.setStatus);
+    const muted = usePlayerStore((x) => x.muted);
+    const volume = usePlayerStore((x) => x.volume);
+    useEffect(() => {
+        if (stuck) {
+            setStatus(PlayerStatus.STALLED);
+        }
+        else {
+            setStatus(PlayerStatus.PLAYING);
+        }
+    }, [stuck, setStatus]);
+    const mediaStream = stream;
+    useEffect(() => {
+        if (!mediaStream) {
+            setStatus(PlayerStatus.WAITING);
+            return;
+        }
+        setStatus(PlayerStatus.PLAYING);
+    }, [mediaStream, setStatus]);
+    useEffect(() => {
+        if (!mediaStream) {
+            return;
+        }
+        mediaStream.getTracks().forEach((track) => {
+            if (track.kind === "audio") {
+                track._setVolume(muted ? 0 : volume);
+            }
+        });
+    }, [mediaStream, muted, volume]);
+    // Keep the playerStore videoRef in sync for PiP (if possible)
+    useEffect(() => {
+        if (typeof setVideoRef === "function") {
+            setVideoRef(null); // No direct ref for RTCView, but keep API consistent
+        }
+    }, [setVideoRef]);
+    if (!mediaStream) {
+        return _jsx(View, {});
+    }
+    return (_jsx(_Fragment, { children: _jsx(RTCView, { mirror: false, objectFit: "contain", streamURL: mediaStream.toURL(), onLayout: handleLayout, pictureInPictureEnabled: true, autoStartPictureInPicture: true, pictureInPicturePreferredSize: {
+                width: 160,
+                height: 90,
+            }, style: {
+                minWidth: "100%",
+                minHeight: "100%",
+                flex: 1,
+            } }) }));
+}
+export function NativeIngestPlayer() {
+    const ingestStarting = useIngestPlayerStore((x) => x.ingestStarting);
+    const ingestMediaSource = useIngestPlayerStore((x) => x.ingestMediaSource);
+    const ingestAutoStart = useIngestPlayerStore((x) => x.ingestAutoStart);
+    const setStatus = useIngestPlayerStore((x) => x.setStatus);
+    const setVideoRef = usePlayerStore((x) => x.setVideoRef);
+    const [error, setError] = useState(null);
+    const ingestCamera = useIngestPlayerStore((x) => x.ingestCamera);
+    useEffect(() => {
+        setStatus(IngestPlayerStatus.PLAYING);
+    }, [setStatus]);
+    useEffect(() => {
+        if (typeof setVideoRef === "function") {
+            setVideoRef(null);
+        }
+    }, [setVideoRef]);
+    const url = useStreamplaceStore((x) => x.url);
+    const [lms, setLocalMediaStream] = useState(null);
+    const [, setRemoteMediaStream] = useWebRTCIngest({
+        endpoint: `${url}/api/ingest/webrtc`,
+    });
+    // Use lms directly as localMediaStream
+    const localMediaStream = lms;
+    useEffect(() => {
+        if (ingestMediaSource === IngestMediaSource.DISPLAY) {
+            mediaDevices
+                .getDisplayMedia()
+                .then((stream) => {
+                console.log("display media", stream);
+                setLocalMediaStream(stream);
+            })
+                .catch((e) => {
+                console.log("error getting display media", e);
+                console.error("error getting display media", e);
+            });
+        }
+        else {
+            mediaDevices
+                .getUserMedia({
+                audio: {
+                // deviceId: "audio-1",
+                // echoCancellation: true,
+                // autoGainControl: true,
+                // noiseSuppression: true,
+                // latency: false,
+                // channelCount: false,
+                },
+                video: {
+                    facingMode: ingestCamera,
+                    width: { min: 200, ideal: 1080, max: 2160 },
+                    height: { min: 200, ideal: 1920, max: 3840 },
+                },
+            })
+                .then((stream) => {
+                setLocalMediaStream(stream);
+            })
+                .catch((e) => {
+                console.error("error getting user media", e);
+                setError(new Error("We could not access your camera or microphone. Please check your permissions."));
+            });
+        }
+    }, [ingestMediaSource, ingestCamera]);
+    useEffect(() => {
+        if (!ingestStarting && !ingestAutoStart) {
+            setRemoteMediaStream(null);
+            return;
+        }
+        if (!localMediaStream) {
+            return;
+        }
+        console.log("setting remote media stream", localMediaStream);
+        // @ts-expect-error: WebRTCMediaStream may not have all MediaStream properties, but is compatible for our use
+        setRemoteMediaStream(localMediaStream);
+    }, [localMediaStream, ingestStarting, ingestAutoStart, setRemoteMediaStream]);
+    if (!localMediaStream) {
+        return null;
+    }
+    if (error) {
+        return (_jsxs(View, { backgroundColor: colors.destructive[900], style: [p[4], { borderRadius: borderRadius.md }], children: [_jsx(View, { children: _jsx(Text, { children: "Error encountered!" }) }), _jsx(Text, { children: error.message })] }));
+    }
+    return (_jsx(RTCViewIngest, { mirror: ingestCamera !== "environment", objectFit: "contain", streamURL: localMediaStream.toURL(), zOrder: 0, style: {
+            minWidth: "100%",
+            minHeight: "100%",
+            flex: 1,
+        } }));
+}