https://github.com/guyettinger/gle-roboflow-components
GLE Roboflow Component Library
https://github.com/guyettinger/gle-roboflow-components
react roboflow typescript webcam
Last synced: about 1 month ago
JSON representation
GLE Roboflow Component Library
- Host: GitHub
- URL: https://github.com/guyettinger/gle-roboflow-components
- Owner: guyettinger
- License: mit
- Created: 2023-10-25T17:57:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-01T00:47:34.000Z (over 2 years ago)
- Last Synced: 2025-10-08T23:59:24.807Z (8 months ago)
- Topics: react, roboflow, typescript, webcam
- Language: TypeScript
- Homepage: https://guyettinger.github.io/gle-roboflow-components/
- Size: 11.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GLE Roboflow Component Library
A React Roboflow component library.
[](https://www.npmjs.com/package/gle-roboflow-components)
[](https://www.npmjs.com/package/gle-roboflow-components)
## Documentation
- [Storybook](https://guyettinger.github.io/gle-roboflow-components/)
## Usage
```tsx
import { useEffect, useRef, useState } from "react";
import Webcam from "react-webcam";
import styled from "styled-components";
import {
RoboflowApiProvider,
RoboflowAuthParams,
RoboflowClientProvider,
RoboflowLoadParams,
RoboflowModel,
RoboflowObjectDetection,
RoboflowObjectDetectionCanvas,
RoboflowWebcam,
useRoboflowClientContext,
waitForRoboflowModule
} from "gle-roboflow-components"
// Roboflow authorization
const PUBLISHABLE_ROBOFLOW_API_KEY = ""
const roboflowAuthParams: RoboflowAuthParams = {
publishable_key: PUBLISHABLE_ROBOFLOW_API_KEY
}
// Detection model
const exampleDetectionModel = ""
const exampleDetectionModelVersion = ""
// Example Component
const ExampleContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 1rem 0;
`
const ExampleContent = styled.div`
position: relative;
padding: 1rem;
margin-bottom: 1rem;
background-color: #1D1E20;
border-radius: 4px;
`
const ExampleVideoContent = styled.div`
position: relative;
`
interface ExampleProps {
exampleDetectionModel: string,
exampleDetectionModelVersion: string
}
const Example = ({exampleDetectionModel, exampleDetectionModelVersion}: ExampleProps) => {
const webcamRef = useRef(null)
const [objectDetections, setObjectDetections] = useState([])
const [webcamInitialized, setWebcamInitialized] = useState(false)
const [webcamWidth, setWebcamWidth] = useState(0)
const [webcamHeight, setWebcamHeight] = useState(0)
const roboflowClient = useRoboflowClientContext()
const isReadyForCanvas = (webcamInitialized && webcamWidth > 0 && webcamHeight > 0)
const detect = async (model: RoboflowModel) => {
if (!webcamInitialized) return
const webcam = webcamRef.current
if (!webcam) return
const video = webcam.video
if (!video) return
// get detections
try {
const detections = await model.detect(video)
console.log('roboflow detected', detections)
setObjectDetections(detections)
} catch (e) {
const error = e as Error
if (!error) return
console.error(error.message)
}
}
useEffect(() => {
if (webcamInitialized) {
// load the model
const roboflowLoadParams: RoboflowLoadParams = {
model: exampleDetectionModel,
version: exampleDetectionModelVersion
}
roboflowClient.load(roboflowLoadParams).then(() => {
// start inference
roboflowClient.startInference(detect)
})
}
}, [webcamInitialized])
const handleRoboflowWebcamInitialized = () => {
setWebcamInitialized(true)
console.log('roboflow webcam initialized')
}
const handleRoboflowWebcamSizeChange = (width: number, height: number) => {
setWebcamWidth(width)
setWebcamHeight(height)
console.log('roboflow webcam size change', width, height)
}
return (
{isReadyForCanvas &&
}
)
}
// Example App
const ExampleAppContent = styled.div`
display: flex;
flex-direction: column;
padding: 0 10%
`
const ExampleApp = () => {
const [roboflowReady, setRoboflowReady] = useState(false)
useEffect(() => {
waitForRoboflowModule().then(() => {
setRoboflowReady(true)
})
}, []);
return (
{roboflowReady &&
}
{!roboflowReady &&
loading...
}
)
}
```
## Installation
```shell
npm install gle-roboflow-components@latest
```
## Development
Install
```
npm install
```
Build Library
```
npm run build
```
Run Tests
```
npm run test
```
Run Storybook
```
npm run storybook
```