Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remote video not displaying #57

Open
adekunle11 opened this issue Nov 8, 2020 · 13 comments
Open

Remote video not displaying #57

adekunle11 opened this issue Nov 8, 2020 · 13 comments

Comments

@adekunle11
Copy link

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
[email protected] joined room 7
a user connected
[email protected] joined room 7
call from [email protected] & 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: [email protected] 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: [email protected] roomId: 7 sdp: candidate:559267639 1 udp 2122202367 ::1 47110 typ host generation 0 ufrag lO5+ network-id 2
iceCandid from: [email protected] roomId: 7 sdp: candidate:1510613869 1 udp 2122129151 127.0.0.1 42330 typ host generation 0 ufrag lO5+ network-id 1
iceCandid from: [email protected] 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: [email protected] roomId: 7 sdp: candidate:559267639 1 udp 2122202367 ::1 46637 typ host generation 0 ufrag lO5+ network-id 2
iceCandid from: [email protected] roomId: 7 sdp: candidate:1510613869 1 udp 2122129151 127.0.0.1 52667 typ host generation 0 ufrag lO5+ network-id 1
iceCandid from: [email protected] roomId: 7 sdp: candidate:1876313031 1 tcp 1518222591 ::1 38912 typ host tcptype passive generation 
0 ufrag lO5+ network-id 2
iceCandid from: [email protected] 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: [email protected] roomId: 7 sdp: candidate:1876313031 1 tcp 1518222591 ::1 48169 typ host tcptype passive generation 
0 ufrag lO5+ network-id 2
iceCandid from: [email protected] 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: [email protected] & 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 [email protected]
to room 7
iceCandid from: [email protected] 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: [email protected] roomId: 7 sdp: candidate:559267639 1 udp 2122202367 ::1 45731 typ host generation 0 ufrag chqQ network-id 2    
iceCandid from: [email protected] roomId: 7 sdp: candidate:1510613869 1 udp 2122129151 127.0.0.1 54060 typ host generation 0 ufrag chqQ network-id 1
iceCandid from: [email protected] roomId: 7 sdp: candidate:1876313031 1 tcp 1518222591 ::1 50124 typ host tcptype passive generation 0 ufrag chqQ network-id 2
iceCandid from: [email protected] 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 [email protected]
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
Copy link

rgill02 commented Nov 25, 2020 •
edited
Loading

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

@adekunle11
Copy link
Author

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
Copy link

rgill02 commented Nov 26, 2020

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

@adekunle11
Copy link
Author

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
Copy link

rgill02 commented Nov 27, 2020

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
Copy link
Author

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
Copy link

rgill02 commented Nov 27, 2020

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
Copy link
Author

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
Copy link

rgill02 commented Nov 27, 2020

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
Copy link
Author

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
Copy link

rgill02 commented Nov 27, 2020

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
Copy link
Owner

triniwiz commented Nov 27, 2020 via email

@abhayastudios
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@abhayastudios @triniwiz @rgill02 @adekunle11