WebRTC konfiguracja serwera TURN i java script

pytanie zadane 5 czerwca 2020 w JavaScript przez BanditPlayGame Użytkownik (680 p.)

Próbuję zaimplementować WebRTC na stronie internetowej. Chcę wykorzystać do tego TURN Server, aby mieć pewność że zadziała u każdego bez względu na NAT. TURN Server został skonfigurowany tak jak pokazano poniżej. W js także są podane dane do serwera TURN i STUN. Strona nie jest gotowa, ponieważ utknąłem na problemie że nie do końca wiem jak połączyć ze sobą użytkowników. Z tego co udało mi się wywnioskować serwer STUN/TURN przyznaje osobie nadającej, port UDP do komunikacji, który jest następnie przekazywany odbiorcą i na tym porcie nadaje. Jednak wyjadę mi się że jest problem na komunikacji nadawca serwer, ponieważ w localDescription nie widnieje żaden port ani ip serwera, a jest jedyni localhost. Przesyłając te dane do odbiorcy nie mógł by żadnych danych odebrać. Moim pytaniem jest: gdzie jest problem. Czy to coś z konfiguracją czy raczej z kodem.

#**VPS server config (/etc/turnserver.conf)**


cli-password=12345678
listening-port=3478
#tls-listening-port=443

listening-ip=<my-server-ip>

relay-ip=<my-server-ip>
external-ip=<my-server-ip>

realm=<my-server-address>
server-name=<my-server-address>

lt-cred-mech
#userdb=/etc/turnuserdb.conf
user=<user:pass>
# use real-valid certificate/privatekey files
#cert=/etc/ssl/certificate.pem
#pkey=/etc/ssl/private.key

no-stdout-log

<!DOCTYPE html>

<html lang="en-US">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>



    <p>
        This example shows you the contents of the selected part of your display.
        Click the Start Capture button to begin.
    </p>

    <p><button id="start">Start Capture</button>&nbsp;<button id="stop">Stop Capture</button></p>

    <video style="width: 960px; height: 540px;" id="video" autoplay></video>
    <video style="width: 960px; height: 540px;" id="remote-video" autoplay></video>
    <br>

    <strong>Log:</strong>
    <br>
    <pre id="log"></pre>

</body>
</html>

const Sender = new RTCPeerConnection({
            iceServers: [
                {
                    urls: "stun:<ip-address>:3478" 
                },

                {
                    urls: "turn:<ip-address>:3478",
                    username: "<user>",  
                    credential: "<pass>" 
                }
            ]
        });






        var displayMediaOptions = {
            audio: false,
            video: {
                cursor: "always"
            }
        };




             navigator.mediaDevices.getDisplayMedia(displayMediaOptions)
            .then(stream => {
                document.getElementById("video").srcObject = stream;
                for (let track of stream.getTracks()) {
                    Sender.addTrack(track);
                }

                return Sender.createOffer();
            })
                 .then(offer => {
                     Sender.setLocalDescription(new RTCSessionDescription(offer));
                     console.log(Sender.localDescription);
                 })
            //.then(() => Reciver.setRemoteDescription(Sender.localDescription))
            //.then(() => Reciver.createAnswer())
            //.then(answer => Reciver.setLocalDescription(new RTCSessionDescription(answer)))
           // .then(() => Sender.setRemoteDescription(Reciver.localDescription));

A tutaj poniżej to co jest w Sender.localDescription

sdp: "v=0
↵o=- 409204313020118480 2 IN IP4 127.0.0.1
↵s=-
↵t=0 0
↵a=group:BUNDLE 0
↵a=msid-semantic: WMS
↵m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 122 127 121 125 107 108 109 124 120 123 119 114 115 116
↵c=IN IP4 0.0.0.0
↵a=rtcp:9 IN IP4 0.0.0.0
↵a=ice-ufrag:j2gk
↵a=ice-pwd:y+bSuFIV7IeKCoFDVbB4Lvw5
↵a=ice-options:trickle
↵a=fingerprint:sha-256 
1E:44:A1:31:E5:80:B1:3C:14:56:EA:7A:5F:9C:5B:58:75:DA:3C:ED:D1:EB:77:DD:58:B8:C5:96:68:CC:AF:7E
↵a=setup:actpass
(...)

1 odpowiedź

odpowiedź 5 czerwca 2020 przez Comandeer Guru (607,960 p.)

No ok, ale TURN i STUN nie służą do łączenia klientów ze sobą. Żeby połączyć klientów P2P musisz przesłać tzw. ofertę od jednego klienta do drugiego. A żeby to zrobić, potrzebujesz czegoś, co nazywa się signaling server. Czyli potrzebujesz backendu, który będzie w stanie poinformować klientów o sobie nawzajem.

PS podziwiam, że chciało Ci się stawiać własne serwery TURN/STUN.

komentarz 5 czerwca 2020 przez BanditPlayGame Użytkownik (680 p.)

Tak, ale nie zależy mi na komunikacji P2P, ale bardziej przez serwer. Z tego co wyczytałem komunikacja taka odbywa się przez TURN serwer. Wiem też że muszę przesłać ofertę do klienta, ale w wygenerowanej ofercie nie ma żadnych sensownych danych. IP adres jest lokalny, a przecież STUN serwer powinien zwrócić publiczny adres ip. Właściwie to się dzieje, bo patrząc w Wiresharka komunikacja jest, ale nie wiem czemu to nie pojawia się w ofercie

What is a STUN/TURN Server? · Blog

komentarz 5 czerwca 2020 przez Comandeer Guru (607,960 p.)

Bo nie da się komunikować przez TURN, nie bezpośrednio. TURN jest po prostu jedną z metod transportu danych pomiędzy peerami. Ale żeby nawiązać połączenie między peerami, to trzeba mieć signaling server. Tu jest to dobrze opisane (mimo że sam artykuł już jest stary): https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/#after-signaling-using-ice-to-cope-with-nats-and-firewalls