Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

tuturu1014's avatar

video chat app using laravel echo and peerjs

I've searched a lot of places to find a tutorial on how to build a video chat app with laravel echo and peerjs but couldn't find them. So instead, I tried to replicate the code used to build a zoom clone https://github.com/WebDevSimplified/Zoom-Clone-With-WebRTC and modify it using laravel echo in a presence channel.

The code below works when the user joins, I get their video feed, but when they leave, the video is still there and not removed. Plus I'm not sure how to pass the peerjs ID with laravel echo.

<html>
    <div id="video-grid"></div>
</html>
<script>
var usersCount,myPeerId

const myPeer = new Peer(undefined, {
    host: '/',
    port: '3002'
})

myPeer.on('open', id => {
    myPeerId = id;
})

let channel = Echo.join(`consultation`)
    channel.here((users) => {
        usersCount = users.length;
        $('#total-users').text(usersCount)
    })
    channel.joining((user) => {
        usersCount = usersCount+1;
        $('#total-users').text(usersCount)
        Toast.fire({
            icon: 'info',
            title: user.name+' has joined the room.'
        })
        channel.whisper('user-connected',myPeerId)
    })
    channel.leaving((user) => {
        usersCount = usersCount-1;
        $('#total-users').text(usersCount)
        Toast.fire({
            icon: 'info',
            title: user.name+' has left the room.'
        })
        channel.whisper('user-disconnected',myPeerId)
    })
    channel.listenForWhisper('user-disconnected',(e)=> {
        if (peers[e]) peers[e].close()
    })

const videoGrid = $('#video-grid')
const myVideo = document.createElement('video')
myVideo.muted = true
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)
        })
    })

    channel.listenForWhisper('user-connected',(e)=>{
        connectToNewUser(e, stream)
    })
})

function connectToNewUser(userId, stream) {
    const call = myPeer.call(userId, stream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => {
        addVideoStream(video, userVideoStream)
    })
    call.on('close', () => {
        video.remove()
    })

    peers[userId] = call
}

function addVideoStream(video, stream) {
    video.srcObject = stream
    video.addEventListener('loadedmetadata', () => {
        video.play()
    })
    videoGrid.append(video)
}

</script>
0 likes
0 replies

Please or to participate in this conversation.