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.
- Basic Login(Email And Password)
- Friends
- Search Users
- Showing Online Users
- Real time chat with typing indication to the other user
- Chat's text translation into other user's preferred language
- My Profile(Name,Preferred Language)
- Messages/Texts stored in encrypted format in database
- New message indication
- Video/audio with Twilio programmable video
- in
.env
file setTWILLIO_ACCOUNT_ID
,TWILIO_ACCOUNT_SID
to your twillio account sid, also setTWILLIO_AUTH_TOKEN
,TWILIO_API_KEY_SID
,TWILIO_API_KEY_SECRET
as per the values from your twillio console. - for Google translation to work set
GOOGLE_APPLICATION_CREDENTIALS
to the full path of the google service account json file. And setGOOGLE_PROJECT_ID
. - Set all the values for pusher server.
Ex:
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.