Inconsistent issue with streamlit-webrtc in streamlit app

[araii]

          A post in https://github.com/aiortc/aiortc/issues/85 says

Maybe the root cause is something weird happening in the python selector generated by others things that share the same event loop.

---

Hypothesis:

• The WebRTC connection is properly closed as ICE failed under this network environment ("ICE connection state is closed")
• So the event loop is closed or stopped in weird state.

Originally posted by @whitphx in https://github.com/whitphx/streamlit-webrtc/issues/552#issuecomment-987885401

---

A similar issue has occured again , it affects your component page in streamlit as well - https://webrtc.streamlit.app/

I checked if STUN server (stun.l.google.com:19302) is down on this site https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/

it seems that the stun server is working fine. Any idea what is causing the error? Please find attached logged screenshot of the error.

Do advise if this is something that can be fixed? maybe from asyncio lib? or what?

[araii]

update -

tested server (stun.l.google.com:19302) on https://smarthome-webrtc-validator.withgoogle.com/ attached is the error i received from Devtools

stun server error: 701 - but I tried other free stun servers, all 5 random servers I chose did not worked...can you please help look into this?

[araii]

Update - tried running streamlit-webrtc component on my app page, it still fails, please find attached screenshot of the issue tracked on Chrome Dev tool - hope it can help in figuring out what is going on - it seems that the 'index.ts' file...is getting connection closed after sending SDP offer.

I check STUN server on TrickleICE - its working fine. but i don't know why it is returning closeconnection - please see screenshot

I tested STUN server on webrtc-validator tool with google - it is also facing the same issue - connection state changed - disconnected.

by the way @whitphx - your page is showing the "error running app" page again.

[whitphx]

@araii Sorry for late reply. I confirmed it was not working, while it worked well weeks ago.

I am asking the Streamlit Cloud team member, and as the core team member mentioned in the issue you created (https://github.com/streamlit/streamlit/issues/6330), it looks like there has been some changes on the network of the community cloud.

First of all, the WebRTC connection is kind of "hack" that bypasses Streamlit's normal server-client connection, so we can't blame them for this issue. And I also think using a TURN server as written in the README should be the solution, in the scope of the WebRTC's standard.

Let me take time to consider the way to host a TURN server and use it from the community cloud in a security way.

[georgetanaselea]

Hi @whitphx I was wondering if you had any updates on this? Any idea what is causing the issue?

Many thanks!

[araii]

Thank you @whitphx for responding.

Yes, was puzzled that STUN server stop working, so I did use a free TURN server from open relay. It worked but the latency was not good but at least it was working. But before I can demo, it fail again 2 days later, hence I open new ticket.

First of all, the WebRTC connection is kind of "hack" that bypasses Streamlit's normal server-client connection, so we can't blame them for this issue.

Yes but if webrtc component was working all this while, and given that all factors (network, device, urls, lib version) had remain the same - there is no reason for it to fail unless something changed in the cloud network settings.

Now page is stuck at "App is booting" - so can't test anything. I really hope this unstablity is due to the migration and can get resolved soon.

Let me take time to consider the way to host a TURN server and use it from the community cloud in a security way.

That would be great! Perhaps the latency would improve if that is the case. Thank you.

[georgetanaselea]

Hi @araii could you please share more details on how you fixed the issue?

I have created a TURN server with metered.ca but I cannot seem to make it work as I get the same error as you.

Any help would be appreciated, thanks a lot!

[araii]

Hi @araii could you please share more details on how you fixed the issue?

I have created a TURN server with metered.ca but I cannot seem to make it work as I get the same error as you.

Any help would be appreciated, thanks a lot!

Hi @georgetanaselea , currently theres no fix for this. As stated here by @whitphx (https://github.com/whitphx/streamlit-webrtc/issues/1213#issuecomment-1474108148)

If i understand the situation correctly, do correct me if I am wrong:-

1. there has been some changes in the network in community cloud causing the STUN server to stop working, so if https://webrtc.streamlit.app/ is not working in streamlit, most likely your app will also not work.
2. @whitphx will think of a way to host a TURN server from the community cloud with security measures

Conclusion for now: STUN server use to work until streamlit changed some settings in the network in the community cloud and - that may have screw up the webrtc connection. Open ticket here https://github.com/streamlit/streamlit/issues/6330#issue-1628796485 Still waiting for it to be resolved..

I tried adding a TURN server, it worked for awhile, but then it stopped working 2 days later. Not sure if it will work for you but the code for adding TURN server can be found here. https://github.com/whitphx/streamlit-webrtc/issues/335#issuecomment-897326755

[zivp100]

Has anyone tested it on another cloud provider, like Heroku?

[georgetanaselea]

Hi @araii,

I tried adding a TURN server, it worked for awhile, but then it stopped working 2 days later. Not sure if it will work for you but the code for adding TURN server can be found here. #335 (comment)

I spent quite a lot of time on this issue and I have managed to make it work by using a turn server from these guys https://global.xirsys.net/. They have a 500mb limit for the free subscription but it should be enough for a few minutes demo.

@zivp100 I have tried Heroku too but didn't work because the problem is with the server that connects to the webcam in the streamlit app not with the app hosting itself.

I hope this helps.

[kirienkomaxym]

Facing the same issue, both heroku and streamlit cloud logs points to the one error, no matter do I use TURN or STUN server.

When the camera starts, the ICE connection is activated, but a bit later it ends up here INFO from streamlit_webrtc.webrtc:<MainThread> ICE connection state is closed

Which then leads to an error, because of socket object becomes none type: AttributeError: 'NoneType' object has no attribute 'sendto' Which later breaks the asyncio loop. Is there any ideas of how to fix all of that?

UPD: I have even tried to rollback to some streamlit-webrtc and streamlit versions back, did not help with versions:

streamlit==1.19.0
streamlit-webrtc==0.44.7

[araii]

Hi @araii,

I tried adding a TURN server, it worked for awhile, but then it stopped working 2 days later. Not sure if it will work for you but the code for adding TURN server can be found here. #335 (comment)

I spent quite a lot of time on this issue and I have managed to make it work by using a turn server from these guys https://global.xirsys.net/. They have a 500mb limit for the free subscription but it should be enough for a few minutes demo.

@zivp100 I have tried Heroku too but didn't work because the problem is with the server that connects to the webcam in the streamlit app not with the app hosting itself.

I hope this helps.

hi @georgetanaselea, thank you for sharing. I have tried out TURN server from https://global.xirxyx.com but it is still don't work when I upload it to the cloud. Is it still working for you?

Can everyone please also link your issue to this post here (https://github.com/streamlit/streamlit/issues/6330). I think this issue is with the network settings in streamlit cloud...

[georgetanaselea]

hi @georgetanaselea, thank you for sharing. I have tried out TURN server from https://global.xirxyx.com but it is still don't work when I upload it to the cloud. Is it still working for you?

Yes, it still did on Saturday. Since then I have downgraded my subscription so I don't forget about it.

I use it in my python app, here is my config - hope it's going to help you. User and Cred are two variables that are added in my secrets.toml file.

RTC_CONFIGURATION = RTCConfiguration( {"iceServers":[{"urls": ["stun:eu-turn6.xirsys.com"]}, {"username": user, "credential": cred, "urls": ["turn:eu-turn6.xirsys.com:80?transport=udp", "turn:eu-turn6.xirsys.com:3478?transport=udp", "turn:eu-turn6.xirsys.com:80?transport=tcp", "turn:eu-turn6.xirsys.com:3478?transport=tcp", "turns:eu-turn6.xirsys.com:443?transport=tcp", "turns:eu-turn6.xirsys.com:5349?transport=tcp"]}]} )

[AhmetEnesYalcinkaya]

Is there any progress on this topic?

[kishiyamat]

Has anyone tested it on another cloud provider, like Heroku?

I switched the deployment method to Heroku and it works perfect. Sorry, the audio/video capturing is not working in Safari, while it works fine with Chrome.

[olabodeoa]

Has anyone tested it on another cloud provider, like Heroku?

I switched the deployment method to Heroku and it works perfect.

How did you do it?

[kishiyamat]

How did you do it?

Updated: sorry, the following may not be not a valid solution since the video capturing does not work in Safari (it seems fine with Chrome).

Hi! Let me explain the steps. But I think Heroku no longer gives us free tiers. Here are the steps:

1. Create a Procfile with the following content: web: sh setup.sh && streamlit run app.py. You need to change app.py based on the files you want to run.
2. Create a file named setup.sh.
3. Create a file named runtime.txt with the content python-3.9.16. The version should be one from the list at https://devcenter.heroku.com/articles/python-support.

The setup.sh file should contain the following code:

mkdir -p ~/.streamlit/

echo "\
[server]\n\
port = $PORT\n\
enableCORS = false\n\
headless = true\n\
\n\
" > ~/.streamlit/config.toml

A couple of years ago, I watched a video (https://www.youtube.com/watch?v=zK4Ch6e1zq8) and the method seems to still be working. After creating the files, I connected my repository to Heroku; the following steps are explained in the video.

[kirienkomaxym]

@kishiyamat Are you sure that your application is working from a remote host, e.g. camera starts, the video being send and the RTC connection does not drop all the way, also, can you please share your requirements.txt file, maybe you got some kind of special versions of aiortc or streamlit-webrtc that still works, many thanks!

[kishiyamat]

@kirienkomaxym I'm using audio capturing, so I'm not sure about the camera. But it works fine with the audio capturing, which doesn't work on Streamlit Cloud now. Here is my requirements.txt. (Sorry, this is for my lecture, and the versions are not well specified.)

audio-recorder-streamlit
librosa
plotly
streamlit
pydub
streamlit-webrtc==0.45.0

[kishiyamat]

I cloned the s2t app from the example (https://github.com/kishiyamat/streamlit-stt-app/tree/heroku), making the file changes above. Then, I moved to Heroku and followed the steps below.

1. Create New App
2. Choose the repository to connect
3. Choose the deployment method.

The deployed app: https://streamlit-stt-app-clone.herokuapp.com/ The commit: https://github.com/whitphx/streamlit-stt-app/pull/131/commits/1d3c30d1b8e515bb735d06d997fc707edae14b38

The cloned app seems to be working fine. (I don't know how much it costs. I'll disable it in a few days maybe.) But the reason it works might be because this is about audio capturing. When it comes to cameras, it might not be the case as some have tried Heroku and failed.

[kirienkomaxym]

@kishiyamat your app seem to struggle the same issue, if the video mode is on, the video does not actually starts, you can check the heroku log for the same error, we all facing here. Thanks for the help!

[kishiyamat]

Oh I see. Thank you for sharing the issue.

[kishiyamat]

@kirienkomaxym Hi, I checked the deployed app, and it's working. But once I switch the browser from Chrome to Safari, it doesn't work. What browser do you use?

[AhmetEnesYalcinkaya]

it worked on Heroku :)

[PeerapolHan]

@AhmetEnesYalcinkaya Hi, What the costs to run your app on Heroku Eco and Basic is enough?

[whitphx]

Hi, I updated the WebRTC sample app on Community Cloud to use STUN/TURN servers provided by Twilio Network Traversal Service. I think the demo is working now. The source code looks like these: https://github.com/whitphx/streamlit-webrtc-example/blob/79ac65994a8c7f91475647d65e63b5040ea35863/pages/1_object_detection.py#L141 https://github.com/whitphx/streamlit-webrtc-example/blob/79ac65994a8c7f91475647d65e63b5040ea35863/sample_utils/turn.py#L10-L33

At this point, I'm using the service with a free trial account which has limitations on its balance, so the app can sometimes be down.

I also tried Open Relay Project as a free TURN server provider, but it was down when I gave it a try and actually some developer reported it is not stable such as https://github.com/aiortc/aiortc/issues/832#issuecomment-1482420656, so I gave up using it.

[PeerapolHan]

@whitphx thank you for updated 🙏

[whitphx]

I updated the section in README.md about TURN servers: https://github.com/whitphx/streamlit-webrtc#configure-the-turn-server-if-necessary

[kirienkomaxym]

Hi @whitphx, thanks for your great work! Doing the same as you mentioned in using TURN server, still facing the same error using cloud, (both heroku and streamlit-cloud). Dont you think the issue may be with communication between streamlit-webrtc and aiortc, e.g. some conflicting libraries versions or unexpected behavior. Thanks for your reply!

upd: Also checked the demo page you mentioned, its down :(

[imprasukjain]

Hey ,any updates on this issue as I am also facing the same issue while deploying on Streamlit Cloud I am using Chrome Browser

[FourthSyte]

Hello, @whitphx despite the TURN server we still experiencing the same problem. you take too long to answer. how can we resolve this if you are not responding very well?

I am so frustrated, with how this problem is still unresolved. months passed but we still had this problem. come on!

[FourthSyte]

question is there a step-by-step guide on how to use the Twilio turn server? I am very new to this please response.

[FourthSyte]

@kirienkomaxym how did you access your Twilio turn server, can you provide me instructions? I'm just confuse

[whitphx]

Hi @kirienkomaxym,

e.g. some conflicting libraries versions or unexpected behavior.

I can't deny the hypothesis, but also don't have any evidence to support it... As it's currently working in some environment and some not, I think it's more likely to be a network or WebRTC's signaling issue.

FYI, the error message in the screenshot has been observed in the past e.g. https://github.com/whitphx/streamlit-webrtc/issues/552, and I think the error message is not representing the actual issue as https://github.com/whitphx/streamlit-webrtc/issues/552#issuecomment-987885401.

---

Then, when I changed my network env, I reproduced the problem even with the sample app using the Twilio TURN server.

I found this issue which may be a good first reference: https://github.com/twilio/twilio-video.js/issues/1045, saying that the Twilio TURN server has some problem in some network envs.

I updated the top page and the object detection demo of the sample app to set the iceTransportPolicy to relay following the advice at https://github.com/twilio/twilio-video.js/issues/1045#issuecomment-642976624. (See https://github.com/whitphx/streamlit-webrtc-example/blob/ece78a99b1480885b82e54a4544598ca71cba784/app.py#L141-L144)

Then, the app started working well on my laptop (macOS, Chrome) and it didn't seem to work on my smartphone (Android, Chrome) at first, but it just took a long time (~40sec) to start the video streaming.

I haven't found a clear solution yet, but I hope it helps in any way.

So, for those who are facing the error on the sample app, please try using the object detection app again since this post, and if it looks not working, try to wait in ~1min. Thanks.

[whitphx]

To use the Twilio turn server, in short,

1. Sign up for a Twilio account.
2. Get the account ID and the auth token from the Twilio console.

3. Get the TURN server credentials from the Twilio API. See this doc: https://www.twilio.com/docs/stun-turn#list-post-example

   # This sample is copied from the Twilio's doc
   # Download the helper library from https://www.twilio.com/docs/python/install
   import os
   from twilio.rest import Client
   
   # Find your Account SID and Auth Token at twilio.com/console
   # and set the environment variables. See http://twil.io/secure
   account_sid = os.environ['TWILIO_ACCOUNT_SID']
   auth_token = os.environ['TWILIO_AUTH_TOKEN']
   client = Client(account_sid, auth_token)
   
   token = client.tokens.create()
   print(token.ice_servers)

4. Pass the ice_servers value to the iceServers field of the rtc_configuration argument of webrtc_streamer().

   webrtc_ctx = webrtc_streamer(
      # ... other args ...
      rtc_configuration={"iceServers": ICE_SERVERS_PRINTED_ABOVE},
   )

[joshita148]

Having same issue. Any updates?

[hossamrizk]

Any updates? I`m having the same problem.

[blissray]

Any updates? I`m having the same problem.

[RavenMuse]

I had the same problem when I used the latest version of streamlit==1.34.0, but after downgrading to 1.33.0, the problem disappeared; I think this must be related to the streamlit version.

[curiosity654]

I had the same problem when I used the latest version of streamlit==1.34.0, but after downgrading to 1.33.0, the problem disappeared; I think this must be related to the streamlit version.

also fixed by downgrading