Another user from different browser

[codename11]

It doesn't work if another user connects to(same) room from another's browser's window. In yt tutorial it's showed in same browser, but another of it's separated tabs.

[liebsen]

Hi It's good to keep in mind that webrtc needs a stun/turn server in order to connect peers that are behind NAT. This is a problem that peerjs will not solve for us and the reason why it works good on LAN but fails over the internet.

Here's how you can install your own turn server on debian / ubuntu. https://ourcodeworld.com/articles/read/1175/how-to-create-and-configure-your-own-stun-turn-server-with-coturn-in-ubuntu-18-04

If you can't have root access to your cloud there are other alternatives like for example https://xirsys.com/

Thanks for this tutorial, it is awesome.

[codename11]

Hi It's good to keep in mind that webrtc needs a stun/turn server in order to connect peers that are behind NAT. This is a problem that peerjs will not solve for us and the reason why it works good on LAN but fails over the internet.

Here's how you can install your own turn server on debian / ubuntu. https://ourcodeworld.com/articles/read/1175/how-to-create-and-configure-your-own-stun-turn-server-with-coturn-in-ubuntu-18-04

If you can't have root access to your cloud there are other alternatives like for example https://xirsys.com/

Thanks for this tutorial, it is awesome.

Google's WebRTC: https://webrtc.org/ addresses that and mentions stun/turn. Still, headline for the repo and tutorial, shouldn't apply to these. To put it simply, it is incomplete.

[ashishlijhara]

Hi,

Yes the issue persists if you go in private tabs to connect to the same room as well, because by the logic in the code new user joins the room, but the stream is not passed to the room till allow is clicked. Although this works if you refresh the page. The getUserMedia contains some code that required fixing.

Here is how my modified script.js looks: ` const socket = io('/') const videoGrid = document.getElementById('video-grid') let myPeer = null const myVideo = document.createElement('video') myVideo.muted = true let peers = {} navigator.mediaDevices.getUserMedia({ //video: true, audio: true }).then(stream => { myPeer = new Peer(undefined, { host: '/', port: '3001', }) addVideoStream(myVideo, stream) myPeer.on('open', id => { socket.emit('join-room', ROOM_ID, id) }) myPeer.on('call', call => { call.answer(stream) const video = document.createElement('video') call.on('stream', userVideoStream => { addVideoStream(video, userVideoStream) }) })

socket.on('user-connected', userId => { console.log("new user connected", userId) connectToNewUser(userId, stream) }) }).catch(error=>{ console.log("Error: ",error) })

socket.on('user-disconnected', userId => { if (peers[userId]) peers[userId].close() })

function connectToNewUser(userId, stream) { const call = myPeer.call(userId, stream) const video = document.createElement('video') call.on('stream', userVideoStream => { addVideoStream(video, userVideoStream) }) call.on('close', () => { video.remove() })

peers[userId] = call }

function addVideoStream(video, stream) { video.srcObject = stream video.addEventListener('loadedmetadata', () => { video.play() }) videoGrid.append(video) } `