# reflex-webcam
Package for a webcam for the [Reflex Framework](https://github.com/reflex-dev/reflex)
## ⚙️ Installation
Open a terminal and run (Requires Python 3.10+):
```bash
pip install reflex-webcam
```
## Import package
```python
import reflex_webcam as webcam
```
## Simple Usage (Screenshot)
This example below allows a user to use the webcam and take a screenshot, which is rendered under the webcam live feed.
To run the app shown below just copy and paste the code in a Reflex app.
```python
import time
from pathlib import Path
from urllib.request import urlopen
from PIL import Image
import reflex as rx
import reflex_webcam as webcam
# Identifies a particular webcam component in the DOM
WEBCAM_REF = "webcam"
class State(rx.State):
last_screenshot: Image.Image | None = None
last_screenshot_timestamp: str = ""
loading: bool = False
def handle_screenshot(self, img_data_uri: str):
"""Webcam screenshot upload handler.
Args:
img_data_uri: The data uri of the screenshot (from upload_screenshot).
"""
if self.loading:
return
self.last_screenshot_timestamp = time.strftime("%H:%M:%S")
with urlopen(img_data_uri) as img:
self.last_screenshot = Image.open(img)
self.last_screenshot.load()
# convert to webp during serialization for smaller size
self.last_screenshot.format = "WEBP" # type: ignore
def last_screenshot_widget() -> rx.Component:
"""Widget for displaying the last screenshot and timestamp."""
return rx.box(
rx.cond(
State.last_screenshot,
rx.fragment(
rx.image(src=State.last_screenshot),
rx.text(State.last_screenshot_timestamp),
),
rx.center(
rx.text("Click image to capture.", size="4"),
),
),
height="270px",
)
def webcam_upload_component(ref: str) -> rx.Component:
"""Component for displaying webcam preview and uploading screenshots.
Args:
ref: The ref of the webcam component.
Returns:
A reflex component.
"""
return rx.vstack(
webcam.webcam(
id=ref,
on_click=webcam.upload_screenshot(
ref=ref,
handler=State.handle_screenshot, # type: ignore
),
),
last_screenshot_widget(),
width="320px",
align="center",
)
def index() -> rx.Component:
return rx.fragment(
rx.center(
webcam_upload_component(WEBCAM_REF),
padding_top="3em",
),
)
app = rx.App()
app.add_page(index)
```
# Advanced Usage (Video recording)
To run the webcam with video recording capabilities follow the instructions below to run the webcam_demo in this Github repo.
```bash
cd webcam_demo
reflex init
reflex run
```
You should see your app running at http://localhost:3000.
## Limitations
Currently the recording mechanism hardcodes `webm` as the video format, which is
not supported by Safari.
Raw data
{
"_id": null,
"home_page": null,
"name": "reflex-webcam",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": "reflex, reflex-custom-components",
"author": null,
"author_email": "Tom Gotsman <tgotsman12@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/2e/d4/c3e0ed3d7151d46d2fc8ae3b72046e4d4ff17a61ebc65da7cdfca639a1da/reflex_webcam-0.1.0.tar.gz",
"platform": null,
"description": "# reflex-webcam\n\nPackage for a webcam for the [Reflex Framework](https://github.com/reflex-dev/reflex)\n\n\n## \u2699\ufe0f Installation\n\nOpen a terminal and run (Requires Python 3.10+):\n\n```bash\npip install reflex-webcam\n```\n\n## Import package\n\n```python\nimport reflex_webcam as webcam\n```\n\n## Simple Usage (Screenshot)\n\nThis example below allows a user to use the webcam and take a screenshot, which is rendered under the webcam live feed.\n\nTo run the app shown below just copy and paste the code in a Reflex app. \n\n```python\nimport time\nfrom pathlib import Path\nfrom urllib.request import urlopen\nfrom PIL import Image\n\nimport reflex as rx\nimport reflex_webcam as webcam\n\n\n# Identifies a particular webcam component in the DOM\nWEBCAM_REF = \"webcam\"\n\n\nclass State(rx.State):\n last_screenshot: Image.Image | None = None\n last_screenshot_timestamp: str = \"\"\n loading: bool = False\n\n def handle_screenshot(self, img_data_uri: str):\n \"\"\"Webcam screenshot upload handler.\n Args:\n img_data_uri: The data uri of the screenshot (from upload_screenshot).\n \"\"\"\n if self.loading:\n return\n self.last_screenshot_timestamp = time.strftime(\"%H:%M:%S\")\n with urlopen(img_data_uri) as img:\n self.last_screenshot = Image.open(img)\n self.last_screenshot.load()\n # convert to webp during serialization for smaller size\n self.last_screenshot.format = \"WEBP\" # type: ignore\n\n\ndef last_screenshot_widget() -> rx.Component:\n \"\"\"Widget for displaying the last screenshot and timestamp.\"\"\"\n return rx.box(\n rx.cond(\n State.last_screenshot,\n rx.fragment(\n rx.image(src=State.last_screenshot),\n rx.text(State.last_screenshot_timestamp),\n ),\n rx.center(\n rx.text(\"Click image to capture.\", size=\"4\"),\n ),\n ),\n height=\"270px\",\n )\n\n\ndef webcam_upload_component(ref: str) -> rx.Component:\n \"\"\"Component for displaying webcam preview and uploading screenshots.\n Args:\n ref: The ref of the webcam component.\n Returns:\n A reflex component.\n \"\"\"\n return rx.vstack(\n webcam.webcam(\n id=ref,\n on_click=webcam.upload_screenshot(\n ref=ref,\n handler=State.handle_screenshot, # type: ignore\n ),\n ),\n last_screenshot_widget(),\n width=\"320px\",\n align=\"center\",\n )\n\n\ndef index() -> rx.Component:\n return rx.fragment(\n rx.center(\n webcam_upload_component(WEBCAM_REF),\n padding_top=\"3em\",\n ),\n )\n\n\napp = rx.App()\napp.add_page(index)\n```\n\n\n# Advanced Usage (Video recording)\n\nTo run the webcam with video recording capabilities follow the instructions below to run the webcam_demo in this Github repo.\n\n```bash\ncd webcam_demo\nreflex init\nreflex run\n```\n\nYou should see your app running at http://localhost:3000.\n\n## Limitations\n\nCurrently the recording mechanism hardcodes `webm` as the video format, which is\nnot supported by Safari.\n",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Reflex custom component webcam",
"version": "0.1.0",
"project_urls": {
"Homepage": "https://github.com/tgberkeley/reflex-webcam",
"Repository": "https://github.com/tgberkeley/reflex-webcam"
},
"split_keywords": [
"reflex",
" reflex-custom-components"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "22e26cde650bde232641a5ed107df714b7d93ed6d523ba299c767c36b3555352",
"md5": "9d2b4272b7c41c6c26c9944c3d3efa3e",
"sha256": "2cacf3eeb601eec949d7646ce180d80f7138aac44c9fb7d495c1a7010629cab4"
},
"downloads": -1,
"filename": "reflex_webcam-0.1.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "9d2b4272b7c41c6c26c9944c3d3efa3e",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 5953,
"upload_time": "2025-02-15T01:07:56",
"upload_time_iso_8601": "2025-02-15T01:07:56.073639Z",
"url": "https://files.pythonhosted.org/packages/22/e2/6cde650bde232641a5ed107df714b7d93ed6d523ba299c767c36b3555352/reflex_webcam-0.1.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "2ed4c3e0ed3d7151d46d2fc8ae3b72046e4d4ff17a61ebc65da7cdfca639a1da",
"md5": "ea18e44f5e9c44a5fa8579e52c9df30f",
"sha256": "8f551f4726f70b8b2ad669b8740f2073d481292ff6bd50f1e6ce81d57e66d6c7"
},
"downloads": -1,
"filename": "reflex_webcam-0.1.0.tar.gz",
"has_sig": false,
"md5_digest": "ea18e44f5e9c44a5fa8579e52c9df30f",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 26009,
"upload_time": "2025-02-15T01:07:57",
"upload_time_iso_8601": "2025-02-15T01:07:57.794062Z",
"url": "https://files.pythonhosted.org/packages/2e/d4/c3e0ed3d7151d46d2fc8ae3b72046e4d4ff17a61ebc65da7cdfca639a1da/reflex_webcam-0.1.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-02-15 01:07:57",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "tgberkeley",
"github_project": "reflex-webcam",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "reflex-webcam"
}
JSON
