title: How to add user name field in PeerJs
body: <p>guys, I had implemented a video call feature in my website but I am not able to implement username to the peer JS id.What I need to do is when user joins the meet he need to enter his name and his name is to be sent to another page of chat window,then we can know who messages us and to who we message.</p>
  <p>Page 1</p>
  <pre><code>&lt;input type=&quot;text&quot; placeholder=&quot;Type something...&quot; id=&quot;myInput&quot;&gt;
  &lt;input class=&quot;joinbar&quot; type=&quot;text&quot; onChange=&quot;this.form.action=this.value&quot; placeholder=&quot;Enter your room id&quot;&gt;&lt;br&gt;
  &lt;input class=&quot;joinbutton&quot; type=&quot;submit&quot; value=&quot;Join&quot;&gt;
  &lt;button type=&quot;button&quot; onclick=&quot;getInputValue();&quot;&gt;Get Value&lt;/button&gt;
  
  &lt;script&gt;
              function getInputValue(){
                  // Selecting the input element and get its value 
                  var inputVal = document.getElementById(&quot;myInput&quot;).value;
                  
                  // Displaying the value
                  var username = inputVal;
                  sessionStorage.setItem(&quot;username&quot;, username);
  
  
              }
  &lt;/script&gt;
  </code></pre>
  <p>Page 2</p>
  <p>Here i am retrieving the user name</p>
  <pre><code>var username = sessionStorage.getItem(&quot;username&quot;);
  console.log(username);
  </code></pre>
  <p>I want to use this username to display in chat</p>
  <pre><code>    const peers ={}
  
  var peer = new Peer(undefined,{
      path:'/peerjs',
      host:'/',
      port:'3030'
  }); 
  
  
  
  let myVideoStream;
  
  navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
  }).then(stream =&gt;{
      myVideoStream=stream;
      addVideoStream(myVideo,stream);
  
  
      peer.on('call',call =&gt;{
          call.answer(stream)
          const video = document.createElement('video')
          call.on('stream',userVideoStream =&gt;{
              addVideoStream(video,userVideoStream)
          })
      })
  
      socket.on('user-connected',(userId)=&gt;{
          connectToNewUser(userId,stream);
      })
  
      socket.on('user-disconnected',(userId)=&gt;{
          if(peers[userId]) peers[userId].close()
      })
  
      let text = $('input')
  
  $('html').keydown((e)=&gt;{
      if(e.which ==13 &amp;&amp; text.val().length !==0){
          socket.emit('message',text.val());
          text.val('')
      }
  });
  
  socket.on('createMessage',message =&gt; {
      $(&quot;.messages&quot;).append(`&lt;li class=&quot;message&quot;&gt;&lt;b&gt;user&lt;/b&gt;&lt;br/&gt;${message}&lt;/li&gt;`);
      scrollToBottom();
  })
  
  
  })
  
  
  
  
  peer.on('open',id =&gt;{
      socket.emit('join-room',ROOM_ID,id);
  })
  
  
  const connectToNewUser = (userId,stream) =&gt;{
      const call =peer.call(userId,stream)
      const video= document.createElement('video')
      call.on('stream',userVideoStream =&gt;{
          addVideoStream(video,userVideoStream)
      })
      call.on('close',()=&gt;{
        video.remove()
      })
  
      peers[userId] = call
  }
  
  const addVideoStream = (video, stream) =&gt;{
      video.srcObject = stream;
      video.addEventListener('loadedmetadata', () =&gt;{
          video.play();
      })
      videoGrid.append(video);
  }
  
  const scrollToBottom = () =&gt; {
      let d = $('.main__chat_window');
      d.scrollTop(d.prop(&quot;scrollHeight&quot;));
    }
  
    const muteUnmute = () =&gt; {
      const enabled = myVideoStream.getAudioTracks()[0].enabled;
      if (enabled) {
        myVideoStream.getAudioTracks()[0].enabled = false;
        setUnmuteButton();
      } else {
        setMuteButton();
        myVideoStream.getAudioTracks()[0].enabled = true;
      }
    }
  
    const setMuteButton = () =&gt; {
      const html = `
        &lt;i class=&quot;fas fa-microphone&quot;&gt;&lt;/i&gt;
        &lt;span&gt;Mute&lt;/span&gt;
      `
      document.querySelector('.main__mute_button').innerHTML = html;
    }
    
    const security = () =&gt; {
      alert(&quot;Connection is end-to-end encrypted&quot;);
      document.querySelector('.main__security').innerHTML = html;
    }
  
    const setUnmuteButton = () =&gt; {
      const html = `
        &lt;i class=&quot;unmute fas fa-microphone-slash&quot;&gt;&lt;/i&gt;
        &lt;span&gt;Unmute&lt;/span&gt;
      `
      document.querySelector('.main__mute_button').innerHTML = html;
    }
  
    const leaveMeeting = () =&gt; {
      console.log('leave meeting')
      const video = document.querySelector('video');
  
      // A video's MediaStream object is available through its srcObject attribute
      const mediaStream = video.srcObject;
  
      // Through the MediaStream, you can get the MediaStreamTracks with getTracks():
      const tracks = mediaStream.getTracks();
  
      // Tracks are returned as an array, so if you know you only have one, you can stop it with: 
      tracks[0].stop();
  
      // Or stop all like so:
      tracks.forEach(track =&gt; track.stop())
      window.close();
      setStopVideo()
      setMuteButton()
      document.querySelector('.main__leave_meeting').innerHTML = html;
    }
    
    const playStop = () =&gt; {
      let enabled = myVideoStream.getVideoTracks()[0].enabled;
      if (enabled) {
        myVideoStream.getVideoTracks()[0].enabled = false;
        setPlayVideo()
      } else {
        setStopVideo()
        myVideoStream.getVideoTracks()[0].enabled = true;
      }
    }
  
    const setStopVideo = () =&gt; {
      const html = `
        &lt;i class=&quot;fas fa-video&quot;&gt;&lt;/i&gt;
        &lt;span&gt;Stop Video&lt;/span&gt;
      `
      document.querySelector('.main__video_button').innerHTML = html;
    }
    
    const setPlayVideo = () =&gt; {
      const html = `
      &lt;i class=&quot;stop fas fa-video-slash&quot;&gt;&lt;/i&gt;
        &lt;span&gt;Play Video&lt;/span&gt;
      `
      document.querySelector('.main__video_button').innerHTML = html;
    }
  </code></pre>