A video chat app with realtime snapchat-like filters!

Show the Community!
1

Hi community,

I created a video chat app using streamlit-webrtc and streamlit-server-state.

streamlit-video-chat-example
streamlit-video-chat-example1280×1103 45.5 KB

As posted at New library: streamlit-server-state, a new way to share states across sessions on the server, different sessions can communicate with each other by using streamlit-server-state.
With combination of this feature and the media stream capability of streamlit-webrtc, a video chat system can be built on top of Streamlit.

Thanks to streamlit-webrtc, arbitrary kinds of video/audio processing can be injected into the streams flowing in the chat room. Actually, face detection and image overlay with OpenCV are running in the example above (The Ironman and the laughing man in the picture are not added in postprocess, but actually overlaid at runtime!).

The repository is here: GitHub - whitphx/streamlit-video-chat-example

Notes:

  • This video chat app should not be deployed on a public location because it does not have authentication mechanisms and is vulnerable to malicious attacks like zoom-bombing.
  • This video chat app is just a PoC project. It is not at production-level like Zoom or Meet at all in many aspects. If you want to build a production-level video chat system, you should choose other technologies.
6 Likes
2

This program works fine if I use from Local URL: http://localhost:8501
But when I show Network URL: http://192.168.10.9:8501 and click the “SELECT DEVICE” button,
the following error message shows up and cannot go further.

Error Message:
Component Error
Cannot set properties of undefined (setting ‘ondevicechange’)

How can I do ?