[webrtc_videoroom] Video display to myself but blackscreen to others

[daviaws]

I'm running with EXTERNAL_IP set as instructs the README. I opened a tunnel by ngrok and all access are made through the tunnel.

I can see my video if I'm connecting from my internal network (notebook X mobile): But if I try the 3g on mobile:

Not sure what I'm missing out to make this run...

[mat-hek]

Hello, which demo are you trying to run?

[daviaws]

Oh, sorry, I forgot to mention https://github.com/membraneframework/membrane_demo/tree/master/webrtc_videoroom

[daviaws]

As I didn't received any answer. I started investigate myself with chrome://webrtc-internals/ Sorry, I'm writing in portuguese in this card. :D If I find anything usefull I will report here. But if you know something useful, please let me know.

[daviaws]

It seems it's missing things in the logs when I'm using another network :

00:15:22.134 [info] New peer: %Membrane.RTC.Engine.Peer{id: "bd0a7e58-4aed-4ad3-b0f2-4dfae9c33b62", metadata: %{"displayName" => "A"}}. Accepting.

00:15:22.492 [info] [pipeline@<0.725.0>] New incoming OPUS track bd0a7e58-4aed-4ad3-b0f2-4dfae9c33b62:ef1b826c-aa0c-46e1-86f3-079bfc0d8f64 (variant: high) from endpoint "bd0a7e58-4aed-4ad3-b0f2-4dfae9c33b62"

00:15:22.551 [info] [pipeline@<0.725.0>] New incoming VP8 track bd0a7e58-4aed-4ad3-b0f2-4dfae9c33b62:6401102c-41aa-47c4-9a27-8d2fe2f0f23f (variant: high) from endpoint "bd0a7e58-4aed-4ad3-b0f2-4dfae9c33b62"

00:15:41.233 [info] CONNECTED TO VideoRoomWeb.UserSocket in 58µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"vsn" => "2.0.0"}

00:15:42.444 [info] JOINED room:Admin in 81µs
  Parameters: %{}

00:15:42.614 [info] New peer: %Membrane.RTC.Engine.Peer{id: "78fc7938-2bfc-4b5e-9e22-cab3db3f8056", metadata: %{"displayName" => "B"}}. Accepting.

I was expecting device B to have:

1. New incoming OPUS
2. New incoming VP8
3. And something like 00:11:08.612 [info] [:rtcp_receiver] Sending FIR to 4049477850

But it do not happen.

The inbound-rtp for audio and video are with 0 packages/counters also.

[mat-hek]

I think it's not going to work, because ngrok only routes the HTTP traffic, while the media connection is established separately and all the traffic goes directly between the server and the peers.

[daviaws]

@mat-hek I reproduced the problem:

Code: https://github.com/Simbolismo-Digital/a-terra-prometida/tree/feature/webrtc

Host: https://simbolismodigital.com.br/videoroom

The same issue on black screen: You can reproduce this as I said. Running desktop (wifi/cabled) X mobile (3g).

I was still expecting something like this:

• New incoming OPUS
• New incoming VP8
• And something like 00:11:08.612 [info] [:rtcp_receiver] Sending FIR to 4049477850

Using chrome://webrtc-internals/ I can see I have ICE Candidate pair: (not connected) And I have outbound-rtp (kind=video, mid=1, ssrc=3909707083, [codec]=VP8 (96), id=OT01V3909707083) packetsSent 0

Last logs with all black screen except self:

2023-07-16T17:37:41.790 app[e784e670a30483] gru [info] 17:37:41.790 request_id=F3Jpuu2z7bEWyLQAAA1R [info] POST /videoroom

2023-07-16T17:37:41.791 app[e784e670a30483] gru [info] 17:37:41.790 request_id=F3Jpuu2z7bEWyLQAAA1R [info] Sent 302 in 305µs

2023-07-16T17:37:41.942 app[e784e670a30483] gru [info] 17:37:41.942 request_id=F3JpuvbAnYsfzVAAAA1h [info] GET /images/logo.png

2023-07-16T17:37:41.942 app[e784e670a30483] gru [info] 17:37:41.942 request_id=F3JpuvbAnYsfzVAAAA1h [info] Sent 404 in 173µs

2023-07-16T17:37:43.208 app[17811075a16789] gru [info] 17:37:43.208 [info] Spawning room proces: #PID<0.3129.0>

2023-07-16T17:37:43.208 app[17811075a16789] gru [info] 17:37:43.208 [info] Starting a new RTC Engine instance with id: root

2023-07-16T17:37:43.208 app[17811075a16789] gru [info] 17:37:43.208 [info] JOINED room:root in 2ms

2023-07-16T17:37:43.208 app[17811075a16789] gru [info] Parameters: %{}

2023-07-16T17:37:43.266 app[17811075a16789] gru [info] 17:37:43.266 [info] New peer: %Membrane.RTC.Engine.Peer{id: "4a8ab04c-5297-4d85-825a-c91f3d321052", metadata: %{"displayName" => "Rodolfo"}}. Accepting.

2023-07-16T17:37:51.440 app[17811075a16789] gru [info] 17:37:51.439 request_id=F3JpvSzeleLVxCgAAAWx [info] GET /room/root

2023-07-16T17:37:51.440 app[17811075a16789] gru [info] 17:37:51.440 request_id=F3JpvSzeleLVxCgAAAWx [info] Sent 302 in 254µs

2023-07-16T17:37:51.486 app[e784e670a30483] gru [info] 17:37:51.485 request_id=F3JpvS-Tz4ZfyzIAAA1x [info] GET /videoroom

2023-07-16T17:37:51.486 app[e784e670a30483] gru [info] 17:37:51.486 request_id=F3JpvS-Tz4ZfyzIAAA1x [info] Sent 200 in 783µs

2023-07-16T17:37:56.063 app[17811075a16789] gru [info] 17:37:56.062 request_id=F3JpvkBlOaRGPf4AAAXB [info] GET /room/root

2023-07-16T17:37:56.063 app[17811075a16789] gru [info] 17:37:56.063 request_id=F3JpvkBlOaRGPf4AAAXB [info] Sent 200 in 698µs

2023-07-16T17:37:56.164 app[17811075a16789] gru [info] 17:37:56.163 request_id=F3JpvkZuirxSE2MAAAXR [info] GET /images/logo.png

2023-07-16T17:37:56.164 app[17811075a16789] gru [info] 17:37:56.164 request_id=F3JpvkZuirxSE2MAAAXR [info] Sent 404 in 138µs

2023-07-16T17:37:55.985 app[e784e670a30483] gru [info] 17:37:55.985 request_id=F3JpvjvPyGhBBWcAAA2B [info] POST /videoroom

2023-07-16T17:37:55.986 app[e784e670a30483] gru [info] 17:37:55.986 request_id=F3JpvjvPyGhBBWcAAA2B [info] Sent 302 in 490µs

2023-07-16T17:38:06.921 app[17811075a16789] gru [info] 17:38:06.920 request_id=F3JpwMeXdoNQjvAAAAXh [info] GET /room/root

2023-07-16T17:38:06.921 app[17811075a16789] gru [info] 17:38:06.920 request_id=F3JpwMeXdoNQjvAAAAXh [info] Sent 302 in 243µs

2023-07-16T17:38:06.991 app[17811075a16789] gru [info] 17:38:06.990 request_id=F3JpwMvBpXBgkE4AAAXx [info] GET /videoroom

2023-07-16T17:38:06.991 app[17811075a16789] gru [info] 17:38:06.991 request_id=F3JpwMvBpXBgkE4AAAXx [info] Sent 200 in 637µs

2023-07-16T17:38:10.828 app[17811075a16789] gru [info] 17:38:10.828 request_id=F3JpwbCA2vNy4xkAAAYB [info] POST /videoroom

2023-07-16T17:38:10.829 app[17811075a16789] gru [info] 17:38:10.829 request_id=F3JpwbCA2vNy4xkAAAYB [info] Sent 302 in 849µs

2023-07-16T17:38:10.872 app[17811075a16789] gru [info] 17:38:10.871 request_id=F3JpwbMcaeAKgh4AAAYR [info] GET /room/root

2023-07-16T17:38:10.873 app[17811075a16789] gru [info] 17:38:10.872 request_id=F3JpwbMcaeAKgh4AAAYR [info] Sent 200 in 624µs

2023-07-16T17:38:10.981 app[e784e670a30483] gru [info] 17:38:10.981 request_id=F3JpwbmcWT61yIkAAA2R [info] GET /images/logo.png

2023-07-16T17:38:10.981 app[e784e670a30483] gru [info] 17:38:10.981 request_id=F3JpwbmcWT61yIkAAA2R [info] Sent 404 in 198µs

2023-07-16T17:38:21.450 app[17811075a16789] gru [info] 17:38:21.449 [info] CONNECTED TO Phoenix.LiveView.Socket in 35µs

2023-07-16T17:38:21.450 app[17811075a16789] gru [info] Transport: :websocket

2023-07-16T17:38:21.450 app[17811075a16789] gru [info] Serializer: Phoenix.Socket.V2.JSONSerializer

2023-07-16T17:38:21.450 app[17811075a16789] gru [info] Parameters: %{"_csrf_token" => "QSN9YAckRj5-EBF4CHcpGisqATdGMBk06g3YKmvhHORLABOhOBhb6uNq", "_live_referer" => "undefined", "_mounts" => "0", "_track_static" => %{"0" => "https://simbolismodigital.com.br/assets/app-2e3b2caf093945a56a67446e7653b169.css?vsn=d", "1" => "https://simbolismodigital.com.br/assets/app-9c0c471abe9663fbd6796be9fa7fa9ea.js?vsn=d"}, "vsn" => "2.0.0"}

2023-07-16T17:38:21.608 app[17811075a16789] gru [info] 17:38:21.607 [info] CONNECTED TO AppWeb.UserSocket in 38µs

2023-07-16T17:38:21.608 app[17811075a16789] gru [info] Transport: :websocket

2023-07-16T17:38:21.608 app[17811075a16789] gru [info] Serializer: Phoenix.Socket.V2.JSONSerializer

2023-07-16T17:38:21.608 app[17811075a16789] gru [info] Parameters: %{"_csrf_token" => "TiIEZjsfZzF9MSlrOXsDHgUSUBgGcwQj9fJ_wVWgKnj_pNelaz9Mv6Sf", "vsn" => "2.0.0"}

2023-07-16T17:38:21.652 app[17811075a16789] gru [info] 17:38:21.651 [info] JOINED room:root in 59µs

2023-07-16T17:38:21.652 app[17811075a16789] gru [info] Parameters: %{}

2023-07-16T17:38:21.752 app[17811075a16789] gru [info] 17:38:21.751 [info] New peer: %Membrane.RTC.Engine.Peer{id: "ee805220-79d8-41a4-aa08-aa52a7f1d7ae", metadata: %{"displayName" => "Davi"}}. Accepting.

2023-07-16T17:38:34.926 app[17811075a16789] gru [info] 17:38:34.925 request_id=F3Jpx0zO9tGerasAAAtx [info] GET /videoroom

2023-07-16T17:38:34.926 app[17811075a16789] gru [info] 17:38:34.926 request_id=F3Jpx0zO9tGerasAAAtx [info] Sent 200 in 695µs

2023-07-16T17:38:34.779 app[e784e670a30483] gru [info] 17:38:34.778 request_id=F3Jpx0QOcvi_PxgAAA2h [info] GET /room/root

2023-07-16T17:38:34.779 app[e784e670a30483] gru [info] 17:38:34.778 request_id=F3Jpx0QOcvi_PxgAAA2h [info] Sent 302 in 208µs

2023-07-16T17:38:39.378 app[17811075a16789] gru [info] 17:38:39.378 request_id=F3JpyFY5gODi2MMAAAzB [info] GET /images/logo.png

2023-07-16T17:38:39.379 app[17811075a16789] gru [info] 17:38:39.378 request_id=F3JpyFY5gODi2MMAAAzB [info] Sent 404 in 149µs

2023-07-16T17:38:39.582 app[17811075a16789] gru [info] 17:38:39.581 [info] CONNECTED TO AppWeb.UserSocket in 35µs

2023-07-16T17:38:39.582 app[17811075a16789] gru [info] Transport: :websocket

2023-07-16T17:38:39.582 app[17811075a16789] gru [info] Serializer: Phoenix.Socket.V2.JSONSerializer

2023-07-16T17:38:39.582 app[17811075a16789] gru [info] Parameters: %{"_csrf_token" => "Dj15CwIncSgKXyAqDg8cRgFAN28tBgFiBTIqpMBMg1uicUp-5ts-fRp7", "vsn" => "2.0.0"}

2023-07-16T17:38:39.120 app[e784e670a30483] gru [info] 17:38:39.120 request_id=F3JpyEbTbIdatLIAAA2x [info] POST /videoroom

2023-07-16T17:38:39.210 app[e784e670a30483] gru [info] 17:38:39.209 request_id=F3JpyEbTbIdatLIAAA2x [info] Sent 302 in 89ms

2023-07-16T17:38:39.292 app[e784e670a30483] gru [info] 17:38:39.291 request_id=F3JpyFEH0pYTZXAAAA3B [info] GET /room/root

2023-07-16T17:38:39.292 app[e784e670a30483] gru [info] 17:38:39.292 request_id=F3JpyFEH0pYTZXAAAA3B [info] Sent 200 in 654µs

2023-07-16T17:38:41.151 app[17811075a16789] gru [info] 17:38:41.151 [info] JOINED room:root in 60µs

2023-07-16T17:38:41.151 app[17811075a16789] gru [info] Parameters: %{}

2023-07-16T17:38:41.211 app[17811075a16789] gru [info] 17:38:41.211 [info] New peer: %Membrane.RTC.Engine.Peer{id: "32b25509-c8cf-4f18-b506-6aa8fa8dd998", metadata: %{"displayName" => "Tt"}}. Accepting.

[daviaws]

@mat-hek I know you're busy. But can you at least provide me some guide to debug? I'm really in need of some light here...

Thank you for all your effort.

[mat-hek]

Hey, I'm not really into that, so I pinged @mickel8. He should be able to help shortly ;)

[mickel8]

Hi @daviaws!

I have no experience with ngrok but there are a couple of things we need to check/answer.

1. Is your deployment done using ngrok too? I mean the address you linked above.
2. Could you try to connect using your mobile network to Membrane Videoroom? It's available under https://videoroom.membrane.work
3. Instead of the demo from this repository, I would suggest using Membrane Videoroom as we use it on our daily basis and we are sure it works

[daviaws]

hi @mickel8

• Is your deployment done using ngrok too? I mean the address you linked above.

No, it's hosted on fly.io using libcluster + nif and ipv4 networking paid feature.

2. Could you try to connect using your mobile network to Membrane Videoroom? It's available under https://videoroom.membrane.work

I'll try, but in this case on my host https://simbolismodigital.com.br/videoroom it's not just the mobile that goes black. Even if I open 2 sessions from the same browser the outbuond is 0 packet. And yes, this link is working fine! :D

3. Instead of the demo from this repository, I would suggest using Membrane Videoroom as we use it on our daily basis and we are sure it works

Sure, I'll try to do this change as base of my work.

[mickel8]

@daviaws Deploying on Fly.io is pretty hard. WebRTC relies on UDP and Fly.io support for it is inconvenient. You can take a look at our deployment guide https://jellyfish-dev.github.io/jellyfish-docs/deploying/fly_io but I would pick other provider.

One option to use Fly.io reliably is to enforce TCP traffic but that's discouraged in WebRTC

[daviaws]

Hi @mickel8 !

Hello again. I hosted your repo as is https://github.com/membraneframework/membrane_videoroom using master branch (Docker deploy). on a VPS Droplet on DigitalOcean, using https://caprover.com/ as application manager.

The result is in: https://atp.fly.simbolismodigital.com.br/room/A

Anyway... even configuring this envs:

The result is:

Am I still missing something?

[daviaws]

Man, thank you, after trying a little I managed to configure with success with this settings:

[daviaws]

Thank you!

[mickel8]

Great, nice to hear that!