Add controls for pausing captures

blackary · Sep 27, 2022 · 2f0fc65 · 2f0fc65
1 parent ee5d5d6
commit 2f0fc65
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 20 deletions.
diff --git a/src/camera_input_live/__init__.py b/src/camera_input_live/__init__.py
@@ -19,6 +19,9 @@ def camera_input_live(
     height: int = 530,
     width: int = 704,
     key: Optional[str] = None,
+    showControls: bool = True,
+    startLabel: str = "Start capturing",
+    stopLabel: str = "Pause capturing",
 ) -> Optional[BytesIO]:
     """
     Add a descriptive docstring
@@ -27,6 +30,9 @@ def camera_input_live(
         height=height,
         width=width,
         debounce=debounce,
+        showControls=showControls,
+        startLabel=startLabel,
+        stopLabel=stopLabel,
         key=key,
     )
 
@@ -40,7 +46,8 @@ def camera_input_live(
 
 def main():
     st.write("## Example")
-    image = camera_input_live()
+
+    image = camera_input_live(showControls=True)
 
     if image is not None:
         st.image(image)

diff --git a/src/camera_input_live/frontend/index.html b/src/camera_input_live/frontend/index.html
@@ -10,23 +10,11 @@
     <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>
-    <script>
-      var video = document.querySelector("#videoElement");
-
-      if (navigator.mediaDevices.getUserMedia) {
-        navigator.mediaDevices
-          .getUserMedia({ video: true })
-          .then(function (stream) {
-            video.srcObject = stream;
-          })
-          .catch(function (error) {
-            console.log("Something went wrong!");
-          });
-      }
-    </script>
   </body>
 </html>
diff --git a/src/camera_input_live/frontend/main.js b/src/camera_input_live/frontend/main.js
@@ -18,23 +18,31 @@ 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} = event.detail.args
+    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);
 
-    console.log(height, width)
-
     function takepicture() {
+      if (stopped) {
+        return;
+      }
       let context = canvas.getContext('2d');
       canvas.width = width;
       canvas.height = height;
@@ -44,6 +52,36 @@ function onRender(event) {
       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 })
@@ -56,6 +94,9 @@ function onRender(event) {
         });
     }
 
+    button.addEventListener('click', toggleVideo);
+    button.textContent = stopped ? startLabel : stopLabel;
+
     takepicture();
     setInterval(takepicture, debounce);
     window.rendered = true

diff --git a/src/camera_input_live/frontend/style.css b/src/camera_input_live/frontend/style.css
@@ -1,3 +1,43 @@
-video,
-canvas {
+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;
 }