[Node] PeerJs close, disconnect 안되는 오류 해결

문제

화상전화 토이 프로젝트 진행중에 PeerJs가 disconnect, close가 작동 안되는걸 확인하였음

PeerJs 자체 문제

원인

PeerJs에서 peer.on('close')가 작동이 안되는 이슈가 있음

깃허브에서 이슈로 이미 토론을 하여서 정리가 되었음

해결

깃허브에서 이슈에서 토론에 해결방법에 대해 누군가 올려놨었는데 함수 그대로

나는 내 스타일식으로 해결 하였음

 

비디오 마다 peer로 dom에 id를 걸어줘서 socket.io에서 disconnect 감지 후에 나간 사람의 peer로 dom을 삭제 하는 방식으로 하였음

const socket = io('/') // Create our socket
const videoGrid = document.getElementById('video-grid') // Find the Video-Grid element

const myPeer = new Peer() // Creating a peer element which represents the current user
const myVideo = document.createElement('video') // Create a new video tag to show our video
myVideo.muted = true // Mute ourselves on our end so there is no feedback loop

// Access the user's video and audio
navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
}).then(stream => {
   
    addVideoStream(myVideo, stream) // Display our video to ourselves

    myPeer.on('call', call => { // When we join someone's room we will receive a call from them
        call.answer(stream) // Stream them our video/audio
        const video = document.createElement('video') // Create a video tag for them
        video.id = call.peer
        call.on('stream', (userVideoStream) => { // When we recieve their stream
            addVideoStream(video, userVideoStream) // Display their video to ourselves
        })
    })

    socket.on('user-connected', userId => { // If a new user connect
        connectToNewUser(userId, stream);
    })

    socket.on("user-disconnected", (userId)=>{
        console.log(userId);
        // remove video or add your code here
        document.getElementById(userId)[0].remove();
    });
})

myPeer.on('open', id => { // When we first open the app, have us join a room
    socket.emit('join-room', ROOM_ID, id)
})

function connectToNewUser(userId, stream) { // This runs when someone joins our room
    const call = myPeer.call(userId, stream) // Call the user who just joined
    // Add their video
    const video = document.createElement('video');
    call.on('stream', userVideoStream => {
        video.id = userId;
        addVideoStream(video, userVideoStream, userId)
    })
    // error
    call.on('close', () => {
        video.remove()
    })
}


function addVideoStream(video, stream, userId) {
    video.srcObject = stream 
    video.addEventListener('loadedmetadata', () => { // Play the video as it loads
        video.play()
    })
    videoGrid.append(video) // Append video element to videoGrid
}

전체 코드는 https://github.com/heroq/webrtc-videorun

참고

PeerJS - Manually close the connection between peers

call.on("close") not triggered · Issue #636 · peers/peerjs