webRTC第五章:使用peerJs实现用户进入与退出房间

172 阅读1分钟

在该项目中,我们只需要获取房间里其他人的数据流,就可以通过< v i d e o / >展示出来了。所以,以下记录的过程只会记录到获取相应的视频流为止。

加入群组呼叫

step1. 前端:发送加入群组通知

//localStream本地数据流,hostSocketId为房间创建者的socketid
socket.emit("group-call-join-request", {
    peerId: myPeerId,
    hostSocketId,
    roomId,
    streamId: localStream.id
})

step2. 后端:监听通知,并向该房间发送信息

通过socket.join加入房间

socket.on("group-call-join-request", data=>{
        // 加入房间
        socket.join(data.roomId)
        io.to(data.roomId).emit("group-call-join-request", {
            peerId: data.peerId,
            streamId: data.streamId
        })
    })

step3. 前端:监听通知

myPeer为第四章准备阶段中,封装函数时得到的myPeer

socket.on("group-call-join-request", data=>{
    const localStream = store.getState().localStream
    const call = myPeer.call(data.peerId, localStream)
    call.on("stream", incomingStream=>{
        //房间内的所有用户获取新加入用户的数据流incomingStream
    })
})

退出房间

step1. 前端:向后端发送通知,销毁流,关闭连接并重新连接,最后把本地的音视频流回复初始化状态

socket.emit("group-call-user-left",{
    roomId: roomId,
    streamId: store.getState().localStream.id
})
// 销毁流并关闭连接
myPeer.destroy()
connectWithMyPeer()
//localStream为本地音视频流
localStream.getVideoTracks()[0].enabled = true
localStream.getAudioTracks()[0].enabled = true

step2. 后端

通过socket.leave离开房间,并通知房间中其他用户有人离开

socket.on("group-call-user-left", data=>{
    socket.leave(data.roomId)
    io.to(data.roomId).emit("group-call-user-left", {
        streamId: data.streamId
    })
})

step3. 前端

socket.on("group-call-user-left", data=>{
    //从data中可以获取离开用户的数据流信息
})