Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork230
Laravel Video Chat using Socket.IO and WebRTC
License
PHPJunior/laravel-video-chat
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
Laravel Video Chat using Socket.IO and WebRTC
composerrequire php-junior/laravel-video-chat
Laravel 5.5 uses Package Auto-Discovery, so doesn't require you to manually add the ServiceProvider.
If you don't use auto-discovery, add the ServiceProvider to the providers array in config/app.php
PhpJunior\LaravelVideoChat\LaravelVideoChatServiceProvider::class,
php artisan vendor:publish --provider="PhpJunior\LaravelVideoChat\LaravelVideoChatServiceProvider"
And
php artisan migratephp artisan storage:linkchangeAPP_URL in .env
This is the contents of the published config file:
return ['relation' => ['conversations' =>PhpJunior\LaravelVideoChat\Models\Conversation\Conversation::class,'group_conversations' =>PhpJunior\LaravelVideoChat\Models\Group\Conversation\GroupConversation::class ],'user' => ['model' =>App\User::class,'table' =>'users'// Existing user table name ],'table' => ['conversations_table' =>'conversations','messages_table' =>'messages','group_conversations_table' =>'group_conversations','group_users_table' =>'group_users','files_table' =>'files' ],'channel' => ['new_conversation_created' =>'new-conversation-created','chat_room' =>'chat-room','group_chat_room' =>'group-chat-room' ],'upload' => ['storage' =>'public' ]];
UncommentApp\Providers\BroadcastServiceProvider
in the providers array of yourconfig/app.php
configuration file
Install the JavaScript dependencies:
npminstallnpminstall--savelaravel-echojs-cookievue-timeagosocket.iosocket.io-clientwebrtc-adaptervue-chat-scroll
If you are running the Socket.IO server on the same domain as your web application, you may access the client library like
<scriptsrc="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
in your application'shead
HTML element
Next, you will need to instantiate Echo with thesocket.io
connector and ahost
.
require('webrtc-adapter'); window.Cookies = require('js-cookie'); import Echo from "laravel-echo" window.io = require('socket.io-client'); window.Echo = new Echo({ broadcaster: 'socket.io', host: window.location.hostname + ':6001' });
Finally, you will need to run a compatible Socket.IO server. Usetlaverdure/laravel-echo-server GitHub repository.
Inresources/assets/js/app.js
file:
import VueChatScroll from 'vue-chat-scroll'; import VueTimeago from 'vue-timeago'; Vue.use(VueChatScroll); Vue.component('chat-room' , require('./components/laravel-video-chat/ChatRoom.vue')); Vue.component('group-chat-room', require('./components/laravel-video-chat/GroupChatRoom.vue')); Vue.component('video-section' , require('./components/laravel-video-chat/VideoSection.vue')); Vue.component('file-preview' , require('./components/laravel-video-chat/FilePreview.vue')); Vue.use(VueTimeago, { name: 'timeago', // component name, `timeago` by default locale: 'en-US', locales: { 'en-US': require('vue-timeago/locales/en-US.json') } })
Runnpm run dev
to recompile your assets.
- One To One Chat ( With Video Call )
- Accept Message Request
- Group Chat
- File Sharing
$groups = Chat::getAllGroupConversations();$conversations = Chat::getAllConversations()
<ulclass="list-group">@foreach($conversationsas$conversation) <liclass="list-group-item">@if($conversation->message->conversation->is_accepted) <ahref="#"> <h2>{{$conversation->user->name}}</h2>@if(!is_null($conversation->message)) <span>{{substr($conversation->message->text,0,20)}}</span>@endif </a>@else <ahref="#"> <h2>{{$conversation->user->name}}</h2>@if($conversation->message->conversation->second_user_id==auth()->user()->id) <ahref="accept_request_route"class="btn btn-xs btn-success"> Accept Message Request </a>@endif </a>@endif </li>@endforeach@foreach($groupsas$group) <liclass="list-group-item"> <ahref="#"> <h2>{{$group->name}}</h2> <span>{{$group->users_count}} Member</span> </a> </li>@endforeach</ul>
Chat::startConversationWith($otherUserId);
Chat::acceptMessageRequest($conversationId);
$conversation = Chat::getConversationMessageById($conversationId);
<chat-room:conversation="{{$conversation}}":current-user="{{auth()->user()}}"></chat-room>
You can change message send route in component
Chat::sendConversationMessage($conversationId,$message);
You can change video call route . I defined video call routetrigger/{id}
methodPOST
Use$request->all()
for video call.
Chat::startVideoCall($conversationId ,$request->all());
Chat::createGroupConversation($groupName , [$otherUserId ,$otherUserId2 ]);
$conversation = Chat::getGroupConversationMessageById($groupConversationId);
<group-chat-room:conversation="{{$conversation}}":current-user="{{auth()->user()}}"></group-chat-room>
You can change message send route in component
Chat::sendGroupConversationMessage($groupConversationId,$message);
Chat::addMembersToExistingGroupConversation($groupConversationId, [$otherUserId ,$otherUserId2 ])
Chat::removeMembersFromGroupConversation($groupConversationId, [$otherUserId ,$otherUserId2 ])
Chat::leaveFromGroupConversation($groupConversationId);
Run this commandphp artisan storage:link
Chat::sendFilesInConversation($conversationId ,$request->file('files'));
Chat::sendFilesInGroupConversation($groupConversationId ,$request->file('files'));
- Add Members to Group
- Remove Member From Group
- Group Video Call
- All Contributors
The MIT License (MIT). Please seeLicense File for more information.
Hey dude! Help me out for a couple of 🍻!
About
Laravel Video Chat using Socket.IO and WebRTC
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.