|
1 | 1 | # Laravel Video Chat
|
2 | 2 | Laravel Video Chat using Socket.IO and WebRTC
|
| 3 | + |
| 4 | +## Installation |
| 5 | +```php |
| 6 | +composer require php-junior/laravel-video-chat |
| 7 | +``` |
| 8 | + |
| 9 | +Laravel 5.5 uses Package Auto-Discovery, so doesn't require you to manually add the ServiceProvider. |
| 10 | + |
| 11 | +If you don't use auto-discovery, add the ServiceProvider to the providers array in config/app.php |
| 12 | + |
| 13 | +```php |
| 14 | +PhpJunior\Laravel2C2P\Laravel2C2PServiceProvider::class, |
| 15 | +``` |
| 16 | + |
| 17 | +```php |
| 18 | +php artisan vendor:publish --provider="PhpJunior\LaravelVideoChat\LaravelVideoChatServiceProvider" |
| 19 | +``` |
| 20 | + |
| 21 | +And |
| 22 | +```php |
| 23 | +php artisan migrate |
| 24 | +``` |
| 25 | + |
| 26 | +This is the contents of the published config file: |
| 27 | + |
| 28 | +```php |
| 29 | +return [ |
| 30 | + 'relation' => [ |
| 31 | + 'conversations' => PhpJunior\LaravelVideoChat\Models\Conversation\Conversation::class, |
| 32 | + 'group_conversations' => PhpJunior\LaravelVideoChat\Models\Group\Conversation\GroupConversation::class |
| 33 | + ], |
| 34 | + 'user' => [ |
| 35 | + 'model' => App\User::class, |
| 36 | + 'table' => 'users' // Existing user table name |
| 37 | + ], |
| 38 | + 'table' => [ |
| 39 | + 'conversations_table' => 'conversations', |
| 40 | + 'messages_table' => 'messages', |
| 41 | + 'group_conversations_table' => 'group_conversations', |
| 42 | + 'group_users_table' => 'group_users' |
| 43 | + ], |
| 44 | + 'channel' => [ |
| 45 | + 'new_conversation_created' => 'new-conversation-created', |
| 46 | + 'chat_room' => 'chat-room', |
| 47 | + 'group_chat_room' => 'group-chat-room' |
| 48 | + ] |
| 49 | +]; |
| 50 | +``` |
| 51 | + |
| 52 | +Uncomment `App\Providers\BroadcastServiceProvider` in the providers array of your `config/app.php` configuration file |
| 53 | + |
| 54 | +Install the JavaScript dependencies: |
| 55 | +```javascript |
| 56 | + npm install |
| 57 | + npm install --save laravel-echo js-cookie vue-timeago socket.io socket.io-client webrtc-adapter vue-chat-scroll |
| 58 | +``` |
| 59 | + |
| 60 | +If you are running the Socket.IO server on the same domain as your web application, you may access the client library like |
| 61 | + |
| 62 | +```javascript |
| 63 | +<script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script> |
| 64 | +``` |
| 65 | + |
| 66 | + in your application's `head` HTML element |
| 67 | + |
| 68 | + |
| 69 | +Next, you will need to instantiate Echo with the `socket.io` connector and a `host`. |
| 70 | + |
| 71 | +```vuejs |
| 72 | + require('webrtc-adapter'); |
| 73 | + window.Cookies = require('js-cookie'); |
| 74 | + |
| 75 | + import Echo from "laravel-echo" |
| 76 | + |
| 77 | + window.io = require('socket.io-client'); |
| 78 | + |
| 79 | + window.Echo = new Echo({ |
| 80 | + broadcaster: 'socket.io', |
| 81 | + host: window.location.hostname + ':6001' |
| 82 | + }); |
| 83 | +``` |
| 84 | + |
| 85 | +Finally, you will need to run a compatible Socket.IO server. Use |
| 86 | +[tlaverdure/laravel-echo-server](https://github.com/tlaverdure/laravel-echo-server) GitHub repository. |
| 87 | + |
| 88 | + |
| 89 | +In `resources/assets/js/app.js` file: |
| 90 | + |
| 91 | +```vuejs |
| 92 | + import VueChatScroll from 'vue-chat-scroll'; |
| 93 | + import VueTimeago from 'vue-timeago'; |
| 94 | + |
| 95 | + Vue.use(VueChatScroll); |
| 96 | + Vue.component('chat-room' , require('./components/laravel-video-chat/ChatRoom.vue')); |
| 97 | + Vue.component('group-chat-room', require('./components/laravel-video-chat/GroupChatRoom.vue')); |
| 98 | + Vue.component('video-section' , require('./components/laravel-video-chat/VideoSection.vue')); |
| 99 | + |
| 100 | + Vue.use(VueTimeago, { |
| 101 | + name: 'timeago', // component name, `timeago` by default |
| 102 | + locale: 'en-US', |
| 103 | + locales: { |
| 104 | + 'en-US': require('vue-timeago/locales/en-US.json') |
| 105 | + } |
| 106 | + }) |
| 107 | +``` |
| 108 | + |
| 109 | +Run `npm run dev` to recompile your assets. |
| 110 | + |
| 111 | +## Features |
| 112 | + |
| 113 | +- One To One Chat ( With Video Call ) |
| 114 | +- Group Chat |
| 115 | + |
| 116 | +## Usage |
| 117 | + |
| 118 | +#### Get All Conversation and Group Conversation |
| 119 | + |
| 120 | +```php |
| 121 | +$groups = Chat::getAllGroupConversations(); |
| 122 | +$conversations = Chat::getAllConversations() |
| 123 | +``` |
| 124 | + |
| 125 | +```blade |
| 126 | +<ul class="list-group"> |
| 127 | + @foreach($conversations as $conversation) |
| 128 | + <li class="list-group-item"> |
| 129 | + <a href="#"> |
| 130 | + <h2>{{$conversation->user->name}}</h2> |
| 131 | + @if(!is_null($conversation->message)) |
| 132 | + <span>{{ substr($conversation->message->text, 0, 20)}}</span> |
| 133 | + @endif |
| 134 | + </a> |
| 135 | + </li> |
| 136 | + @endforeach |
| 137 | +
|
| 138 | + @foreach($groups as $group) |
| 139 | + <li class="list-group-item"> |
| 140 | + <a href="#"> |
| 141 | + <h2>{{$group->name}}</h2> |
| 142 | + <span>{{ $group->users_count }} Member</span> |
| 143 | + </a> |
| 144 | + </li> |
| 145 | + @endforeach |
| 146 | +</ul> |
| 147 | +``` |
| 148 | + |
| 149 | +#### Start Conversation |
| 150 | +```php |
| 151 | +Chat::startConversationWith($otherUserId); |
| 152 | +``` |
| 153 | + |
| 154 | +#### Get Conversation Messages |
| 155 | + |
| 156 | +```php |
| 157 | +$conversation = Chat::getConversationMessageById($conversationId); |
| 158 | +``` |
| 159 | + |
| 160 | +```blade |
| 161 | +<chat-room :conversation="{{ $conversation }}" :current-user="{{ auth()->user() }}"></chat-room> |
| 162 | +``` |
| 163 | + |
| 164 | +#### Send Message |
| 165 | + |
| 166 | +You can change message send route in component |
| 167 | + |
| 168 | +```php |
| 169 | +Chat::sendConversationMessage($conversationId, $message); |
| 170 | +``` |
| 171 | + |
| 172 | +#### Start Video Call ( Not Avaliable On Group Chat ) |
| 173 | + |
| 174 | +You can change video call route . I defined video call route `trigger/{id}` method `POST` |
| 175 | +Use `$request->all()` for video call. |
| 176 | + |
| 177 | +```php |
| 178 | +Chat::startVideoCall($conversationId , $request->all()); |
| 179 | +``` |
| 180 | + |
| 181 | +#### Start Group Conversation |
| 182 | +```php |
| 183 | +Chat::createGroupConversation( $groupName , [ $otherUserId , $otherUserId2 ]); |
| 184 | +``` |
| 185 | + |
| 186 | +#### Get Group Conversation Messages |
| 187 | + |
| 188 | +```php |
| 189 | +$conversation = Chat::getGroupConversationMessageById($groupConversationId); |
| 190 | +``` |
| 191 | + |
| 192 | +```blade |
| 193 | +<group-chat-room :conversation="{{ $conversation }}" :current-user="{{ auth()->user() }}"></group-chat-room> |
| 194 | +``` |
| 195 | + |
| 196 | +#### Send Group Chat Message |
| 197 | + |
| 198 | +You can change message send route in component |
| 199 | + |
| 200 | +```php |
| 201 | +Chat::sendGroupConversationMessage($groupConversationId, $message); |
| 202 | +``` |
| 203 | + |
| 204 | +#### Add Members to Group |
| 205 | + |
| 206 | +```php |
| 207 | +Chat::addMembersToExistingGroupConversation($groupConversationId, [ $otherUserId , $otherUserId2 ]) |
| 208 | +``` |
| 209 | + |
| 210 | +#### Remove Members from Group |
| 211 | + |
| 212 | +```php |
| 213 | +Chat::removeMembersFromGroupConversation($groupConversationId, [ $otherUserId , $otherUserId2 ]) |
| 214 | +``` |
| 215 | + |
| 216 | +#### Leave From Group |
| 217 | + |
| 218 | +```php |
| 219 | +Chat::leaveFromGroupConversation($groupConversationId); |
| 220 | +``` |
| 221 | + |
| 222 | +## ToDo |
| 223 | + |
| 224 | +- Add Members to Group |
| 225 | +- Remove Member From Group |
| 226 | + |
| 227 | +## Credits |
| 228 | + |
| 229 | +- All Contributors |
| 230 | + |
| 231 | +## License |
| 232 | + |
| 233 | +The MIT License (MIT). Please see [License File](LICENSE.md) for more information. |
0 commit comments