Fallback to using the camera component due to an issue with real-time video streaming in the hosted app

app.py

@@ -3,6 +3,7 @@ from streamlit_webrtc import webrtc_streamer
 import av
 import mediapipe as mp
 import numpy as np
+from PIL import Image
 
 mp_hands = mp.solutions.hands
 mp_hands_connections = mp.solutions.hands_connections
@@ -19,24 +20,29 @@ connections = {
     'HAND_PINKY_FINGER_CONNECTIONS': mp_hands_connections.HAND_PINKY_FINGER_CONNECTIONS,
 }
 
-st.title('Hand & Finger Tracking')
-st.markdown("This is a demo of hand and finger tracking using [Google's MediaPipe](https://google.github.io/mediapipe/solutions/hands.html).")
-draw_background = st.checkbox("Draw background", value=True)
-selected_connection = st.selectbox("Select connections to draw", list(connections.keys()))
-
-def process_hands(frame):
-  img = frame.to_ndarray(format="bgr24")
+def process_hands(img):
   results = hands.process(img)
   output_img = img if draw_background else np.zeros_like(img)  
   if results.multi_hand_landmarks:
     for hand_landmarks in results.multi_hand_landmarks:
       mp_draw.draw_landmarks(output_img, hand_landmarks, connections[selected_connection])    
-  return av.VideoFrame.from_ndarray(output_img, format="bgr24")
+  return output_img
+
+st.title('Hand & Finger Tracking')
+st.markdown("This is a demo of hand and finger tracking using [Google's MediaPipe](https://google.github.io/mediapipe/solutions/hands.html).")
+
+col1, col2 = st.columns(2)
+
+with col1:
+  picture = st.camera_input("Take a picture")
+  draw_background = st.checkbox("Draw background", value=True)
+  selected_connection = st.selectbox("Select connections to draw", list(connections.keys()))
 
-webrtc_streamer(
-  key="streamer", 
-  video_frame_callback=process_hands,
-  media_stream_constraints={"video": True, "audio": False},
-  )
+with col2:
+  if picture is not None:
+    img = Image.open(picture)
+    img_array = np.array(img)
+    processed_img = process_hands(img_array)
+    st.image(processed_img)