Live webcam feed into the web app

[Shubham]

There are plenty of use cases like object detection, segmentation, neural style transfer or even some basic image filters, where we require live video feed from webcam to process the image and do further inferences. It will be very interesting and helpful if future releases of streamlit will include this feature.

When I checked API reference, I got https://streamlit.io/docs/api.html#streamlit.video , but it does not serve the purpose. Just a feature request for future version.

[robmarkcole]

I am doing low FPS webcam display via Streamlit: https://github.com/robmarkcole/mqtt-camera-streamer

[malraharsh]

After much struggling I finally found a way to access webcam smoothly.

The main trick here is to make a frame window, and to keep updating it with current frame.

The code -

import cv2
import streamlit as st

st.title("Webcam Live Feed")
run = st.checkbox('Run')
FRAME_WINDOW = st.image([])
camera = cv2.VideoCapture(0)

while run:
    _, frame = camera.read()
    frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
    FRAME_WINDOW.image(frame)
else:
    st.write('Stopped')

[Jose_Antonio_Taquia]

Thks a lot. Great work. I run your code on CLI an it works fine

But when im trying to deploy your example using streamlit share

jtaquia/open_cv_CAMERA_STREAMLIT

get this error

[manager] Error checking Streamlit healthz: Get “http://localhost:8501/healthz”: dial tcp 127.0.0.1:8501: connect: connection refused

Could you deploy it on stream lit ??

Tkxs in advance for your answer

[malraharsh]

Sorry @Jose_Antonio_Taquia for not mentioning, but this works locally only in the browser. Streamlit currently doesn’t support webcam in shared app mode.

[chris_klose]

Hey guys, the camera api is quite useful. Are you planing to implement a version that is also supported with sharing?

[Venu_Kumar]

i getting this error, please suggest

[Cao_T]

Thanks very much. It works perfectly with your code.
However, suppose I want to capture a frame by clicking a button in streamlit, how can I do this with your code. I tried a lot but it did not work.

[Sunix_Liu]

For tasks like object detection, segmentation and neural style transfer etc., a better way is using Tensorflow.js, which only uses client’s CPU or GPU to do the calculation, otherwise, all will be done on the server side, this means you cannot use the app for mass deployement, also this may cause privacy concern.