使用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 (将#修改为@）