Remote video not displaying

[adekunle11]

Hello, thanks for the plugin
I'm adding it to my project right now, The local stream displays so i can see my self, but the remote stream doesn't display
I'm using the example in STANDARD
This is my server code

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('videoStarted', function(data){
    socket.join(data.roomid, function () {
       socket.to(data.roomid).emit('joined', { message: data.user });
       console.log(data.user + ' joined room ' + data.roomid);
     });
     socket.on('disconnect', function () {
      console.log('user disconnected');
      socket.to(data.roomid).emit('disconnected', { messsage: data.user });
    });
    socket.on('call', function (details){
        console.log('call from ' + details.from + ' & sdp= ' + details.sdp);
        socket.to(data.roomid).emit('call:incoming', {
            to: data.roomid,
            from: details.from,
            sdp: details.sdp
        });
    });
    socket.on('iceCandidate', function (details) {
        console.log('iceCandid from: ' + details.from + ' roomId: ' + data.roomid + ' sdp: ' + details.sdp);
        socket.to(data.roomid).emit('call:iceCandidate', Object.assign({}, details, {
            to: data.roomid
        }));
    });
    socket.on('answer', function (details) {
        console.log('answer from: ' + details.from + ' & sdp=' + details.sdp);
        //console.log('answer to', data.to);
        console.log("to room: " + data.roomid);
        socket.to(data.roomid).emit('call:answer', {
          from: details.from,
          sdp: details.sdp,
          to: data.roomid
		});
    });

    socket.on('answered', function (details) {
        console.log('call:answered ' + details.from);
        console.log('to room', data.roomid);
        socket.to(data.roomid).emit('call:answered', {
            to: data.roomid,
            from: details.from,
            sdp: details.sdp
        });
    });
    });

});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

This is my Server log

a user connected
Emmanueliyanuoluwa@hotmail.com joined room 7
a user connected
Adekunle@gmail.com joined room 7
call from Emmanueliyanuoluwa@hotmail.com & sdp= v=0
o=- 4705568142175104177 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS 8da205d8-b8ff-430e-b13b-2a4901437867
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 9 102 0 8 105 13 110 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:lO5+
a=ice-pwd:BQLTNrVRLLEmdDQQQpa1ZUKa
a=ice-options:trickle renomination
a=fingerprint:sha-256 53:7C:9A:5A:0E:DF:B3:B6:99:0B:AA:D1:EA:88:B7:C3:32:55:F6:0C:E4:25:51:B1:3F:F0:9D:F5:6F:BF:A7:C6
a=setup:actpass
a=mid:audio
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=sendrecv
a=rtcp-mux
a=rtpmap:111 opus/48000/2
a=rtcp-fb:111 transport-cc
a=fmtp:111 minptime=10;useinbandfec=1
a=rtpmap:103 ISAC/16000
a=rtpmap:9 G722/8000
a=rtpmap:102 ILBC/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
a=rtpmap:105 CN/16000
a=rtpmap:13 CN/8000
a=rtpmap:110 telephone-event/48000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000
a=ssrc:736257118 cname:wtBEU5e0cvaHvwGO
a=ssrc:736257118 msid:8da205d8-b8ff-430e-b13b-2a4901437867 662c01a6-40f8-475b-8ff1-2be92d41beb9
a=ssrc:736257118 mslabel:8da205d8-b8ff-430e-b13b-2a4901437867
a=ssrc:736257118 label:662c01a6-40f8-475b-8ff1-2be92d41beb9
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 127 125 104
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:lO5+
a=ice-pwd:BQLTNrVRLLEmdDQQQpa1ZUKa
a=ice-options:trickle renomination
a=fingerprint:sha-256 53:7C:9A:5A:0E:DF:B3:B6:99:0B:AA:D1:EA:88:B7:C3:32:55:F6:0C:E4:25:51:B1:3F:F0:9D:F5:6F:BF:A7:C6
a=setup:actpass
a=mid:video
a=extmap:14 urn:ietf:params:rtp-hdrext:toffset
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:13 urn:3gpp:video-orientation
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:5 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay
a=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=extmap:8 http://tools.ietf.org/html/draft-ietf-avtext-framemarking-07
a=extmap:9 http://www.webrtc.org/experiments/rtp-hdrext/color-space
a=sendrecv
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=rtpmap:98 VP9/90000
a=rtcp-fb:98 goog-remb
a=rtcp-fb:98 transport-cc
a=rtcp-fb:98 ccm fir
a=rtcp-fb:98 nack
a=rtcp-fb:98 nack pli
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:100 H264/90000
a=rtcp-fb:100 goog-remb
a=rtcp-fb:100 transport-cc
a=rtcp-fb:100 ccm fir
a=rtcp-fb:100 nack
a=rtcp-fb:100 nack pli
a=fmtp:100 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f
a=rtpmap:101 rtx/90000
a=fmtp:101 apt=100
a=rtpmap:127 red/90000
a=rtpmap:125 rtx/90000
a=fmtp:125 apt=127
a=rtpmap:104 ulpfec/90000
a=ssrc-group:FID 3462586637 2870922064
a=ssrc:3462586637 cname:wtBEU5e0cvaHvwGO
a=ssrc:3462586637 msid:8da205d8-b8ff-430e-b13b-2a4901437867 ee035a4f-ebfb-4387-9fa5-01ecd0ba7eda
a=ssrc:3462586637 mslabel:8da205d8-b8ff-430e-b13b-2a4901437867
a=ssrc:3462586637 label:ee035a4f-ebfb-4387-9fa5-01ecd0ba7eda
a=ssrc:2870922064 cname:wtBEU5e0cvaHvwGO
a=ssrc:2870922064 msid:8da205d8-b8ff-430e-b13b-2a4901437867 ee035a4f-ebfb-4387-9fa5-01ecd0ba7eda
a=ssrc:2870922064 mslabel:8da205d8-b8ff-430e-b13b-2a4901437867
a=ssrc:2870922064 label:ee035a4f-ebfb-4387-9fa5-01ecd0ba7eda

iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:1128470857 1 udp 2122260223 10.7.105.71 35423 typ host generation 0 ufrag 
lO5+ network-id 3 network-cost 900
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:559267639 1 udp 2122202367 ::1 47110 typ host generation 0 ufrag lO5+ network-id 2
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:1510613869 1 udp 2122129151 127.0.0.1 42330 typ host generation 0 ufrag lO5+ network-id 1
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:1128470857 1 udp 2122260223 10.7.105.71 48824 typ host generation 0 ufrag 
lO5+ network-id 3 network-cost 900
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:559267639 1 udp 2122202367 ::1 46637 typ host generation 0 ufrag lO5+ network-id 2
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:1510613869 1 udp 2122129151 127.0.0.1 52667 typ host generation 0 ufrag lO5+ network-id 1
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:1876313031 1 tcp 1518222591 ::1 38912 typ host tcptype passive generation 
0 ufrag lO5+ network-id 2
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:344579997 1 tcp 1518149375 127.0.0.1 56756 typ host tcptype passive generation 0 ufrag lO5+ network-id 1
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:1876313031 1 tcp 1518222591 ::1 48169 typ host tcptype passive generation 
0 ufrag lO5+ network-id 2
iceCandid from: Emmanueliyanuoluwa@hotmail.com roomId: 7 sdp: candidate:344579997 1 tcp 1518149375 127.0.0.1 48026 typ host tcptype passive generation 0 ufrag lO5+ network-id 1
answer from: Emmanueliyanuoluwa@hotmail.com & sdp=v=0
o=- 4705568142175104177 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS 8da205d8-b8ff-430e-b13b-2a4901437867
m=audio 9 UDP/TLS/RTP/SAVPF 111 103 9 102 0 8 105 13 110 113 126
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:lO5+
a=ice-pwd:BQLTNrVRLLEmdDQQQpa1ZUKa
a=ice-options:trickle renomination
a=fingerprint:sha-256 53:7C:9A:5A:0E:DF:B3:B6:99:0B:AA:D1:EA:88:B7:C3:32:55:F6:0C:E4:25:51:B1:3F:F0:9D:F5:6F:BF:A7:C6
a=setup:actpass
a=mid:audio
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=sendrecv
a=rtcp-mux
a=rtpmap:111 opus/48000/2
a=rtcp-fb:111 transport-cc
a=fmtp:111 minptime=10;useinbandfec=1
a=rtpmap:103 ISAC/16000
a=rtpmap:9 G722/8000
a=rtpmap:102 ILBC/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
a=rtpmap:105 CN/16000
a=rtpmap:13 CN/8000
a=rtpmap:110 telephone-event/48000
a=rtpmap:113 telephone-event/16000
a=rtpmap:126 telephone-event/8000
a=ssrc:736257118 cname:wtBEU5e0cvaHvwGO
a=ssrc:736257118 msid:8da205d8-b8ff-430e-b13b-2a4901437867 662c01a6-40f8-475b-8ff1-2be92d41beb9
a=ssrc:736257118 mslabel:8da205d8-b8ff-430e-b13b-2a4901437867
a=ssrc:736257118 label:662c01a6-40f8-475b-8ff1-2be92d41beb9
m=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 127 125 104
c=IN IP4 0.0.0.0
a=rtcp:9 IN IP4 0.0.0.0
a=ice-ufrag:lO5+
a=ice-pwd:BQLTNrVRLLEmdDQQQpa1ZUKa
a=ice-options:trickle renomination
a=fingerprint:sha-256 53:7C:9A:5A:0E:DF:B3:B6:99:0B:AA:D1:EA:88:B7:C3:32:55:F6:0C:E4:25:51:B1:3F:F0:9D:F5:6F:BF:A7:C6
a=setup:actpass
a=mid:video
a=extmap:14 urn:ietf:params:rtp-hdrext:toffset
a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time
a=extmap:13 urn:3gpp:video-orientation
a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01
a=extmap:5 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay
a=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type
a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing
a=extmap:8 http://tools.ietf.org/html/draft-ietf-avtext-framemarking-07
a=extmap:9 http://www.webrtc.org/experiments/rtp-hdrext/color-space
a=sendrecv
a=rtcp-mux
a=rtcp-rsize
a=rtpmap:96 VP8/90000
a=rtcp-fb:96 goog-remb
a=rtcp-fb:96 transport-cc
a=rtcp-fb:96 ccm fir
a=rtcp-fb:96 nack
a=rtcp-fb:96 nack pli
a=rtpmap:97 rtx/90000
a=fmtp:97 apt=96
a=rtpmap:98 VP9/90000
a=rtcp-fb:98 goog-remb
a=rtcp-fb:98 transport-cc
a=rtcp-fb:98 ccm fir
a=rtcp-fb:98 nack
a=rtcp-fb:98 nack pli
a=rtpmap:99 rtx/90000
a=fmtp:99 apt=98
a=rtpmap:100 H264/90000
a=rtcp-fb:100 goog-remb
a=rtcp-fb:100 transport-cc
a=rtcp-fb:100 ccm fir
a=rtcp-fb:100 nack
a=rtcp-fb:100 nack pli
a=fmtp:100 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f
a=rtpmap:101 rtx/90000
a=fmtp:101 apt=100
a=rtpmap:127 red/90000
a=rtpmap:125 rtx/90000
a=fmtp:125 apt=127
a=rtpmap:104 ulpfec/90000
a=ssrc-group:FID 3462586637 2870922064
a=ssrc:3462586637 cname:wtBEU5e0cvaHvwGO
a=ssrc:3462586637 msid:8da205d8-b8ff-430e-b13b-2a4901437867 ee035a4f-ebfb-4387-9fa5-01ecd0ba7eda
a=ssrc:3462586637 mslabel:8da205d8-b8ff-430e-b13b-2a4901437867
a=ssrc:3462586637 label:ee035a4f-ebfb-4387-9fa5-01ecd0ba7eda
a=ssrc:2870922064 cname:wtBEU5e0cvaHvwGO
a=ssrc:2870922064 msid:8da205d8-b8ff-430e-b13b-2a4901437867 ee035a4f-ebfb-4387-9fa5-01ecd0ba7eda
a=ssrc:2870922064 mslabel:8da205d8-b8ff-430e-b13b-2a4901437867
a=ssrc:2870922064 label:ee035a4f-ebfb-4387-9fa5-01ecd0ba7eda

to room: 7
call:answered Adekunle@gmail.com
to room 7
iceCandid from: Adekunle@gmail.com roomId: 7 sdp: candidate:115579896 1 udp 2122260223 192.168.8.102 33780 typ host generation 0 ufrag chqQ network-id 3 network-cost 10
iceCandid from: Adekunle@gmail.com roomId: 7 sdp: candidate:559267639 1 udp 2122202367 ::1 45731 typ host generation 0 ufrag chqQ network-id 2    
iceCandid from: Adekunle@gmail.com roomId: 7 sdp: candidate:1510613869 1 udp 2122129151 127.0.0.1 54060 typ host generation 0 ufrag chqQ network-id 1
iceCandid from: Adekunle@gmail.com roomId: 7 sdp: candidate:1876313031 1 tcp 1518222591 ::1 50124 typ host tcptype passive generation 0 ufrag chqQ network-id 2
iceCandid from: Adekunle@gmail.com roomId: 7 sdp: candidate:344579997 1 tcp 1518149375 127.0.0.1 47835 typ host tcptype passive generation 0 ufrag chqQ network-id 1
call:answered Emmanueliyanuoluwa@hotmail.com
to room 7
user disconnected
user disconnected

I noticed in the exmaple in Standard folder, answerCall() is empty that may be the reason its not working. i don't know what to do there, so i tried emitting answer and answered in socket.on('call:incoming'), didn't work either

This is my standard-vm.ts

export class StandardViewModel extends Observable {
    localView;
    remoteView;
    connection: TNSRTCPeerConnection;
    socket: SocketIO;
    me;
    localStream: TNSRTCMediaStream;

    dataChannels = new Map();
    remoteIceCandidates = [];
    inCall = false;
    isInitiator = false;
    cameraPosition: 'user' | 'environment';

    constructor() {
        super();
        const config = new TNSRTCConfiguration({
            iceServers: [
                new TNSRTCIceServer(['stun:stun.l.google.com:19302']),
                new TNSRTCIceServer(['stun:stun1.l.google.com:19302']),
            ]
        })
        this.connection = new TNSRTCPeerConnection(config);
        this.connection.onIceCandidate(candidate => {
            const object = {};
            object['from'] = this.me;
            object['sdp'] = candidate.sdp;
            object['sdpMid'] = candidate.sdpMid;
            object['sdpMLineIndex'] = candidate.sdpMLineIndex;
            object['serverUrl'] = candidate.serverUrl;
            this.socket.emit('iceCandidate', object);
        });
        this.connection.onTrack(track => {
            if (track.streams) {
                this.remoteView.srcObject = track.streams[0];
            }
        });
        this.me = appSettings.getString("email");
        this.socket = new SocketIO('http://c14b08dccee2.ngrok.io', {
            forceNew: true,
            secure: false
        });
        this.socket.on('joined', data => {
            //this.items.push(data);
            var toast = Toast.makeText(data.message + " joined");
            toast.show();
        });
        this.socket.on('disconnected', data => {
            //this.items.push(data);
            var toast = Toast.makeText(data.message + " Left call");
            toast.show();
        });
        this.socket.on('call:incoming', data => {
            const object = data;
            const from = object['from'];
            const session = object['sdp'];
            const to = object['to'];
            console.log('call:incoming from: ' + to + ' sdp:' + session);
            var toast = Toast.makeText("call to " + to);
            toast.show();
            if (to.indexOf(appSettings.getString("chatid")) > -1) { 
                if (this.localStream) {
                    for (let track of this.localStream.videoTracks) {
                        this.connection.addTrack(track, [this.localStream.id]);
                    }
                    for (let track of this.localStream.audioTracks) {
                        this.connection.addTrack(track, [this.localStream.id]);
                    }
                }
                this.createAnswerForOfferReceived({
                    type: TNSRTCSdpType.OFFER,
                    sdp: session
                });
                this.socket.emit('answer', {
                    from: from,
                    sdp: session
                });
            } else {
                console.log("call:incoming error");
                var toast = Toast.makeText("incoming to.indexOf erorr");
                toast.show();
            }
        });
        this.socket.on('call:answer', data => {
            const object = data;
            const from = object['from'];
            const session = object['sdp'];
            const to = object['to'];
            console.log('call:answer');
            console.log('me : ' + this.me + ' from: ' + from + ' to: ' + to);
            var toast = Toast.makeText("call answer " + from);
            toast.show();
            if (to.indexOf(appSettings.getString("chatid")) > -1) {
                const sdp = new TNSRTCSessionDescription(TNSRTCSdpType.OFFER, session);
                this.createAnswerForOfferReceived(sdp);
                this.socket.emit('answered', {
                    from: from,
                    sdp: session
                });
            } else {
                console.log("answer error");
                var toast = Toast.makeText("answer error");
                toast.show();
            }
        });
        this.socket.on('call:answered', data => {
            const object = data;
            const from = object['from'];
            const session = object['sdp'];
            const to = object['to'];
            if (to.indexOf(appSettings.getString("chatid")) > -1) {
                console.log('call:answered');
                const sdp = new TNSRTCSessionDescription(TNSRTCSdpType.ANSWER, session);
                this.handleAnswerReceived(sdp);
                // dataChannelCreate("osei");
                // dataChannelSend("osei", "Test", FancyWebRTC.DataChannelMessageType.TEXT);
            }
        });
        this.socket.on('call:iceCandidate', data => {
            console.log('call:iceCandidate');
            const object = data;
            const from = object['from'];
            const session = object['sdp'];
            const to = object['to'];
            const sdpMid = object['sdpMid'];
            const sdpMLineIndex = object['sdpMLineIndex'];
            const serverUrl = object['serverUrl'];
            console.log("call:iceCandidate to:" + to);
            if (to.indexOf(appSettings.getString("chatid")) > -1) {
                const candidate = new TNSRTCIceCandidate(
                    session,
                    sdpMid,
                    sdpMLineIndex
                );
                this.connection.addIceCandidate(candidate);
            }
        });
        this.socket.on('connect', data => {
            const object = {};
            object['id'] = this.me;
            this.socket.emit('init', object);
            this.socket.emit('videoStarted', {
                user: appSettings.getString("email"),
                roomid: appSettings.getString("chatid")
            });
        });
        this.socket.connect();
    }

    public init() {
        if (!WebRTC.hasPermissions()) {
            WebRTC.requestPermissions().then(() => {
                if (WebRTC.hasPermissions()) {
                    this.setUpUserMedia();
                }
            });
        } else {
           this.setUpUserMedia();
        }
    }

    generateId(): string {
        return 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            const r = (Math.random() * 16) | 0,
                v = c === 'x' ? r : (r & 0x3) | 0x8;
            return v.toString(16);
        });
    }

    public shareScreen(event) {
        TNSRTCMediaDevices.getDisplayMedia(new TNSRTCMediaStreamConstraints(true, true))
            .then(mediaStream => {
                this.localStream = mediaStream;
                this.localView.srcObject = mediaStream;
                this.localView.mirror = false;
            })
            .catch(error => {
                console.log(error);
            });
    }

    public switchCamera(event) {
        if (this.localStream) {
            for (let track of this.localStream.videoTracks) {
                const next = this.cameraPosition === 'user' ? 'environment' : 'user';
                track.applyConstraints({facingMode: next}).then(() => {
                    this.cameraPosition = next;
                    this.localView.mirror = next !== 'environment';
                }).catch(e => {
                    console.log(e);
                });
            }
        }
    }

    public setUpUserMedia() {
        const video = new Map();
        video.set('facingMode', 'user');
        this.cameraPosition = 'user';
        video.set('width', 960);
        video.set('height', 720);
        const constraints = new TNSRTCMediaStreamConstraints(true, video);
        TNSRTCMediaDevices.getUserMedia(constraints)
            .then(mediaStream => {
                this.localStream = mediaStream;
                this.localView.srcObject = mediaStream;
            })
            .catch(error => {
                console.log(error);
            });
    }

    public makeCall(view) {
        if (this.connection) {
            this.isInitiator = true;
            if (this.localStream) {
                const videoTracks = this.localStream.videoTracks;
                const audioTracks = this.localStream.audioTracks;
                for (let track of videoTracks) {
                    this.connection.addTrack(track, [this.localStream.id]);
                }
                for (let track of audioTracks) {
                    this.connection.addTrack(track, [this.localStream.id]);
                }
            }
            this.connection
                .createOffer({})
                .then(sdp => {
                    this.setInitiatorLocalSdp(sdp);
                })
                .catch(error => {
                    this.didReceiveError(error);
                });
        }
    }

    public answerCall(view) {

    }

    public endCall(view) {
        this.connection.close();
        this.connection.dispose();
        this.socket.disconnect();
    }

    public handleRemoteDescriptionSet() {
        for (let iceCandidate of this.remoteIceCandidates) {
            this.connection.addIceCandidate(iceCandidate);
        }
        this.remoteIceCandidates = [];
    }

    sendNonInitiatorSdp(sdp) {
        const object = {};
        object['from'] = this.me;
        object['sdp'] = sdp.sdp; // ???
        /* handleAnswerReceived(sdp); */
        this.socket.emit('answered', object);
    }

    sendInitiatorSdp(sdp: TNSRTCSessionDescription) {
        const object = {};
        object['from'] = this.me;
        object['sdp'] = sdp.sdp;
        this.socket.emit('call', object);
    }

    createAnswerForOfferReceived(remoteSdp) {
        if (!this.connection || !remoteSdp) return;
        this.connection
            .setRemoteDescription(
                new TNSRTCSessionDescription(remoteSdp.type, remoteSdp.sdp)
            )
            .then(() => {
                this.handleRemoteDescriptionSet();
                this.connection
                    .createAnswer({})
                    .then(sdp => {
                        this.setNonInitiatorLocalSdp(sdp);
                    })
                    .catch(e => {
                        this.didReceiveError(e);
                    });
            })
            .catch(error => {
                this.didReceiveError(error);
            });
    }

    handleAnswerReceived(sdp) {
        if (this.connection == null || sdp == null || this.inCall) return;
        const newSdp = new TNSRTCSessionDescription(TNSRTCSdpType.ANSWER, sdp.sdp);
        this.connection
            .setRemoteDescription(newSdp)
            .then(() => {
                this.inCall = true;
            })
            .catch(error => {
                this.didReceiveError(error);
            });
    }

    setNonInitiatorLocalSdp(sdp) {
        if (this.connection == null) return;
        this.connection
            .setLocalDescription(new TNSRTCSessionDescription(sdp.type, sdp.sdp))
            .then(() => {
                this.sendNonInitiatorSdp(sdp);
            })
            .catch(error => {
                this.didReceiveError(error);
            });
    }

    setInitiatorLocalSdp(sdp) {
        if (!this.connection) return;
        if (this.connection.localDescription) {
            if (
                this.connection.localDescription.type === TNSRTCSdpType.ANSWER &&
                sdp.type === TNSRTCSdpType.ANSWER
            )
                return;
        }

        this.connection
            .setLocalDescription(sdp)
            .then(() => {
                this.sendInitiatorSdp(sdp);
            })
            .catch(error => {
                this.didReceiveError(error);
            });
    }

    public dataChannelCreate(name) {
        const dataChannelInit = {};
        const channel = this.connection.createDataChannel(name, dataChannelInit);
        // registerDataChannelObserver(name);
    }

    didReceiveError(error) {
        console.log(
            'isInitiator: ' + this.isInitiator + ' didReceiveError: ' + error
        );
    }
}

Thanks in advance

[rgill02]

Were you able to instantiate a WebRTCView in your xml page in nativescript? Mine can't find it.

[adekunle11]

Were you able to instantiate a WebRTCView in your xml page in nativescript? Mine can't find it.

@rgill02 yeah, I actually get both streams when the devices are on the same network.

Check that xmlns:ui is pointing to the right plugin name..or you can paste your xml code here

[rgill02]

Ok i can paste my code later today when I get home. What version of nativescript are you using?

[adekunle11]

Ok i can paste my code later today when I get home. What version of nativescript are you using?

@rgill02 Nativescript core, I think the latest one but I will check

[rgill02]

I got my WebRTCViews instantiated by downgrading nativescript from version 7 to 6. I now have the same issue as you. I can see my local stream but don't see anything for the remote stream. My "onTrack" handler where I add the remote stream to the remote view is being called, but nothing is showing up. I'm going to investigate more and see what I find.

[adekunle11]

I got my WebRTCViews instantiated by downgrading nativescript from version 7 to 6. I now have the same issue as you. I can see my local stream but don't see anything for the remote stream. My "onTrack" handler where I add the remote stream to the remote view is being called, but nothing is showing up. I'm going to investigate more and see what I find.

@rgill02 alright, let me know what you find

[rgill02]

The value being passed to onTrack seems to be empty for me. Logging the arg passed in gives this:

{
   "_event": {},
   "_mediaTrack": {
     "_mediaStreamTrack": {},
     "_mediaStreamTrackSettings": {
       "_mediaTrackSettings": {}
     }
   },
   "_transceiver": null,
   "_receiver": {},
   "_streams": [
     {
       "_stream": {}
     }
   ]
 }

[adekunle11]

The value being passed to onTrack seems to be empty for me. Logging the arg passed in gives this:

{
   "_event": {},
   "_mediaTrack": {
     "_mediaStreamTrack": {},
     "_mediaStreamTrackSettings": {
       "_mediaTrackSettings": {}
     }
   },
   "_transceiver": null,
   "_receiver": {},
   "_streams": [
     {
       "_stream": {}
     }
   ]
 }

@rgill02 I think it has something to do with STUN & TURN servers
The media streams are shared only when they are on the same network, you can try it.
To my understanding, TURN server is used when to share media streams when they are not in the same network.

[rgill02]

I'm just using the google stun servers given in the example. My two devices are on different networks. Should I be using something different? @adekunle11 What are you using for STUN and TURN servers?

const rtc_config = new WRTC.TNSRTCConfiguration({iceServers: [
    new WRTC.TNSRTCIceServer(['stun:stun.l.google.com:19302']),
    new WRTC.TNSRTCIceServer(['stun:stun1.l.google.com:19302']),]});

[adekunle11]

Thats the issue the plugin is having, it only uses the STUN servers and that will only work when the devices are on the same wifi.

I've tried adding turn servers, still didn't work on different networks. The way I think the plugin should work is to keep trying all the servers set until it gets one that works, but it doesn't do that.
I also noticed if you remove the iceServers set in the demo, the plugin would still work. So my guess is the plugin uses default servers the @triniwiz set while building it which are only STUN

[rgill02]

I came up with a very hackish solution. I setup my own VPN server following this guide. I have both clients first connect to the VPN on their phone (using an app like open vpn connect). Then they can run my app while connected to my VPN. Since they are now on the same network the video streaming works. @adekunle11 you are correct about the STUN/TURN servers.

[triniwiz]

I should have this covered with the next release seems it’s not respecting the urls especially turn Sent from Yahoo Mail for iPhone On Friday, November 27, 2020, 6:06 PM, Ryan Gill <notifications@github.com> wrote: I came up with a very hackish solution. I setup my own VPN server following this guide. I have both clients first connect to the VPN on their phone (using an app like open vpn connect). Then they can run my app while connected to my VPN. Since they are now on the same network the video streaming works. @adekunle11 you are correct about the STUN/TURN servers. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[abhayastudios]

Anyone still struggling with this can you please watch my comment on #44 and see whether this solves your issue?