Skip to content

Camera Control Component with websocket h264 stream provider #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stmudie wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Camera Control Component with websocket h264 stream provider #20

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
37b92a4
Resolution, cropping, dragging for H264
stmudie Feb 13, 2026
e1e261d
Getting zoom and cropping working correctly.
stmudie Feb 17, 2026
7713cde
Cleaning up using refs.
stmudie Feb 18, 2026
9bf86bb
Formatted. Fixed references/state so that ws isn't reconnected on ima…
stmudie Feb 18, 2026
832ed5b
sessionId injetion and cleanup with refs
stmudie Feb 20, 2026
7c13ece
Working version before changing to using padding passed via API.
stmudie Mar 2, 2026
baf0a77
Using fixed crop resonse
stmudie Mar 3, 2026
02ed30b
Space button for panning.
stmudie Mar 5, 2026
bfbd363
Use metadata from stream instead of rest to get current crop for drag…
stmudie Mar 5, 2026
a124d5c
Move camera control and related components/providers to a sub directory.
stmudie Mar 31, 2026
d997fa4
Add type definition for reused bounding box.
stmudie Mar 31, 2026
aab712d
Create default resolution constant
stmudie Mar 31, 2026
e413dc8
Added docstrings and small cleanup
stmudie Apr 1, 2026
7d2c944
Change guarding for video frames by create isVideo
stmudie Apr 1, 2026
aa33784
Add default delay to debounce function and use it.
stmudie Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/docs/routes/experimental/camera-control-h264.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react';
import { useState, useMemo } from 'react';
import { createFileRoute } from '@tanstack/react-router'
import { PageHeader } from "../../components/page-header"
import { CameraControl } from '../../../ui/experimental/camera-control'
Expand All @@ -7,6 +7,7 @@ import { TypographyH1 } from '../../../ui/elements/typography'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../../../ui/layout/card"
import { DemoContainer } from "@/docs/components/demo-container"

import { h264FetchApi } from '@/ui/experimental/h264-fetch';

export const Route = createFileRoute('/experimental/camera-control-h264')({
component: CameraControlWebsocketH264Page,
Expand All @@ -17,9 +18,10 @@ export const Route = createFileRoute('/experimental/camera-control-h264')({
function CameraControlWebsocketH264Demo() {
const [mousePos, setMousePos] = useState<{ x: number, y: number, intensity: number } | null>(null);
const [clickPos, setClickPos] = useState<{ x: number, y: number, intensity: number } | null>(null);
const api = useMemo(() => h264FetchApi("localhost:9999"), []);
Copy link
Copy Markdown

@NoxHarmonium NoxHarmonium Mar 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How will this work in the docs if you don't have something running at localhost?

Copy link
Copy Markdown
Member Author

@stmudie stmudie Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it won't. I wonder if there is a way to fake it for the docs.

Copy link
Copy Markdown

@NoxHarmonium NoxHarmonium Mar 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can implement a mock context that just emits some test images in a loop or something. If we mock out the API, we would still need a mock websocket that emits h264 I guess which sounds hard.

return (
<div>
<WebsocketH264Provider wsUrl="ws://localhost:8080/ws">
<div style={{width: "100%", height: "100%"}}>
<WebsocketH264Provider api={api}>
<CameraControl
className="border"
onMousePositionChange={setMousePos}
Expand Down
Loading