README

Laravel Video Chat using Socket.IO and WebRTC

Installation

composer require 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 migrate php artisan storage:link change APP_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' ] ];

Uncomment App\Providers\BroadcastServiceProvider in the providers array of your config/app.php configuration file

Install the JavaScript dependencies:

 npm install npm install --save laravel-echo js-cookie vue-timeago socket.io socket.io-client webrtc-adapter vue-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

<script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>

in your application's head HTML element

Next, you will need to instantiate Echo with the socket.io connector and a host.

 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. Use tlaverdure/laravel-echo-server GitHub repository.

In resources/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') } }) 

Run npm run dev to recompile your assets.

Features

• One To One Chat ( With Video Call )
• Accept Message Request
• Group Chat
• File Sharing

Usage

Get All Conversation and Group Conversation

$groups = Chat::getAllGroupConversations(); $conversations = Chat::getAllConversations()

<ul class="list-group"> @foreach($conversations as $conversation) <li class="list-group-item"> @if($conversation->message->conversation->is_accepted) <a href="#"> <h2>{{$conversation->user->name}}</h2> @if(!is_null($conversation->message)) <span>{{ substr($conversation->message->text, 0, 20)}}</span> @endif </a> @else <a href="#"> <h2>{{$conversation->user->name}}</h2> @if($conversation->message->conversation->second_user_id == auth()->user()->id) <a href="accept_request_route" class="btn btn-xs btn-success"> Accept Message Request </a> @endif </a> @endif </li> @endforeach @foreach($groups as $group) <li class="list-group-item"> <a href="#"> <h2>{{$group->name}}</h2> <span>{{ $group->users_count }} Member</span> </a> </li> @endforeach </ul>

Start Conversation

Chat::startConversationWith($otherUserId);

Accept Conversation

Chat::acceptMessageRequest($conversationId);

Get Conversation Messages

$conversation = Chat::getConversationMessageById($conversationId);

<chat-room :conversation="{{ $conversation }}" :current-user="{{ auth()->user() }}"></chat-room>

Send Message

You can change message send route in component

Chat::sendConversationMessage($conversationId, $message);

Start Video Call ( Not Avaliable On Group Chat )

You can change video call route . I defined video call route trigger/{id} method POST Use $request->all() for video call.

Chat::startVideoCall($conversationId , $request->all());

Start Group Conversation

Chat::createGroupConversation( $groupName , [ $otherUserId , $otherUserId2 ]);

Get Group Conversation Messages

$conversation = Chat::getGroupConversationMessageById($groupConversationId);

<group-chat-room :conversation="{{ $conversation }}" :current-user="{{ auth()->user() }}"></group-chat-room>

Send Group Chat Message

You can change message send route in component

Chat::sendGroupConversationMessage($groupConversationId, $message);

Add Members to Group

Chat::addMembersToExistingGroupConversation($groupConversationId, [ $otherUserId , $otherUserId2 ])

Remove Members from Group

Chat::removeMembersFromGroupConversation($groupConversationId, [ $otherUserId , $otherUserId2 ])

Leave From Group

Chat::leaveFromGroupConversation($groupConversationId);

File Sharing

Run this command php artisan storage:link

Send Files in Conversation

Chat::sendFilesInConversation($conversationId , $request->file('files'));

Send Files in Group Conversation

Chat::sendFilesInGroupConversation($groupConversationId , $request->file('files'));

ToDo

• Add Members to Group
• Remove Member From Group

Next Version

• Group Video Call

Credits

• All Contributors

License

The MIT License (MIT). Please see License File for more information.

Demo Project

Support on Beerpay

Hey dude! Help me out for a couple of 🍻!