82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import {
|
|
FunctionComponent,
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
} from "react";
|
|
import styles from "./ScreenSharingPage.module.css";
|
|
import { Panel } from "../../components/Panel/Panel";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { ScreenViewer } from "./ScreenViewer";
|
|
import adapter from "webrtc-adapter";
|
|
import { Button } from "../../components/Button/Button";
|
|
import {
|
|
ScreenSharingServer,
|
|
ScreenSharingServerState,
|
|
StateChangedEvent,
|
|
StateChangedEventType,
|
|
} from "../../api/webrtc";
|
|
|
|
export const ScreenSharingPage: FunctionComponent = () => {
|
|
const { sessionId } = useParams<{ sessionId: string }>();
|
|
const [server, setServer] = useState<ScreenSharingServer | null>(null);
|
|
const [state, setState] = useState<string | null>(null);
|
|
|
|
const onServerStateChanged = useCallback((evt: Event) => {
|
|
setState((evt as StateChangedEvent).state);
|
|
}, []);
|
|
|
|
console.log("Server state", state);
|
|
|
|
const onShareScreenClick = useCallback(() => {
|
|
const server = new ScreenSharingServer();
|
|
server.addEventListener(StateChangedEventType, onServerStateChanged);
|
|
server.shareScreen({
|
|
video: true,
|
|
audio: false,
|
|
});
|
|
setServer(server);
|
|
return () => {
|
|
server.removeEventListener(StateChangedEventType, onServerStateChanged);
|
|
server.close();
|
|
setServer(null);
|
|
};
|
|
}, [onServerStateChanged]);
|
|
|
|
const onStopSharingClick = useCallback(() => {
|
|
if (!server) return;
|
|
server.close();
|
|
setServer(null);
|
|
setState(null);
|
|
}, [server]);
|
|
|
|
useEffect(() => {
|
|
if (!server) return;
|
|
return () => {
|
|
if (!server) return;
|
|
console.log("Closing screen sharing server");
|
|
server.close();
|
|
setServer(null);
|
|
};
|
|
}, [server]);
|
|
|
|
if (sessionId !== undefined) {
|
|
return <ScreenViewer sessionId={sessionId} />;
|
|
}
|
|
|
|
return (
|
|
<div className={styles.root}>
|
|
<Panel>
|
|
<Link to="/">Back to homepage</Link>
|
|
<h1 className={styles.panelTitle}>Screen sharing</h1>
|
|
{state === ScreenSharingServerState.Sharing ? (
|
|
<Button onClick={onStopSharingClick}>Stop sharing</Button>
|
|
) : (
|
|
<Button onClick={onShareScreenClick}>Share screen</Button>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
);
|
|
};
|