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

问题描述

伙计们，我已经在网站上实现了视频通话功能，但是我无法实现对等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;
  }

解决方法

SERVER.JS

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

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

    socket.join(roomId)
    socket.to(roomId).broadcast.emit('user-connected',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',username)
    })
  })

})

SCRIPT.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',username) => {
  setTimeout(() => {
    $("ul").append(`<span class="messageHeader"><small>${username} Left Meeting</small></span>`);
    if (peers[userId]) 
      peers[userId].close()
  },2000)
})