OpenCV webcam feed running on Streamlit isn't showing output

Summary

I have been trying to put this demo of Mediapipe on Streamlit Cloud. The demo shows up and works fine on my computer, but when I upload it to Streamlit Cloud I see the text, but the webcam feed isn’t there. Here’s a photo of what i see:

If you have any suggestions or questions please feel free to tell me.

Debug info

  • Streamlit version: 1.20.0
  • Python version: 3.7.1
  • Operating System: Windows 11 Pro 22h2
  • Browser: Chrome
  • Virtual environment: python venv

Reproducible Code Example:

import cv2
import mediapipe as mp
import numpy as np
import streamlit as st

mp_drawing = mp.solutions.drawing_utils
mp_drawing_styles = mp.solutions.drawing_styles
mp_pose = mp.solutions.pose
stframe = st.empty()

IMAGE_FILES = []
BG_COLOR = (192, 192, 192)
with mp_pose.Pose(
    static_image_mode=True,
    model_complexity=2,
    enable_segmentation=True,
    min_detection_confidence=0.5) as pose:
  for idx, file in enumerate(IMAGE_FILES):
    image = cv2.imread(file)
    image_height, image_width, _ = image.shape
    results = pose.process(cv2.cvtColor(image, cv2.COLOR_BGR2RGB))

    if not results.pose_landmarks:
      continue
    print(
        f'Nose coordinates: ('
        f'{results.pose_landmarks.landmark[mp_pose.PoseLandmark.NOSE].x * image_width}, '
        f'{results.pose_landmarks.landmark[mp_pose.PoseLandmark.NOSE].y * image_height})'
    )

    annotated_image = image.copy()
    condition = np.stack((results.segmentation_mask,) * 3, axis=-1) > 0.1
    bg_image = np.zeros(image.shape, dtype=np.uint8)
    bg_image[:] = BG_COLOR
    annotated_image = np.where(condition, annotated_image, bg_image)
    mp_drawing.draw_landmarks(
        annotated_image,
        results.pose_landmarks,
        mp_pose.POSE_CONNECTIONS,
        landmark_drawing_spec=mp_drawing_styles.get_default_pose_landmarks_style())
    cv2.imwrite('/tmp/annotated_image' + str(idx) + '.png', annotated_image)
    mp_drawing.plot_landmarks(
        results.pose_world_landmarks, mp_pose.POSE_CONNECTIONS)
st.title("Mediapipe Feed")
cap = cv2.VideoCapture(0)
with mp_pose.Pose(
    min_detection_confidence=0.5,
    min_tracking_confidence=0.5) as pose:
  while cap.isOpened():
    success, image = cap.read()
    if not success:
      print("Ignoring empty camera frame.")
      continue

    image.flags.writeable = False
    image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
    results = pose.process(image)

    image.flags.writeable = True
    image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
    mp_drawing.draw_landmarks(
        image,
        results.pose_landmarks,
        mp_pose.POSE_CONNECTIONS,
        landmark_drawing_spec=mp_drawing_styles.get_default_pose_landmarks_style())
    stframe.image(image,  channels="BGR")

cap.release()
cap.destroyALLWindows()

Hi @infernoyt213, welcome to the forum! :wave: :smile:

Here are some related threads from the past about why you’ll be unable to access users’ webcam feeds with Streamlit and opencv on Community Cloud and other deployment platforms.

You’d need to use a custom component such as streamlit-webrtc:

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.