Possible to access webcam realtime in a streamlit app?

Using Streamlit
1

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?

2

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
3

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
4

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

2 Likes
5

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')
6

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.

7

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
8

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

9

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

2 Likes
10

@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