如何解决如何在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)
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。