node: peerjs works only on the same device/browser

Question

please help me with this peerjs issue. I have a simple video chat app built with node.js, express, ejs, socket.io, and peerjs. It is deployed on heroku at https://simple-peerjs.herokuapp.com/

The problem is when I joined as 2 different users, the number of videos displayed varies based on browsers, devices, and which users joined first, specifically so:

When both users is on the same device and browser, 2 videos are shown in each of the 2 tab as intended. But when one of the two connects to the website on different browsers or devices, let's say the first to join is A and the second to join is B, it will either be

A only see A. B only see B
A only see A. B see both B and A

I suspect that because peerjs is relatively old but it could just be some small flaws in my code on Github.

This is my client code

const socket = io()
const myPeer = new Peer(undefined, {
  host: "0.peerjs.com",
  port: "443",
  debug: 3
})

let myName, myId, myStream
const videoGrid = document.querySelector('#video-grid')
const userVideo = createVid();
userVideo.muted = true
const videoList = []
const peers = {}

myPeer.on('open', userId => {
  myId = userId
  mediaStreaming()
  socket.emit('join-room', 1, userId)
})

function mediaStreaming() {
  let getUserMedia = navigator.mediaDevices.getUserMedia
  getUserMedia({video: true,audio: true}).then(stream => {
    myStream = stream
    addVideoStream(userVideo, stream, myId)
  })
  myPeer.on('call', call => {
    call.answer(myStream)
    const existingUserVideo = createVid()
    call.on('stream', existingUserStream => {
      if (!peers[call.peer]) {
        addVideoStream(existingUserVideo, existingUserStream, call.peer)
      }
      peers[call.peer] = {
        video: existingUserVideo,
        call: call
      }
    })
    call.on('close', () => {existingUserVideo.remove()})
  })
  socket.on('user-connected', connectedUserId => {
    const call = myPeer.call(connectedUserId, myStream)
    const connectedUserVideo = createVid()
    call.on('stream', connectedUserStream => {
      if (!peers[connectedUserId]) {
        addVideoStream(connectedUserVideo, connectedUserStream, connectedUserId)
      }
      peers[connectedUserId] = {
        video: connectedUserVideo,
        call: call
      }
    })
    call.on('close', () => {
      connectedUserVideo.remove()
    })
  })
}
socket.on('user-disconnected', userId => {
  if (peers[userId]) {
    peers[userId].call.close()
    delete peers[userId]
  }
})

function addVideoStream(video, stream, id) {
  video.addEventListener('loadedmetadata', () => video.play())
  video.srcObject = stream
  video.setAttribute('id', id)
  addToGrid(video)
}
function createVid() {return document.createElement('video')}
function addToGrid(el) {videoGrid.appendChild(el)}

And this is my server code

const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const path = require('path')

app.set('view engine', 'ejs')
app.use(express.static(path.join(__dirname, 'public')))

app.get('/', (req, res) => {res.render('index.ejs')})

io.on('connection', socket => {
    socket.on('join-room', (roomId, userId) => {
        socket.join(roomId)
        socket.to(roomId).emit('user-connected', userId)
        socket.on('disconnect', () => {
            socket.to(roomId).emit('user-disconnected', userId)
        })
    })
})

server.listen(process.env.PORT || 3003)

node: peerjs works only on the same device/browser

0 Answers