Possible to access webcam realtime in a streamlit app?

I want to try and build a realtime multi digit recognition app for work, but I am unsure how to interface with a webcam through a browser.

Can someone point me in the right direction to interface a webcam with streamlit?

Hey @peterstorm :wave: ,

This seems like an awesome project. If it isn’t confidential we’d love to see it when finished :blush:. @robmarkcole has a repo where he is doing FBS webcam display through Streamlit. Here is a link to the forum topic discussing it. Hope this helps and feel free to let us know if you’re looking for different functionality!

1 Like

That definitely seems usable, but I guess I was more looking at an API that could give the browser access to the webcam, and then streamlit - but I think I can make your linked example work :slight_smile:

2 Likes

Hi @peterstorm
your use case sounds interesting, let me know if I can assist
Cheers

2 Likes

Hi @peterstorm, 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')

Hello @malraharsh,

Thanks for sharing your code. When I tried it locally it works perfectly but seems not working when I share.
I got errors like below, it seems it cannot access to camera source

error: OpenCV(4.5.1) /tmp/pip-req-build-hj027r8z/opencv/modules/imgproc/src/color.cpp:182: error: (-215:Assertion failed) !_src.empty() in function 'cvtColor'
File "/app/adas_demo/streamlit.py", line 11, in <module>
frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

Didn’t you have a same issue? I’d like to know how you fixed.

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

1 Like

Hi community… I want to ask like how much time it’ll take or any other way to get input of image directly from webcam or take video directly from webcam like what happens in GOOGLE MEET
… I’m making a Face Detection App… And i think it would be a bit better way… Also when i run the app in phone… i usually see i cant use img from mobile camera it shows cant give due to less resources then page refreshes and in last i ve to upload already taken PIC.

And can also we add JS,CSS to our streamlit Pages… THANKS

by: Arnav Mehta

Hi, see the link below. This might be useful for that purpose.

2 Likes

@malraharsh Thank You soo much bro.

I have a small query,— " how to take a picture using the webcam in streamlit from browser "

Kindly help me out bro.

1 Like