Laravel Video Chat: Multiuser video chat using Socket.IO and WebRTC

Recommend this page to a friend!
  Info   Documentation   View files (40)   Download .zip   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 187 This week: 1All time: 8,434 This week: 261
Version License PHP version Categories
laravel-video-chat 1.0.0The PHP License5PHP 5, Audio, Chat, Video
Description Author

This package implements a multiuser video chat using Socket.IO and WebRTC.

It can create a Web based chat system with multiple registered users with records that already exist in a database.

The users and chat messages history are stored in database tables that can be specified in a separate configuration file.

Picture of Nyi Nyi Lwin
  Performance   Level  
Name: Nyi Nyi Lwin <contact>
Classes: 6 packages by
Country: Myanmar Myanmar
Age: 27
All time rank: 34174 in Myanmar Myanmar
Week rank: 261 1 in Myanmar Myanmar
Innovation award
Innovation award
Nominee: 2x

Details

Laravel Video Chat

Laravel Video Chat using Socket.IO and WebRTC

Build Status StyleCI Latest Stable Version Total Downloads

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 :beers:!

Beerpay Beerpay

  Files  
File Role Description
config (1 file)
database (1 directory)
helper (1 file)
resources (1 directory)
src (1 file, 5 directories)
tests (2 files)
.travis.yml Data Auxiliary data
CHANGELOG.md Data Auxiliary data
composer.json Data Auxiliary data
LICENSE Lic. License text
phpunit.xml Data Auxiliary data
README.md Doc. Documentation

  Files  /  config  
File Role Description
   laravel-video-chat.php Conf. Configuration script

  Files  /  database  
File Role Description
migrations (6 files)

  Files  /  database  /  migrations  
File Role Description
   2017_10_16_084042_...ersations_table.php Class Class source
   2017_10_16_091956_..._messages_table.php Class Class source
   2017_10_21_165446_...ersations_table.php Class Class source
   2017_10_21_172616_...oup_users_table.php Class Class source
   2017_10_25_165610_...versation_table.php Class Class source
   2017_11_07_224816_create_files_table.php Class Class source

  Files  /  helper  
File Role Description
   helpers.php Example Example script

  Files  /  resources  
File Role Description
assets (1 directory)

  Files  /  resources  /  assets  
File Role Description
js (1 directory)

  Files  /  resources  /  assets  /  js  
File Role Description
components (4 files)

  Files  /  resources  /  assets  /  js  /  components  
File Role Description
   ChatRoom.vue Data Auxiliary data
   FilePreview.vue Data Auxiliary data
   GroupChatRoom.vue Data Auxiliary data
   VideoSection.vue Data Auxiliary data

  Files  /  src  
File Role Description
Events (4 files)
Facades (1 file)
Models (4 directories)
Repositories (1 file, 2 directories)
Services (2 files)
   LaravelVideoChatServiceProvider.php Class Class source

  Files  /  src  /  Events  
File Role Description
   NewConversationCreated.php Class Class source
   NewConversationMessage.php Class Class source
   NewGroupConversationMessage.php Class Class source
   VideoChatStart.php Class Class source

  Files  /  src  /  Facades  
File Role Description
   Chat.php Class Class source

  Files  /  src  /  Models  
File Role Description
Conversation (1 file, 1 directory)
File (1 file, 2 directories)
Group (1 directory)
Message (1 file, 1 directory)

  Files  /  src  /  Models  /  Conversation  
File Role Description
Relationship (1 file)
   Conversation.php Class Class source

  Files  /  src  /  Models  /  Conversation  /  Relationship  
File Role Description
   ConversationRelationship.php Class Class source

  Files  /  src  /  Models  /  File  
File Role Description
Attribute (1 file)
Relationship (1 file)
   File.php Class Class source

  Files  /  src  /  Models  /  File  /  Attribute  
File Role Description
   FileAttribute.php Class Class source

  Files  /  src  /  Models  /  File  /  Relationship  
File Role Description
   FileRelationship.php Class Class source

  Files  /  src  /  Models  /  Group  
File Role Description
Conversation (1 file, 1 directory)

  Files  /  src  /  Models  /  Group  /  Conversation  
File Role Description
Relationship (1 file)
   GroupConversation.php Class Class source

  Files  /  src  /  Models  /  Group  /  Conversation  /  Relationship  
File Role Description
   GroupConversationRelationship.php Class Class source

  Files  /  src  /  Models  /  Message  
File Role Description
Relationship (1 file)
   Message.php Class Class source

  Files  /  src  /  Models  /  Message  /  Relationship  
File Role Description
   MessageRelationship.php Class Class source

  Files  /  src  /  Repositories  
File Role Description
Conversation (1 file)
GroupConversation (1 file)
   BaseRepository.php Class Class source

  Files  /  src  /  Repositories  /  Conversation  
File Role Description
   ConversationRepository.php Class Class source

  Files  /  src  /  Repositories  /  GroupConversation  
File Role Description
   GroupConversationRepository.php Class Class source

  Files  /  src  /  Services  
File Role Description
   Chat.php Class Class source
   UploadManager.php Class Class source

  Files  /  tests  
File Role Description
   LaravelVideoChatServiceProviderTest.php Class Class source
   TestCase.php Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:187
This week:1
All time:8,434
This week:261

For more information send a message to info at phpclasses dot org.