# 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.8+):
```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.
Raw data
{
"_id": null,
"home_page": null,
"name": "reflex-webcam",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "reflex, reflex-custom-components",
"author": null,
"author_email": "Tom Gotsman <tgotsman12@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/7b/56/34c8f06aa2f3589b6d4bb73ed2b0b5450d83b67cc254b72beee360c425b5/reflex_webcam-0.0.6.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.8+):\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",
"bugtrack_url": null,
"license": "Apache-2.0",
"summary": "Reflex custom component webcam",
"version": "0.0.6",
"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": "",
"digests": {
"blake2b_256": "088d655f1ae83eb3dc60abc045c404dd168ecfcb885fa2a1a9627e39f772c5d3",
"md5": "22783a3126ec916abab0ea35f3c7f5b3",
"sha256": "3bfa9e28b69761752922670a017e80811a79f287585691ee9a8aa769457497f1"
},
"downloads": -1,
"filename": "reflex_webcam-0.0.6-py3-none-any.whl",
"has_sig": false,
"md5_digest": "22783a3126ec916abab0ea35f3c7f5b3",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 5202,
"upload_time": "2024-09-25T18:26:33",
"upload_time_iso_8601": "2024-09-25T18:26:33.898099Z",
"url": "https://files.pythonhosted.org/packages/08/8d/655f1ae83eb3dc60abc045c404dd168ecfcb885fa2a1a9627e39f772c5d3/reflex_webcam-0.0.6-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "7b5634c8f06aa2f3589b6d4bb73ed2b0b5450d83b67cc254b72beee360c425b5",
"md5": "36b440fe688fcc7505b820b6e9453416",
"sha256": "dc0e43c27a12db30434d7fb4cdbb409a9b1173349e8fd6c4a76f2f8e583fb966"
},
"downloads": -1,
"filename": "reflex_webcam-0.0.6.tar.gz",
"has_sig": false,
"md5_digest": "36b440fe688fcc7505b820b6e9453416",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 4950,
"upload_time": "2024-09-25T18:26:35",
"upload_time_iso_8601": "2024-09-25T18:26:35.123256Z",
"url": "https://files.pythonhosted.org/packages/7b/56/34c8f06aa2f3589b6d4bb73ed2b0b5450d83b67cc254b72beee360c425b5/reflex_webcam-0.0.6.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-09-25 18:26:35",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "tgberkeley",
"github_project": "reflex-webcam",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "reflex-webcam"
}
JSON
