Upload 16 files

.cruft.json

@@ -0,0 +1,20 @@
+{
+  "template": "https://github.com/blackary/cookiecutter-streamlit-component/",
+  "commit": "c972054b7b0890a1aa1c02e792bedc71c525ea87",
+  "checkout": null,
+  "context": {
+    "cookiecutter": {
+      "author_name": "Zachary Blackwood",
+      "author_email": "[email protected]",
+      "project_name": "Streamlit Camera Input Live",
+      "package_name": "streamlit-camera-input-live",
+      "import_name": "camera_input_live",
+      "description": "Alternative version of st.camera_input which returns the webcam images live, without any button press needed",
+      "deployment_via_github_actions": "y",
+      "working_with_dataframes": "n",
+      "open_source_license": "MIT license",
+      "_template": "https://github.com/blackary/cookiecutter-streamlit-component/"
+    }
+  },
+  "directory": null
+}

.flake8

@@ -0,0 +1,20 @@
+[flake8]
+max-line-length = 88
+select =
+    E # pep8 errors
+    F # pyflakes errors
+    W # pep8 warnings
+    B # flake8-bugbear warnings
+ignore =
+    E501 # "Line lengths are recommended to be no greater than 79 characters"
+    E203 # "Whitespace before ':'": conflicts with black
+    W503 # "line break before binary operator": conflicts with black
+exclude =
+    .git
+    .vscode
+    .pytest_cache
+    .mypy_cache
+    .venv
+    .env
+    .direnv
+per-file-ignores =

.gitignore

@@ -0,0 +1,109 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# OSX useful to ignore
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+env/
+venv/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*,cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+
+# Sphinx documentation
+docs/_build/
+
+# IntelliJ Idea family of suites
+.idea
+*.iml
+## File-based project format:
+*.ipr
+*.iws
+## mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# PyBuilder
+target/
+
+# Cookiecutter
+output/
+python_boilerplate/
+cookiecutter-pypackage-env/
+
+# IDE settings
+.vscode/
+
+# direnv
+.envrc
+.direnv/
+
+# streamlit
+.streamlit/secrets.toml

.pre-commit-config.yaml

@@ -0,0 +1,19 @@
+repos:
+- repo: https://github.com/astral-sh/ruff-pre-commit
+  rev: v0.8.3
+  hooks:
+  - id: ruff
+    args:
+    - --fix
+  - id: ruff-format
+- repo: https://github.com/pre-commit/mirrors-mypy
+  rev: v1.13.0
+  hooks:
+  - id: mypy
+    args:
+    - --ignore-missing-imports
+    - --follow-imports=silent
+- repo: https://github.com/pre-commit/pre-commit-hooks
+  rev: v5.0.0 # Use the ref you want to point at
+  hooks:
+  - id: trailing-whitespace

LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022, Zachary Blackwood
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

MANIFEST.in

@@ -0,0 +1,3 @@
+recursive-include src/camera_input_live/frontend *
+include README.md
+include LICENSE

example_app/requirements.txt

@@ -0,0 +1,2 @@
+streamlit-camera-input-live
+opencv-python-headless

example_app/streamlit_app.py

@@ -0,0 +1,26 @@
+import cv2
+import numpy as np
+import streamlit as st
+
+from camera_input_live import camera_input_live
+
+"# Streamlit camera input live Demo"
+"## Try holding a qr code in front of your webcam"
+
+image = camera_input_live()
+
+if image is not None:
+    st.image(image)
+    bytes_data = image.getvalue()
+    cv2_img = cv2.imdecode(np.frombuffer(bytes_data, np.uint8), cv2.IMREAD_COLOR)
+
+    detector = cv2.QRCodeDetector()
+
+    data, bbox, straight_qrcode = detector.detectAndDecode(cv2_img)
+
+    if data:
+        st.write("# Found QR code")
+        st.write(data)
+        with st.expander("Show details"):
+            st.write("BBox:", bbox)
+            st.write("Straight QR code:", straight_qrcode)

pyproject.toml

@@ -0,0 +1,49 @@
+[tool.ruff]
+exclude = [
+    ".git",
+    ".vscode",
+    ".pytest_cache",
+    ".bamboo",
+    ".tecton",
+    ".mypy_cache",
+    ".env",
+]
+ignore = [
+    "B008",
+    "ISC001",
+    "E501",
+    "W191"
+]
+line-length = 88
+select = [
+    "B", # https://pypi.org/project/flake8-bugbear/
+    "E", # https://pycodestyle.pycqa.org/en/latest/intro.html#error-codes
+    "F", # https://flake8.pycqa.org/en/latest/user/error-codes.html
+    "W", # https://pycodestyle.pycqa.org/en/latest/intro.html#error-codes
+    "I", # https://pycqa.github.io/isort/
+    "N", # https://github.com/PyCQA/pep8-naming
+    "C4", # https://github.com/adamchainz/flake8-comprehensions
+    "EXE", # https://pypi.org/project/flake8-executable/
+    "ISC", # https://github.com/flake8-implicit-str-concat/flake8-implicit-str-concat
+    "ICN", # https://pypi.org/project/flake8-import-conventions/
+    "PIE", # https://pypi.org/project/flake8-pie/
+    "PT", # https://github.com/m-burst/flake8-pytest-style
+    "RET", # https://pypi.org/project/flake8-return/
+    "SIM", # https://pypi.org/project/flake8-simplify/
+    "ERA", # https://pypi.org/project/flake8-eradicate/
+    "PLC", # https://beta.ruff.rs/docs/rules/#convention-plc
+    "RUF", # https://beta.ruff.rs/docs/rules/#ruff-specific-rules-ruf
+    "ARG", # https://beta.ruff.rs/docs/rules/#flake8-unused-arguments-arg
+]
+
+[tool.ruff.per-file-ignores]
+"__init__.py" = ["F401"]
+
+[tool.mypy]
+files = [
+  "**/*.py",
+]
+follow_imports = "silent"
+ignore_missing_imports = true
+scripts_are_modules = true
+python_version = 3.9

requirements.txt

@@ -0,0 +1 @@
+streamlit

setup.py

@@ -0,0 +1,23 @@
+from pathlib import Path
+
+import setuptools
+
+this_directory = Path(__file__).parent
+long_description = (this_directory / "README.md").read_text()
+
+setuptools.setup(
+    name="streamlit-camera-input-live",
+    version="0.2.0",
+    author="Zachary Blackwood",
+    author_email="[email protected]",
+    description="Alternative version of st.camera_input which returns the webcam images live, without any button press needed",
+    long_description=long_description,
+    long_description_content_type="text/markdown",
+    packages=setuptools.find_packages(where="src"),
+    package_dir={"": "src"},
+    include_package_data=True,
+    classifiers=[],
+    python_requires=">=3.7",
+    install_requires=["streamlit>=1.2", "jinja2"],
+    url="https://github.com/blackary/streamlit-camera-input-live",
+)

src/camera_input_live/__init__.py

@@ -0,0 +1,57 @@
+import base64
+from io import BytesIO
+from pathlib import Path
+from typing import Optional
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+# Tell streamlit that there is a component called camera_input_live,
+# and that the code to display that component is in the "frontend" folder
+frontend_dir = (Path(__file__).parent / "frontend").absolute()
+_component_func = components.declare_component(
+    "camera_input_live", path=str(frontend_dir)
+)
+
+
+def camera_input_live(
+    debounce: int = 1000,
+    height: int = 530,
+    width: int = 704,
+    key: Optional[str] = None,
+    show_controls: bool = True,
+    start_label: str = "Start capturing",
+    stop_label: str = "Pause capturing",
+) -> Optional[BytesIO]:
+    """
+    Add a descriptive docstring
+    """
+    b64_data: Optional[str] = _component_func(
+        height=height,
+        width=width,
+        debounce=debounce,
+        showControls=show_controls,
+        startLabel=start_label,
+        stopLabel=stop_label,
+        key=key,
+    )
+
+    if b64_data is None:
+        return None
+
+    raw_data = b64_data.split(",")[1]  # Strip the data: type prefix
+
+    return BytesIO(base64.b64decode(raw_data))
+
+
+def main():
+    st.write("## Example")
+
+    image = camera_input_live(show_controls=True)
+
+    if image is not None:
+        st.image(image)
+
+
+if __name__ == "__main__":
+    main()

src/camera_input_live/frontend/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>streamlit-camera-input-live</title>
+    <script src="./streamlit-component-lib.js"></script>
+    <script src="./main.js"></script>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <button id="button">Stop</button>
+    <div class="padding"></div>
+    <div id="container">
+      <video id="video" autoplay="true"></video>
+      <canvas id="canvas"> </canvas>
+    </div>
+  </body>
+</html>

src/camera_input_live/frontend/main.js

@@ -0,0 +1,111 @@
+// The `Streamlit` object exists because our html file includes
+// `streamlit-component-lib.js`.
+// If you get an error about "Streamlit" not being defined, that
+// means you're missing that file.
+
+function sendValue(value) {
+  Streamlit.setComponentValue(value)
+}
+
+
+
+/**
+ * The component's render function. This will be called immediately after
+ * the component is initially loaded, and then again every time the
+ * component gets new data from Python.
+ */
+function onRender(event) {
+  // Only run the render code the first time the component is loaded.
+  if (!window.rendered) {
+    // You most likely want to get the data passed in like this
+    const {height, width, debounce, showControls, startLabel, stopLabel} = event.detail.args
+
+    if (showControls) {
+      Streamlit.setFrameHeight(45)
+    }
+
+    if (isNaN(height)) {
+      height = width / (4/3);
+    }
+
+    let video = document.getElementById('video');
+    let canvas = document.getElementById('canvas');
+    let button = document.getElementById('button');
+
+    let stopped = false;
+
+    video.setAttribute('width', width);
+    video.setAttribute('height', height);
+    canvas.setAttribute('width', width);
+    canvas.setAttribute('height', height);
+
+    function takepicture() {
+      if (stopped) {
+        return;
+      }
+      let context = canvas.getContext('2d');
+      canvas.width = width;
+      canvas.height = height;
+      context.drawImage(video, 0, 0, width, height);
+
+      var data = canvas.toDataURL('image/png');
+      sendValue(data);
+    }
+
+
+    function stopVideo() {
+      video.pause();
+      video.srcObject.getTracks()[0].stop();
+      stopped = true;
+    }
+
+    function startVideo() {
+      navigator.mediaDevices.getUserMedia({ video: true })
+        .then(function(stream) {
+          video.srcObject = stream;
+          video.play();
+        })
+        .catch(function(err) {
+          console.log("An error occurred: " + err);
+        });
+    }
+
+    function toggleVideo() {
+      if (stopped) {
+        startVideo();
+        stopped = false;
+      } else {
+        stopVideo();
+        stopped = true;
+      }
+      // Toggle the button text
+      button.textContent = stopped ? startLabel : stopLabel;
+    }
+
+    if (navigator.mediaDevices.getUserMedia) {
+      navigator.mediaDevices
+        .getUserMedia({ video: true })
+        .then(function (stream) {
+          video.srcObject = stream;
+        })
+        .catch(function (error) {
+          console.log("Something went wrong!");
+          console.error(error);
+        });
+    }
+
+    button.addEventListener('click', toggleVideo);
+    button.textContent = stopped ? startLabel : stopLabel;
+
+    takepicture();
+    setInterval(takepicture, debounce);
+    window.rendered = true
+  }
+}
+
+// Render the component whenever python send a "render event"
+Streamlit.events.addEventListener(Streamlit.RENDER_EVENT, onRender)
+// Tell Streamlit that the component is ready to receive events
+Streamlit.setComponentReady()
+// Don't actually need to display anything, so set the height to 0
+Streamlit.setFrameHeight(0)

src/camera_input_live/frontend/streamlit-component-lib.js

@@ -0,0 +1,34 @@
+
+// Borrowed minimalistic Streamlit API from Thiago
+// https://discuss.streamlit.io/t/code-snippet-create-components-without-any-frontend-tooling-no-react-babel-webpack-etc/13064
+function sendMessageToStreamlitClient(type, data) {
+  console.log(type, data)
+  const outData = Object.assign({
+      isStreamlitMessage: true,
+      type: type,
+  }, data);
+  window.parent.postMessage(outData, "*");
+}
+
+const Streamlit = {
+  setComponentReady: function() {
+      sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
+  },
+  setFrameHeight: function(height) {
+      sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
+  },
+  setComponentValue: function(value) {
+      sendMessageToStreamlitClient("streamlit:setComponentValue", {value: value});
+  },
+  RENDER_EVENT: "streamlit:render",
+  events: {
+      addEventListener: function(type, callback) {
+          window.addEventListener("message", function(event) {
+              if (event.data.type === type) {
+                  event.detail = event.data
+                  callback(event);
+              }
+          });
+      }
+  }
+}

src/camera_input_live/frontend/style.css

@@ -0,0 +1,43 @@
+button {
+  text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-font-smoothing: auto;
+  box-sizing: border-box;
+  font-size: inherit;
+  font-family: inherit;
+  overflow: visible;
+  text-transform: none;
+  appearance: button;
+  display: inline-flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  font-weight: 400;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0.25rem;
+  margin: 0px;
+  line-height: 1.6;
+  color: inherit;
+  width: auto;
+  user-select: none;
+  background-color: rgb(255, 255, 255);
+  border: 1px solid rgba(49, 51, 63, 0.2);
+  cursor: pointer;
+  position: absolute;
+  left: 0;
+}
+
+button:hover {
+  border-color: rgb(255, 75, 75);
+  color: rgb(255, 75, 75);
+}
+button:active {
+  color: rgb(255, 255, 255);
+  border-color: rgb(255, 75, 75);
+  background-color: rgb(255, 75, 75);
+}
+
+.padding {
+  height: 100px;
+}