Webcam HTML component

[Luke]

Hey everyone, I’m attempting to use a custom html component to access the webcam in a streamlit app.

I have the webcam html/js from this codepen, which I’ve refactored into a single html file webcam2.html, and this works fine in the browser (once you have accepted the permissions).

Then using streamlit.components.v1.html I am displaying the same html/js inside a streamlit app called webcam.py.

And the app running,

Streamlit gets pretty close to rendering the whole thing(!) but once you start the camera (with the get video button), an error occurs saying “webcam not working”. It seems to me the media permissions are not being requested/communicated through the embedded html? Would be great to have some help on this because webcam access would be absolutely killer.

[napoles3d]

Proof that it is working!!

[napoles3d]

Just to clarify,
Using webcam.py and webcam2.htm in the repo of @Luke does the work. I think it is working now after upgrading to the new streamlit 0.73.0

Cheers!!

[Luke]

Thank you @napoles3d! I’m just reading now about it now in the streamlit 0.73 iframe “allow-same-origin” blog post What a great update.