Video and audio not working on laptop browser.

seekex21 commented 2 years ago

Describe the bug

When We are using on laptop or desktop browser with different network. I mean if each participant connected via many different network meeting not working. If all participant connected via same network its working good. This problem came only on desktop browser. it's working on mobile browser.

My meeting link is https://eyebogler.com/join/28433LuckyRat

Desktop

Please complete the following information:

Device or OS: Windows
Browser: Chrome
Version :Version 103.0.5060.114 (Official Build) (64-bit)

Additional context

Add any other context about the problem here.

miroslavpejic85 commented 2 years ago

Hi @seekex21, You have this issue even with the latest version of MiroTalk? On my live demo too? https://p2p.mirotalk.com/join/test I see you are using the old one. Thank you.

seekex21 commented 2 years ago

Hi @miroslavpejic85 Thanks for quick reply. I Have use you demo too my end, I found same problem on this. I have use my laptop and my mobile for test this demo. Please seen my screenshot.

Thanks.

miroslavpejic85 commented 2 years ago

Hi @seekex21, You are welcome.

The pkm & pkm2 are in the different network?
Both having OS Windows 10 or 11?
Both having Browser chrome: 103.0.5060.114 (Official Build) (64-bit)?
Did you see any console error logs in the browser (F12)?

Thanks.

seekex21 commented 2 years ago

Hi @miroslavpejic85 ,

Yes pkm (laptop) is on my home wifi and pkm2 is my phone on mobile network.
No my laptop having windows 10 and my phone is android 11.
Yes both device using Chrome Browser in my system chrome(103.0.5060.114) and my phone chrome version is 103.0.5060.71
any console error logs in the system browser.

Thanks.

miroslavpejic85 commented 2 years ago

Hey @seekex21,

I did some cross-tests with iphone and android, browsers (safari, chrome, firefox, edge with 4g phone connection), and windows 10 (chrome browser with wifi connection), here everything works fine.

I can't reproduce your case :(

Even if you wait for a while (10-20 seconds), does the video always remain black?
On you laptop browser, please take a screenshot of the console logs (F12) and share me please.
It could also be that the Turn server for some reason is unable to handle your case - network, which is not dependent on MiroTalk. Also try disabling the firewall entirely in windows for testing, and let me know if anything changes?
Can you try MiroTalk on Heroku: https://mirotalk.herokuapp.com/join/test (just for curiosity)

Thanks.

seekex21 commented 2 years ago

Hi @miroslavpejic85 , I try to connect on your given link and I found some logs on my browser console. Please seen all my attached screenshots. This problem only when we connect both device to different network. If we connected with same network no any problem occurred.
Thanks.

miroslavpejic85 commented 2 years ago

Hello @seekex21, Thank you for the logs.

connectionStatus: failed

One or more of the ICE transports on the connection is in the failed state.

Reference:

As a Turn server I currently use a free one viagenie take a look also here.

You can Try to using a different Turn server and let me know if anything changes?

You can setup it on .env file, editing:

TURN_ENABLED=true
TURN_URLS=turn:TurnServer
TURN_USERNAME=TurnUsername
TURN_PASSWORD=TurnPassword

For most WebRTC applications to function a Turn server is required for relaying the traffic between peers, since a direct socket is often not possible between the clients, that could be your case.

This is the current MiroTalk P2P logic:

webrtc-P2P

PS: If someone has the same issue, please report it to me here, and if with a different Turn server has it solved? If yes which one?

Many Thanks.

miroslavpejic85 commented 2 years ago

Hello @seekex21,

Hope you are well? Can you please do this tests:

Test StunServer

Goto: https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/
STUN or TURN URI: stun:stun.l.google.com:19302
Click on Gather candidates

stun-ok

We expect a srflx candidate type to show up, which would confirm that the Stun server is working properly!

Test TurnServer

Goto: https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/
STUN or TURN URI: turn:numb.viagenie.ca
TURN username: miroslav.pejic.85@gmail.com
TURN password: mirotalkp2p
Click on Gather candidates

turn-ok

In this case, you need to expect a relay candidate type to show up to confirm that is working successfully!

Notes

If Stun is reachable, in most cases the P2P connection will be established.

If Turn is unreachable, but you need it (like in your case) so the connection between peers can't be established.

Solution

The solution is to found a worked one, no MiroTalk issue here :)

Try also with:

const iceServers = [
    {
        urls: "stun:openrelay.metered.ca:80",
    },
    {
        urls: "turn:openrelay.metered.ca:80",
        username: "openrelayproject",
        credential: "openrelayproject",
    },
    {
        urls: "turn:openrelay.metered.ca:443",
        username: "openrelayproject",
        credential: "openrelayproject",
    },
    {
        urls: "turn:openrelay.metered.ca:443?transport=tcp",
        username: "openrelayproject",
        credential: "openrelayproject",
    },
];

Let me know, thanks and have a nice weekend.

miroslavpejic85 commented 2 years ago

PS: In this commit I added also the possibility to edit the Stun server in the .env, on default stun:stun.l.google.com:19302. So now both Stun and Turn can be configurable ;)

Added also this simple page to check it.

Can be passed also as parameters, as following (You can test any Stun - Turn with a click)

https://p2p.mirotalk.com//test?iceServers=[{"urls":"stun:stun.l.google.com:19302"},{"urls":"turn:numb.viagenie.ca","username":"miroslav.pejic.85@gmail.com","credential":"mirotalkp2p"}]

https://p2p.mirotalk.com//test?iceServers=[{"urls":"stun:stun.l.google.com:19302"},{"urls":"turn:openrelay.metered.ca:80","username":"openrelayproject","credential":"openrelayproject"}]

miroslavpejic85 commented 2 years ago

I confirm that viagenie Turn doesn't work, I have reproduced the issue Forcing MiroTalk to use only Turn as iceServers. Changed to openrelay OR to my own, solved it.

miroslavpejic85 / mirotalk