如何在 PeerJs 中添加用户名字段

Question

伙计们，我已经在我的网站上实现了视频通话功能，但我无法为对等 JS id 实现用户名。我需要做的是当用户加入会议时，他需要输入他的姓名，他的姓名是发送到聊天窗口的另一个页面，然后我们可以知道谁给我们发消息以及我们给谁发消息。

第 1 页

<input type="text" placeholder="Type something..." id="myInput">
<input class="joinbar" type="text" onChange="this.form.action=this.value" placeholder="Enter your room id"><br>
<input class="joinbutton" type="submit" value="Join">
<button type="button" onclick="getInputValue();">Get Value</button>

<script>
            function getInputValue(){
                // Selecting the input element and get its value 
                var inputVal = document.getElementById("myInput").value;
                
                // Displaying the value
                var username = inputVal;
                sessionStorage.setItem("username", username);


            }
</script>

第 2 页

我在这里检索用户名

var username = sessionStorage.getItem("username");
console.log(username);

我想用这个用户名显示在聊天中

    const peers ={}

var peer = new Peer(undefined,{
    path:'/peerjs',
    host:'/',
    port:'3030'
}); 



let myVideoStream;

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then(stream =>{
    myVideoStream=stream;
    addVideoStream(myVideo,stream);


    peer.on('call',call =>{
        call.answer(stream)
        const video = document.createElement('video')
        call.on('stream',userVideoStream =>{
            addVideoStream(video,userVideoStream)
        })
    })

    socket.on('user-connected',(userId)=>{
        connectToNewUser(userId,stream);
    })

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

    let text = $('input')

$('html').keydown((e)=>{
    if(e.which ==13 && text.val().length !==0){
        socket.emit('message',text.val());
        text.val('')
    }
});

socket.on('createMessage',message => {
    $(".messages").append(`<li class="message"><b>user</b><br/>${message}</li>`);
    scrollToBottom();
})


})




peer.on('open',id =>{
    socket.emit('join-room',ROOM_ID,id);
})


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

    peers[userId] = call
}

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

const scrollToBottom = () => {
    let d = $('.main__chat_window');
    d.scrollTop(d.prop("scrollHeight"));
  }

  const muteUnmute = () => {
    const enabled = myVideoStream.getAudioTracks()[0].enabled;
    if (enabled) {
      myVideoStream.getAudioTracks()[0].enabled = false;
      setUnmuteButton();
    } else {
      setMuteButton();
      myVideoStream.getAudioTracks()[0].enabled = true;
    }
  }

  const setMuteButton = () => {
    const html = `
      <i class="fas fa-microphone"></i>
      <span>Mute</span>
    `
    document.querySelector('.main__mute_button').innerHTML = html;
  }
  
  const security = () => {
    alert("Connection is end-to-end encrypted");
    document.querySelector('.main__security').innerHTML = html;
  }

  const setUnmuteButton = () => {
    const html = `
      <i class="unmute fas fa-microphone-slash"></i>
      <span>Unmute</span>
    `
    document.querySelector('.main__mute_button').innerHTML = html;
  }

  const leaveMeeting = () => {
    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 => track.stop())
    window.close();
    setStopVideo()
    setMuteButton()
    document.querySelector('.main__leave_meeting').innerHTML = html;
  }
  
  const playStop = () => {
    let enabled = myVideoStream.getVideoTracks()[0].enabled;
    if (enabled) {
      myVideoStream.getVideoTracks()[0].enabled = false;
      setPlayVideo()
    } else {
      setStopVideo()
      myVideoStream.getVideoTracks()[0].enabled = true;
    }
  }

  const setStopVideo = () => {
    const html = `
      <i class="fas fa-video"></i>
      <span>Stop Video</span>
    `
    document.querySelector('.main__video_button').innerHTML = html;
  }
  
  const setPlayVideo = () => {
    const html = `
    <i class="stop fas fa-video-slash"></i>
      <span>Play Video</span>
    `
    document.querySelector('.main__video_button').innerHTML = html;
  }

Answer 1

SERVER.JS

 io.on('connection', socket => {

  socket.on('join-room', (roomId, userId, username) => {

    socket.join(roomId)
    socket.to(roomId).broadcast.emit('user-connected', userId, username);

    socket.on('message', (message) => {
      //send message to the same room
      io.to(roomId).emit('createMessage', message, username)
    }); 

    socket.on('disconnect', () => {
      socket.to(roomId).broadcast.emit('user-disconnected', userId, username)
    })
  })

})

脚本.JS

myPeer.on('open', id => {
  socket.emit('join-room', ROOM_ID, id, JSON.parse(localStorage.getItem('dataKey')).username)

  // localStorage.clear();
})

socket.on('user-connected', (userId, username) => {
  // user is joining
  setTimeout(() => {
    // user joined
    connectToNewUser(userId, stream)
    $("ul").append(`<span class="messageHeader"><small> ${username} Joined Meeting</small></span>`); 
  }, 2000)
})


// input value
let text = $("input");
  // when press enter send message
$('html').keydown(function (e) {
  if (e.which == 13 && text.val().length !== 0) {
    socket.emit('message', text.val());
    text.val('')
  }
});
socket.on("createMessage", (message, username) => {
  $("ul").append(`<li >
                <span class="messageHeader">
                  <span class="messageSender">${username}</span> 
                  ${new Date().toLocaleString('en-US', {
                    hour: 'numeric',
                    minute: 'numeric',
                    hour12: true,
                  })}
                </span>
                <span class="message">${message}</span>
               </li>`);
    scrollToBottom()
  })
})


socket.on('user-disconnected', (userId, username) => {
  setTimeout(() => {
    $("ul").append(`<span class="messageHeader"><small>${username} Left Meeting</small></span>`);
    if (peers[userId]) 
      peers[userId].close()
  }, 2000)
})