Dec 13, 2020
0
Level 1
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>
Please or to participate in this conversation.