PHP Classes
elePHPant
Icontem

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

Recommend this page to a friend!
  Info   View files Documentation   View files View files (40)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2017-12-22 (4 months ago) RSS 2.0 feedNot yet rated by the usersTotal: 99 All time: 8,911 This week: 487Up
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.

  Performance   Level  
Name: Nyi Nyi Lwin <contact>
Classes: 3 packages by
Country: Myanmar Myanmar
Age: 25
All time rank: 39744 in Myanmar Myanmar
Week rank: 906 Up1 in Myanmar Myanmar Up

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 folder image Files  
File Role Description
Files folder imageconfig (1 file)
Files folder imagedatabase (1 directory)
Files folder imagehelper (1 file)
Files folder imageresources (1 directory)
Files folder imagesrc (1 file, 5 directories)
Files folder imagetests (2 files)
Accessible without login Plain text file .travis.yml Data Auxiliary data
Accessible without login Plain text file CHANGELOG.md Data Auxiliary data
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file LICENSE Lic. License text
Accessible without login Plain text file phpunit.xml Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  config  
File Role Description
  Accessible without login Plain text file laravel-video-chat.php Conf. Configuration script

  Files folder image Files  /  database  
File Role Description
Files folder imagemigrations (6 files)

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

  Files folder image Files  /  helper  
File Role Description
  Accessible without login Plain text file helpers.php Example Example script

  Files folder image Files  /  resources  
File Role Description
Files folder imageassets (1 directory)

  Files folder image Files  /  resources  /  assets  
File Role Description
Files folder imagejs (1 directory)

  Files folder image Files  /  resources  /  assets  /  js  
File Role Description
Files folder imagecomponents (4 files)

  Files folder image Files  /  resources  /  assets  /  js  /  components  
File Role Description
  Accessible without login Plain text file ChatRoom.vue Data Auxiliary data
  Accessible without login Plain text file FilePreview.vue Data Auxiliary data
  Accessible without login Plain text file GroupChatRoom.vue Data Auxiliary data
  Accessible without login Plain text file VideoSection.vue Data Auxiliary data

  Files folder image Files  /  src  
File Role Description
Files folder imageEvents (4 files)
Files folder imageFacades (1 file)
Files folder imageModels (4 directories)
Files folder imageRepositories (1 file, 2 directories)
Files folder imageServices (2 files)
  Plain text file LaravelVideoChatServiceProvider.php Class Class source

  Files folder image Files  /  src  /  Events  
File Role Description
  Plain text file NewConversationCreated.php Class Class source
  Plain text file NewConversationMessage.php Class Class source
  Plain text file NewGroupConversationMessage.php Class Class source
  Plain text file VideoChatStart.php Class Class source

  Files folder image Files  /  src  /  Facades  
File Role Description
  Plain text file Chat.php Class Class source

  Files folder image Files  /  src  /  Models  
File Role Description
Files folder imageConversation (1 file, 1 directory)
Files folder imageFile (1 file, 2 directories)
Files folder imageGroup (1 directory)
Files folder imageMessage (1 file, 1 directory)

  Files folder image Files  /  src  /  Models  /  Conversation  
File Role Description
Files folder imageRelationship (1 file)
  Plain text file Conversation.php Class Class source

  Files folder image Files  /  src  /  Models  /  Conversation  /  Relationship  
File Role Description
  Plain text file ConversationRelationship.php Class Class source

  Files folder image Files  /  src  /  Models  /  File  
File Role Description
Files folder imageAttribute (1 file)
Files folder imageRelationship (1 file)
  Plain text file File.php Class Class source

  Files folder image Files  /  src  /  Models  /  File  /  Attribute  
File Role Description
  Plain text file FileAttribute.php Class Class source

  Files folder image Files  /  src  /  Models  /  File  /  Relationship  
File Role Description
  Plain text file FileRelationship.php Class Class source

  Files folder image Files  /  src  /  Models  /  Group  
File Role Description
Files folder imageConversation (1 file, 1 directory)

  Files folder image Files  /  src  /  Models  /  Group  /  Conversation  
File Role Description
Files folder imageRelationship (1 file)
  Plain text file GroupConversation.php Class Class source

  Files folder image Files  /  src  /  Models  /  Group  /  Conversation  /  Relationship  
File Role Description
  Plain text file GroupConversationRelationship.php Class Class source

  Files folder image Files  /  src  /  Models  /  Message  
File Role Description
Files folder imageRelationship (1 file)
  Plain text file Message.php Class Class source

  Files folder image Files  /  src  /  Models  /  Message  /  Relationship  
File Role Description
  Plain text file MessageRelationship.php Class Class source

  Files folder image Files  /  src  /  Repositories  
File Role Description
Files folder imageConversation (1 file)
Files folder imageGroupConversation (1 file)
  Plain text file BaseRepository.php Class Class source

  Files folder image Files  /  src  /  Repositories  /  Conversation  
File Role Description
  Plain text file ConversationRepository.php Class Class source

  Files folder image Files  /  src  /  Repositories  /  GroupConversation  
File Role Description
  Plain text file GroupConversationRepository.php Class Class source

  Files folder image Files  /  src  /  Services  
File Role Description
  Plain text file Chat.php Class Class source
  Plain text file UploadManager.php Class Class source

  Files folder image Files  /  tests  
File Role Description
  Plain text file LaravelVideoChatServiceProviderTest.php Class Class source
  Plain text file TestCase.php Class Class source

 Version Control Unique User Downloads Download Rankings  
 100%
Total:99
This week:0
All time:8,911
This week:487Up