Laravel based video chat application
Laravel Video Chat is a project where one to one video/audio chat and text chat with translation features are available. With the help of laravel web sockets and Twilio Video we are able to transmit the video/audio data from peer to peer without the intervention of server. Where as the text based messages are being sent in realtime via server translating the text into different languages on the fly. We are using Vue, Laravel Echo and Pusher in the front-end.
.env
file set TWILLIO_ACCOUNT_ID
,TWILIO_ACCOUNT_SID
to your twillio account sid, also set TWILLIO_AUTH_TOKEN
, TWILIO_API_KEY_SID
, TWILIO_API_KEY_SECRET
as per the values from your twillio console.GOOGLE_APPLICATION_CREDENTIALS
to the full path of the google service account json file. And set GOOGLE_PROJECT_ID
.PUSHER_APP_ID=123456
PUSHER_APP_KEY=ABCD123
PUSHER_APP_SECRET=ABCD123
PUSHER_APP_CLUSTER=mt1
Run php artisan websockets:serve
to start the websocket server. I use supervisor to manage the websocket server.
Here is my configuration for reference:
[program:videochat-websocket-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /home/laravel-video-chat/artisan websockets:serve
autostart=false
autorestart=true
user=harish
numprocs=1
redirect_stderr=true
stdout_logfile=/home/laravel-video-chat/websocket-server.log
We also need to run workers to process channel subscribe/unsubscribe events inorder for the user online/offline feature to work. Here is my supervisor config for reference.
[program:videochat-laravel-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /home/laravel-video-chat/artisan queue:work --sleep=3 --tries=3
autostart=true
autorestart=true
stopasgroup=true
killasgroup=true
user=harish
numprocs=1
redirect_stderr=true
stdout_logfile=/home/laravel-video-chat/worker.log
stopwaitsecs=3600
Here is my nginx config for reference.
map $http_upgrade $type {
default "web";
websocket "ws";
}
server {
listen 443 ssl;
listen [::]:443 ssl;
# include snippets/self-signed.conf;
# include snippets/ssl-params.conf;
ssl_certificate /home/ssl-certs/videochat.test.pem;
ssl_certificate_key /home/ssl-certs/videochat.test-key.pem;
server_name videochat.test www.videochat.test;
root /home/harish/Projects/laravel-video-chat/public;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
index index.html index.htm index.php;
charset utf-8;
location / {
try_files /nonexistent @$type;
}
location @web {
try_files $uri $uri/ /index.php?$query_string;
}
location @ws {
proxy_pass http://127.0.0.1:6001;
proxy_set_header Host $host;
proxy_read_timeout 60;
proxy_connect_timeout 60;
proxy_redirect off;
# Allow the use of websockets
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
error_page 404 /index.php;
location ~ \.php$ {
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
include fastcgi_params;
}
location ~ /\.(?!well-known).* {
deny all;
}
}
server {
listen 80;
listen [::]:80;
server_name videochat.test www.videochat.test;
return 301 https://$server_name$request_uri;
}
Refer https://beyondco.de/docs/laravel-websockets/basic-usage/ssl#usage-with-a-reverse-proxy-like-nginx for more information.