如何解决使用socket.io显示一对多用户
大家好正在尝试使用socket.io nodejs react和peerjs进行一对多的wrtc视频会议,到目前为止,它的工作正常,但是所有用户都可以看到对方,我希望所有用户只能看到启动连接的人但启动连接的人可以看到所有人,请帮助我,我不知道如何解决此问题。
现在为每个视频流创建一个视频元素并将srcObt设置为该流,但是我希望连接的用户仅获得启动用户的流,而启动连接的用户可以获取所有的流用户已连接。
myNode /套接字代码
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')
})
我的前端代码使用react
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)
})
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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。