Node.js 使用socket.io显示一对多用户
嘿，伙计们，我正在尝试使用socket.io nodejs react和peerjs制作一对多的wrtc视频会议，到目前为止，它还可以工作，但所有用户都能看到彼此，我希望所有用户只看到启动连接的人，但启动连接的人可以看到所有人。请帮助我，我不知道如何修复此问题 现在，对于每个视频流，它都会创建一个视频元素，并将srcObt设置为流，但我希望连接的用户只获取开始连接的用户的流，并且开始连接的用户可以获取连接的用户的所有流 myNode/socket代码Node.js 使用socket.io显示一对多用户,node.js,reactjs,sockets,peerjs,Node.js,Reactjs,Sockets,Peerjs,嘿，伙计们，我正在尝试使用socket.io nodejs react和peerjs制作一对多的wrtc视频会议，到目前为止，它还可以工作，但所有用户都能看到彼此，我希望所有用户只看到启动连接的人，但启动连接的人可以看到所有人。请帮助我，我不知道如何修复此问题 现在，对于每个视频流，它都会创建一个视频元素，并将srcObt设置为流，但我希望连接的用户只获取开始连接的用户的流，并且开始连接的用户可以获取连接的用户的所有流 myNode/socket代码 io.on('connection',soc
io.on('connection',socket =>{
socket.on('join-class',(classId,palsid)=>{
socket.join(classId)
socket.to(classId).broadcast.emit('user-connected',palsid)
socket.on('disconnect',()=>{
socket.to(classId).broadcast.emit('user-disconnect',palsid)
})
})
})
server.listen(4000, ()=>{
console.log('server is running on port 4000')
})
import React from 'react'
import io from 'socket.io-client'
import Peer from 'peerjs'
import './ClassWall.css'
import { Modal, Button } from 'antd';
import img from '../../uploads/349-3498013_laptop-personal-computer-diagram-computer-icons-download-laptop-clipart.png'
const socket = io.connect('http://localhost:4000/')
class LiveClass extends React.Component{
constructor(){
super()
this.state = {
userId :'',
classStatus: '',
videoSrc:'',
visible: false
}
}
async componentDidMount(){
//set the user id of logedin user
const videoGrid = document.getElementById('video-grid')
const Myvideo = document.createElement('video')
Myvideo.addEventListener('click',()=>{
console.log(Myvideo)
})
Myvideo.muted = true
try {
const response = await fetch('http://localhost:4000/Auth//UserID/id',{
headers:{token:localStorage.token}
})
const Parse = await response.json()
this.setState({userId:Parse})
} catch (error) {
}
//get user id to connect through peer
const myPeer = new Peer(this.state.userId,{
host: '/',
port:4001
})
//connect and share video stream
try {
const peers = {}
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then(stream =>{
addVideoStream(Myvideo,stream)
myPeer.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)
console.log('newUser',userId)
})
})
socket.on('user-disconnect', userId=>{
if(peers[userId])peers[userId].close()
})
myPeer.on('open',id=>{
socket.emit('join-class',this.props.match.params.id,id)
})
//get user stream and connect
function connectToNewUser(userId,stream){
const call = myPeer.call(userId,stream)
const video = document.createElement('video')
video.setAttribute("class",`pointer`)
video.addEventListener('click',()=>{
console.log(video)
})
call.on('stream',userVideostream=>{
addVideoStream(video,userVideostream)
})
call.on('close',()=>{
video.remove()
})
peers[userId]=call
}
//Add video stream
function addVideoStream(video,stream){
const videoGrid = document.getElementById('video-grid')
video.srcObject = stream
video.addEventListener('loadedmetadata', () =>{
video.play()
})
videoGrid.append(video)
}
} catch (error) {
console.log('error',error)
}
this.checkIfClassTrue()
}
//check if its class
checkIfClassTrue = async()=>{
const response = await fetch(`http://localhost:4000/liveclass/${this.props.match.params.id}`)
const Parse = await response.json()
this.setState({classStatus:Parse})
}
//modal
showModal = () => {
this.setState({
visible: true,
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false,
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false,
});
};
render(){
return(
<div>
{
this.state.classStatus === 'Not found'?
'not found':
<div>
<div id="video-grid">
{/* <img src={img}/> */}
</div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
</Modal>
</div>
}
</div>
)
}
}
export default LiveClass
从“React”导入React
从“socket.io客户端”导入io
从“peerjs”导入对等点
导入“./ClassWall.css”
从“antd”导入{Modal，Button}；
从“../../uploads/349-3498013_laptop-personal-computer-diagram-computer-icons-download-laptop-clipart.png”导入img
常量套接字=io.connect（'http://localhost:4000/')
类LiveClass扩展了React.Component{
构造函数（）{
超级（）
此.state={
用户标识：“”，
类状态：“”，
videoSrc:“”，
可见：假
}
}
异步组件didmount（）{
//设置登录用户的用户id
const videoGrid=document.getElementById（'video-grid'））
const Myvideo=document.createElement（'video'））
Myvideo.addEventListener（'单击'，（）=>{
console.log（Myvideo）
})
Myvideo.muted=true
试一试{
const response=等待获取（'http://localhost:4000/Auth//UserID/id',{
标题：{token:localStorage.token}
})
const Parse=wait response.json（）
this.setState（{userId:Parse}）
}捕获（错误）{
}
//获取用户id以通过对等连接
const myPeer=new Peer（this.state.userId{
主机：“/”，
端口：4001
})
//连接并共享视频流
试一试{
常量对等点={}
navigator.mediaDevices.getUserMedia({
视频：没错，
音频：正确
})。然后（流=>{
添加视频流（Myvideo，流）
myPeer.on（'call'，call=>{
呼叫.应答（流）
const video=document.createElement（'video'）
call.on（'stream'，userVideostream=>{
添加视频流（视频，用户视频流）
})
})
socket.on（'user-connected'，userId=>{
connectToNewUser（用户ID，流）
console.log（'newUser'，userId）
})
})
socket.on（'user-disconnect'，userId=>{
if（peers[userId]）peers[userId].close（）
})
myPeer.on（'open'，id=>{
emit（'join-class'，this.props.match.params.id，id）
})
//获取用户流并连接
函数connectToNewUser（用户ID，流）{
const call=myPeer.call（userId，stream）
const video=document.createElement（'video'）
video.setAttribute（“类”，“指针”）
video.addEventListener（'单击'，（）=>{
console.log（视频）
})
call.on（'stream'，userVideostream=>{
添加视频流（视频，用户视频流）
})
call.on（'关闭'，（）=>{
video.remove（）
})
对等方[userId]=呼叫
}
//添加视频流
函数addVideoStream（视频，流）{
const videoGrid=document.getElementById（'video-grid'））
video.src对象=流
video.addEventListener（'loadedmetadata'，（）=>{
视频播放（）
})
videoGrid.append（视频）
}
}捕获（错误）{
console.log（'error'，error）
}
this.checkIfClassTrue（）
}
//检查它是否属于同一类
checkIfClassTrue=async（）=>{
const response=等待获取(`http://localhost:4000/liveclass/${this.props.match.params.id}`）
const Parse=wait response.json（）
this.setState（{classStatus:Parse}）
}
//模态
showModal=（）=>{
这是我的国家({
可见：对，
});
};
handleOk=e=>{
控制台日志（e）；
这是我的国家({
可见：假，
});
};
handleCancel=e=>{
控制台日志（e）；
这是我的国家({
可见：假，
});
};
render（）{
返回(
{
this.state.classStatus==='未找到'？
“未找到”：
{/* */}
开放模态
}
)
}
}
导出默认LiveClass