\n \n ![](\"docs/logo.png\"){kind=logo}
\n \n
screego/server
\nscreen sharing for developers
\n\n\n \n ![\"Build](\"https://github.com/screego/server/workflows/build/badge.svg\"){kind=icon}
\n \n \n ![\"Build](\"https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fipitio%2Fghcr-pulls%2Fmaster%2Findex.json&query=%24%5B%3F(%40.owner%3D%3D%22screego%22%20%26%26%20%40.repo%3D%3D%22server%22%20%26%26%20%40.image%3D%3D%22server%22)%5D.pulls&logo=github&label=pulls\"){kind=icon}
\n \n \n
![\"Docker](\"https://img.shields.io/docker/pulls/screego/server.svg\")
\n \n \n ![\"latest](\"https://img.shields.io/github/release/screego/server.svg\")
\n \n
(Click to expand)
\n\n\n!> Screego may not work correctly when deploying it in docker without `network_mode: host`.\n See [#226](https://github.com/screego/server/issues/226)\n\n```bash\n$ docker run -it \\\n -e SCREEGO_EXTERNAL_IP=EXTERNALIP \\\n -e SCREEGO_TURN_PORT_RANGE=50000:50200 \\\n -p 5050:5050 \\\n -p 3478:3478 \\\n -p 50000-50200:50000-50200/udp \\\n screego/server:GITHUB_VERSION\n```\n\n#### docker-compose.yml\n\n```yml\nversion: \"3.7\"\nservices:\n screego:\n image: ghcr.io/screego/server:GITHUB_VERSION\n ports:\n - 5050:5050\n - 3478:3478\n - 50000-50200:50000-50200/udp\n environment:\n SCREEGO_EXTERNAL_IP: \"192.168.178.2\"\n SCREEGO_TURN_PORT_RANGE: \"50000:50200\"\n```\n\n
\n\n \n \n \n
\n );\n};\n\nexport const LoadingButton = ({loading, children, ...props}: ButtonProps & {loading: boolean}) => {\n const {classes} = useStyles();\n return (\n \n );\n};\n\nconst useStyles = makeStyles()(() => ({\n buttonProgress: {\n color: green[500],\n position: 'absolute',\n top: '50%',\n left: '50%',\n marginTop: -12,\n marginLeft: -12,\n },\n}));\n"
},
{
"path": "ui/src/NumberField.tsx",
"content": "import {TextField, TextFieldProps} from '@mui/material';\nimport React from 'react';\n\nexport interface NumberFieldProps {\n value: number;\n min: number;\n onChange: (value: number) => void;\n}\n\nexport const NumberField = ({\n value,\n min,\n onChange,\n ...props\n}: NumberFieldProps & Omit\n {controlVisible && (\n \n \n \n {state.id}\n \n \n \n )}\n\n {stream ? (\n \n no stream available\n \n )}\n\n {controlVisible && (\n \n {(stream?.getAudioTracks().length ?? 0) > 0 && videoElement && (\n \n {state.hostStream ? (\n \n \n \n \n ) : (\n \n \n \n \n )}\n\n \n Member List \n {state.users.map((user) => (\n \n {user.name} {flags(user)}\n \n ))}\n
\n }\n arrow\n >\n \n {state.clientStreams\n .filter(({id}) => id !== selectedStream)\n .map((client) => {\n return (\n setSelectedStream(client.id)}\n >\n \n {state.users.find(({id}) => client.peer_id === id)?.name ??\n 'unknown'}\n \n \n );\n })}\n {state.hostStream && selectedStream !== HostStream && (\n setSelectedStream(HostStream)}\n >\n \n \n You\n \n \n )}\n
\n \n );\n};\n\nconst useShowOnMouseMovement = (doShow: (s: boolean) => void) => {\n const timeoutHandle = React.useRef(0);\n\n React.useEffect(() => {\n const update = () => {\n if (timeoutHandle.current === 0) {\n doShow(true);\n }\n\n clearTimeout(timeoutHandle.current);\n timeoutHandle.current = window.setTimeout(() => {\n timeoutHandle.current = 0;\n doShow(false);\n }, 1000);\n };\n window.addEventListener('mousemove', update);\n return () => window.removeEventListener('mousemove', update);\n }, [doShow]);\n\n React.useEffect(\n () =>\n void (timeoutHandle.current = window.setTimeout(() => {\n timeoutHandle.current = 0;\n doShow(false);\n }, 1000)),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n};\n\nconst AudioControl = ({video}: {video: FullScreenHTMLVideoElement}) => {\n // this is used to force a rerender\n const [, setMuted] = React.useState\n \n setId(e.target.value)}\n label=\"id\"\n margin=\"dense\"\n />\n setOwnerLeave(checked)}\n />\n }\n label=\"Close Room after you leave\"\n />\n \n \n Nat Traversal via:{' '}\n \n {mode.toUpperCase()}\n \n \n \n \n \n
\n );\n};\n\nexport const RoomManage = ({room, config}: {room: FCreateRoom; config: UseConfig}) => {\n const [showLogin, setShowLogin] = React.useState(false);\n\n const canCreateRoom = config.authMode !== 'all';\n const loginVisible = !config.loggedIn && (showLogin || !canCreateRoom);\n\n return (\n ![\"logo\"](\"./logo.svg\"){kind=logo}
\n \n Screego {config.version} |{' '}\n GitHub\n
\n \n );\n};\n"
},
{
"path": "ui/src/Router.tsx",
"content": "import {RoomManage} from './RoomManage';\nimport {useRoom} from './useRoom';\nimport {Room} from './Room';\nimport {UseConfig, useConfig} from './useConfig';\n\nexport const Router = () => {\n const config = useConfig();\n\n if (config.loading) {\n // show spinner\n return null;\n }\n return