Method .on('open') dosen`t return peer ID

[Seeman13]

Hello! I taied this package, but when I to usage method: this.$peer.on('open', function (id) { console.log('My peer ID is::' + id) })

I don`t get peer id.

If I usage peerjs without You wrapper then: import Peer from 'peerjs' const peer = new Peer() peer.on('open', function (id) { console.log(There 'I got My peer ID:' + id) })

[Seeman13]

Eventually I got id easy: this.$peer.id. Thanks You for work!

[JvSomeren]

Hi!

Glad to hear you were able to find a workaround! However I'm curious what might cause this problem. Logging the peer id in the example works as expected. Have you got a code sample where it fails?

[Seeman13]

I'm trying to make one-way video chat. main.js // Vue PeerJS import VuePeerJS from 'vue-peerjs' import Peer from 'peerjs' Vue.use(VuePeerJS, new Peer({ // key: 'lwjd5qra8257b9', config: { 'iceServers': [ { url: 'stun:stun01.sipphone.com' }, { url: 'stun:stun.ekiga.net' }, { url: 'stun:stun.fwdnet.net' }, { url: 'stun:stun.ideasip.com' }, { url: 'stun:stun.iptel.org' }, { url: 'stun:stun.rixtelecom.se' }, { url: 'stun:stun.schlund.de' }, { url: 'stun:stun.l.google.com:19302' }, { url: 'stun:stun1.l.google.com:19302' }, { url: 'stun:stun2.l.google.com:19302' }, { url: 'stun:stun3.l.google.com:19302' }, { url: 'stun:stun4.l.google.com:19302' }, { url: 'stun:stunserver.org' }, { url: 'stun:stun.softjoys.com' }, { url: 'stun:stun.voiparound.com' }, { url: 'stun:stun.voipbuster.com' }, { url: 'stun:stun.voipstunt.com' }, { url: 'stun:stun.voxgratia.org' }, { url: 'stun:stun.xten.com' } ] } }))

Component VideoChat - recipient video ...... `sockets: { video () { this.loadingVideoChat = true this.$peer.on('call', call => { call.answer() call.on('stream', remoteStream => { console.log('stream') const video = document.createElement('video') video.setAttribute('id', 'remote-stream')

      if ('srcObject' in video) {
        video.srcObject = remoteStream
        video.play()
      } else {
        video.src = URL.createObjectURL(remoteStream)
        video.play()
      }

      this.loadingVideoChat = false
      document.getElementById('video-wrapper').append(video)
    })
  })
}

}, ...... ` Component WebCamera - translator video ...... onStartedCamera (stream) { this.mediaStream = stream this.loadingVideoChat = false console.log('On Started Camera Event') this.$peer.call(this.peerId, this.mediaStream) this.$socket.emit('video', this.room) }, ......

NodeServer

socket.on('video', room => { socket.broadcast.to(room).emit('video') })

It`s worked! But! Now I am observing another problem: if I exit the chat tab and then go back to it, thenthis.$peer.on('call', call => {}) event is called twice - two video windows are displayed. If I close the chat tab again and then open it again, the event has already been triggered 3 times and so on. If I do in the Videochat component: destroyed () { this.$peer.on('call', mediaConnection => { mediaConnection.close() }) } The situation repeats.

[JvSomeren]

This problem might occur because every time the recipient video component receives a video socket event it registers a new this.$peer.on('call', => {}).

Try moving the registration of the listener to the created() or mounted() lifecycle hook.

[Seeman13]

I moved block this.$peer.on('call', => {}) to mounted hook. Nofing сhanged. If I close a call so: this.$peer.on('call', mediaConnection => { mediaConnection.close() })

When I call again, I get an error: Uncaught TypeError: Cannot read property 'startConnection' of null

I understand, than I should close call. After if me need call again, I should listen call event. And I will should close call. But How right close call?

[yazer79]

This problem might occur because every time the recipient video component receives a video socket event it registers a new this.$peer.on('call', => {}).

Can you please reply on how to set it up right? I am struggling with it.. The documentation is not clear You mean to set the new peer like this:

mounted() {
const peer = this.$peer.connect(this.otherPeerId);
}

then in the methods use any function without arrow function like this

methods:
call(id){
    var call = this.$peer.call(id, stream);
    call.on('stream'), function(...){ // ..... }
}

or do use a property? This is really confusing

[JvSomeren]

Have you got the code for the component in which you're trying to implement it? This will help me in helping you!

Please note the difference between this.$peer.connect(...) and this.$peer.call(...), the first one opens a data connection and the second one a media connection. A more complete description of these methods can be found here.

What I assume you are trying to accomplish is starting a video stream, this could be performed as follows:

methods: {
  call: function(id) {
    // call another peer, providing our local mediaStream
    const call = this.$peer.call(id, mediaStream);

    // the mediaStream sent back to us by the other peer
    call.on('stream', function(stream) {
      // `stream` is the MediaStream of the remote peer.
      // Here you'd add it to an HTML video/canvas element.
    });    
  }
},
created() {
  // listen for incoming calls
  this.$peer.on('call', function(call) {
    // Answer the call, providing our mediaStream
    call.answer(mediaStream);

    // and once again handle the mediaStream sent back to us
    call.on('stream', function(stream) {
      // `stream` is the MediaStream of the remote peer.
      // Here you'd add it to an HTML video/canvas element.
    });
  });
}

I hope this gives you some guidance!

[yazer79]

Thanks for your answer, I am just trying to get the basics of a call with vuejs and peerjs .. If you would like me to open a new issue, please tell me I did find out about the difference yesterday, and I was able to make a video call and it works very well ( with call method and a mounted answer like what you have posted - I wish that was available on readme yesterday) I want to make the basics like call notification, accepting call, hanging up I can't make a close call and the streams keeps running I am trying to make a hang up or reject call method but it's not working: methods: { rejectCall(){ this.$peer.on('data', function(data){ data.close() }) },

[JvSomeren]

So in order to close a connection, either data or media, you will need access to the connection itself. What you could do is store the connection within the data of your component. So for example:

data: {
  connection: null,
},
methods: {
  call: function(id) {
    // call another peer, providing our local mediaStream
    this.connection = this.$peer.call(id, mediaStream);

    // the mediaStream sent back to us by the other peer
    this.connection.on('stream', function(stream) {
      // `stream` is the MediaStream of the remote peer.
      // Here you'd add it to an HTML video/canvas element.
    });    
  },
  closeCall: function() {
    if(this.connection) {
      this.connection.close();
    }
  },
},
created() {
  // listen for incoming calls
  this.$peer.on('call', function(call) {
    // Answer the call, providing our mediaStream
    call.answer(mediaStream);

    // and once again handle the mediaStream sent back to us
    call.on('stream', function(stream) {
      // `stream` is the MediaStream of the remote peer.
      // Here you'd add it to an HTML video/canvas element.
    });

    this.connection = call;
  });
}

I believe this should work, please note that I haven't tried this specific piece of code. I advise you to take a closer look at the peerJS documentation, this might give you better insight into how to manage your connections. The JS package I wrote is mainly a wrapper :)

[yazer79]

I tried the same idea of storing it as data prop and I failed :D I will take a look at it hopefully I did something wrong, thanks a lot for your replies