Summary
I am trying to port my app to Streamlit community cloud. I wrote the code and its working fine. However, the webcam window is showing as a separate window instead of being integrated in the cloud interface.
Steps to reproduce
Code snippet:
import cv2
import mediapipe as mp
from mediapipe.tasks import python
import threading
import streamlit as st
class GestureRecognizer:
def main(self):
num_hands = 2
model_path = "gesture_recognizer.task"
GestureRecognizer = mp.tasks.vision.GestureRecognizer
GestureRecognizerOptions = mp.tasks.vision.GestureRecognizerOptions
VisionRunningMode = mp.tasks.vision.RunningMode
self.lock = threading.Lock()
self.current_gestures = []
options = GestureRecognizerOptions(
base_options=python.BaseOptions(model_asset_path=model_path),
running_mode=VisionRunningMode.LIVE_STREAM,
num_hands = num_hands,
result_callback=self.__result_callback)
recognizer = GestureRecognizer.create_from_options(options)
timestamp = 0
mp_drawing = mp.solutions.drawing_utils
mp_hands = mp.solutions.hands
hands = mp_hands.Hands(
static_image_mode=False,
max_num_hands=num_hands,
min_detection_confidence=0.65,
min_tracking_confidence=0.65)
cap = cv2.VideoCapture(0)
while True:
ret, frame = cap.read()
if not ret:
break
frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
results = hands.process(frame)
frame = cv2.cvtColor(frame, cv2.COLOR_RGB2BGR)
np_array = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
if results.multi_hand_landmarks:
for hand_landmarks in results.multi_hand_landmarks:
mp_drawing.draw_landmarks(frame, hand_landmarks, mp_hands.HAND_CONNECTIONS)
mp_image = mp.Image(image_format=mp.ImageFormat.SRGB, data=np_array)
recognizer.recognize_async(mp_image, timestamp)
timestamp = timestamp + 1 # should be monotonically increasing, because in LIVE_STREAM mode
self.put_gestures(frame)
cv2.imshow('MediaPipe Hands', frame)
if cv2.waitKey(1) & 0xFF == 27:
break
cap.release()
def put_gestures(self, frame):
self.lock.acquire()
gestures = self.current_gestures
self.lock.release()
y_pos = 50
for hand_gesture_name in gestures:
# show the prediction on the frame
cv2.putText(frame, hand_gesture_name, (10, y_pos), cv2.FONT_HERSHEY_SIMPLEX,
1, (0,0,255), 2, cv2.LINE_AA)
y_pos += 50
def __result_callback(self, result, output_image, timestamp_ms):
#print(f'gesture recognition result: {result}')
self.lock.acquire() # solves potential concurrency issues
self.current_gestures = []
if result is not None and any(result.gestures):
print("Recognized gestures:")
for single_hand_gesture_data in result.gestures:
gesture_name = single_hand_gesture_data[0].category_name
print(gesture_name)
self.current_gestures.append(gesture_name)
self.lock.release()
if __name__ == "__main__":
rec = GestureRecognizer()
rec.main()
If applicable, please provide the steps we should take to reproduce the error or specified behavior.
Expected behavior:
I would like to be able to view the webcam window completely integrated within the Streamlit cloud interface.
Actual behavior:
The webcam window is showing as a separate window instead of being integrated in the cloud interface.
Debug info
- Streamlit version: 1.22.0
- Python version: 3.9.16
- Using Conda? PipEnv? PyEnv? Pex? Conda
- OS version: Windows 11
- Browser version: Edge Version 113.0.1774.57 (Official build) (64-bit)
Requirements file
absl-py==1.4.0
attrs==23.1.0
black==23.3.0
cffi==1.15.1
click==8.1.3
colorama==0.4.6
contourpy==1.0.7
cycler==0.11.0
flake8==6.0.0
flatbuffers==23.5.26
fonttools==4.39.4
importlib-resources==5.12.0
isort==5.12.0
kiwisolver==1.4.4
matplotlib==3.7.1
mccabe==0.7.0
mediapipe==0.10.0
mypy==1.3.0
mypy-extensions==1.0.0
numpy==1.24.3
opencv-contrib-python==4.7.0.72
opencv-python==4.7.0.72
packaging==23.1
pathspec==0.11.1
Pillow==9.5.0
platformdirs==3.5.1
protobuf==3.20.3
pycodestyle==2.10.0
pycparser==2.21
pyflakes==3.0.1
pyparsing==3.0.9
python-dateutil==2.8.2
six==1.16.0
sounddevice==0.4.6
tomli==2.0.1
typing_extensions==4.6.2
zipp==3.15.0
Links
- Link to your GitHub repo: Not applicable.
- Link to your deployed app: Deployed locally for testing.
Additional information
Not applicable.