51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
//
|
|
// Copyright 2026 James Pace
|
|
//
|
|
// This Source Code Form is subject to the terms of the Mozilla Public
|
|
// License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
// file, You can obtain one at https://mozilla.org/MPL/2.0/.
|
|
//
|
|
// This Source Code Form is "Incompatible With Secondary Licenses", as
|
|
// defined by the Mozilla Public License, v. 2.0.
|
|
//
|
|
import { AppNav, Footer } from "./components/AppNav.tsx";
|
|
import { Container, Row, Col, Card } from "react-bootstrap";
|
|
import { MediaMtxPlayer } from "./external/MediaMtxPlayer.tsx";
|
|
import { atom, useAtomValue } from "jotai";
|
|
import { createQueryAtom } from "./utils/query.ts";
|
|
|
|
const tokenQueryAtom = createQueryAtom("api/mediamtx/login", { retry: true });
|
|
const tokenAtom = atom((get) => {
|
|
const response = get(tokenQueryAtom);
|
|
if (response.isPending || response.isError) {
|
|
console.log(response);
|
|
return null;
|
|
}
|
|
return response.data.token;
|
|
});
|
|
|
|
export function Video() {
|
|
const streamName = "image";
|
|
const imageStreamURI =
|
|
"http://" + window.location.hostname + ":8889/" + streamName + "/whep";
|
|
|
|
const token = useAtomValue(tokenAtom);
|
|
|
|
return (
|
|
<div>
|
|
<AppNav />
|
|
<Container className="vert-padded">
|
|
<Card className="padded">
|
|
<Row>
|
|
<Col lg={8}>
|
|
<MediaMtxPlayer url={imageStreamURI} token={token} />
|
|
</Col>
|
|
<Col lg={4}>Showing stream: "{streamName}".</Col>
|
|
</Row>
|
|
</Card>
|
|
</Container>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|