video calling App in React JS using Simple Peer

io.on('connection', function(socket){  debug('a user connected');  io.emit('peer', {    peerId: socket.id  })  socket.on('disconnect', reason => {    io.emit('unpeer', {      peerId: socket.id,      reason    })  })  socket.on('signal', msg => {    debug('signal received', msg)    const receiverId = msg.to    const receiver = io.sockets.connected[receiverId]    if (receiver) {      const data = {        from: socket.id,        ...msg      }      debug('sending signal to', receiverId)      io.to(receiverId).emit('signal', data);    } else {      debug('no receiver found', receiverId)    }  })});

import React, { Component } from 'react';import Peer from 'simple-peer'import io from 'socket.io-client'const debug = require('debug')('screen-share:app')const ioUrl = 'http://localhost:4000/'const enableTrickle = trueclass App extends Component {  state = {    peers: {},    stream: null  }  constructor() {    super()    this.onMedia = this.onMedia.bind(this)    this.createPeer = this.createPeer.bind(this)    this.getMedia(this.onMedia, err => {      this.setState({        mediaErr: 'Could not access webcam'      })      debug('getMedia error', err)    })  }  componentDidUpdate() {    if (this.stream && this.video && !this.video.srcObject) {      debug('set video stream', this.video, this.stream)      this.video.srcObject = this.stream    }    this.attachPeerVideos()  }  attachPeerVideos() {    Object.entries(this.state.peers).forEach(entry => {      const [peerId, peer] = entry      if (peer.video && !peer.video.srcObject && peer.stream) {        debug('setting peer video stream', peerId, peer.stream)        peer.video.setAttribute('data-peer-id', peerId)        peer.video.srcObject = peer.stream      }    })  }  getMedia(callback, err) {    const options = { video: true, audio: true }    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {      return navigator.mediaDevices.getUserMedia(options)        .then(stream => callback(stream))        .catch(e => err(e))    }    return navigator.getUserMedia(options, callback,  err)  }  onMedia(stream) {    this.stream = stream    this.forceUpdate() // we have stream    this.socket = io(ioUrl)    this.socket.on('peer', msg => {      const peerId = msg.peerId      debug('new peer poof!', peerId)      if (peerId === this.socket.id) {        return debug('Peer is me :D', peerId)      }      this.createPeer(peerId, true, stream)    })    this.socket.on('signal', data => {      const peerId = data.from      const peer = this.state.peers[peerId]      if (!peer) {        this.createPeer(peerId, false, stream)      }      debug('Setting signal', peerId, data)      this.signalPeer(this.state.peers[peerId], data.signal)    })    this.socket.on('unpeer', msg => {      debug('Unpeer', msg)      this.destroyPeer(msg.peerId)    })  }  createPeer(peerId, initiator, stream) {    debug('creating new peer', peerId, initiator)    const peer = new Peer({initiator: initiator, trickle: enableTrickle, stream})    peer.on('signal', (signal) => {      const msgId = (new Date().getTime())      const msg = { msgId, signal, to: peerId }      debug('peer signal sent', msg)      this.socket.emit('signal', msg)    })    peer.on('stream', (stream) => {      debug('Got peer stream!!!', peerId, stream)      peer.stream = stream      this.setPeerState(peerId, peer)    })    peer.on('connect', () => {      debug('Connected to peer', peerId)      peer.connected = true      this.setPeerState(peerId, peer)      peer.send(this.serialize({        msg: 'hey man!'      }))    })    peer.on('data', data => {      debug('Data from peer', peerId, this.unserialize(data))    })    peer.on('error', (e) => {      debug('Peer error %s:', peerId, e);    })    this.setPeerState(peerId, peer)    return peer  }  destroyPeer(peerId) {    const peers = {...this.state.peers}    delete peers[peerId]    this.setState({      peers    })  }  serialize(data) {    return JSON.stringify(data)  }  unserialize(data) {    try {      return JSON.parse(data.toString())    } catch(e) {      return undefined    }  }  setPeerState(peerId, peer) {    const peers = {...this.state.peers}    peers[peerId] = peer    this.setState({      peers    })  }  signalPeer(peer, data) {    try {      peer.signal(data)    } catch(e) {      debug('sigal error', e)    }  }  renderPeers() {    return Object.entries(this.state.peers).map(entry => {      const [peerId, peer] = entry      debug('render peer', peerId, peer, entry)      return <div key={peerId}>        <video ref={video => peer.video = video}></video>      </div>    })  }  render() {    return (      <div className="App">        <header className="App-header">          <img src={logo} className="App-logo" alt="logo" />          <h1 className="App-title">WebRTC Video Chat</h1>        </header>        {this.state.mediaErr && (          <p className="error">{this.state.mediaErr}</p>        )}        <div id="me">          <video id="myVideo" ref={video => this.video = video} controls></video>        </div>        <div id="peers">{this.renderPeers()}</div>      </div>    );  }}export default App;