https://github.com/wqqas1/laravel-video-chat

laravel video chat using webrtc compatible with laravel 5.7
https://github.com/wqqas1/laravel-video-chat

chat laravel messenger video vue vuejs webrtc webrtc-video

Last synced: 3 months ago
JSON representation

laravel video chat using webrtc compatible with laravel 5.7

• Host: GitHub
• URL: https://github.com/wqqas1/laravel-video-chat
• Owner: wqqas1
• License: mit
• Created: 2018-10-14T20:25:42.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-07-28T22:52:35.000Z (over 2 years ago)
• Last Synced: 2024-05-20T20:01:05.689Z (9 months ago)
• Topics: chat, laravel, messenger, video, vue, vuejs, webrtc, webrtc-video
• Language: PHP
• Homepage:
• Size: 43.9 KB
• Stars: 9
• Watchers: 3
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Laravel Video Chat

Laravel Video Chat using Socket.IO and WebRTC

## Installation

```php

composer require wqqas1/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

```php

Wqqas1\LaravelVideoChat\LaravelVideoChatServiceProvider::class,

```

```php 

php artisan vendor:publish --provider="Wqqas1\LaravelVideoChat\LaravelVideoChatServiceProvider"

```

And 

```php 

php artisan migrate

php artisan storage:link

change APP_URL in .env

```

This is the contents of the published config file:

```php

return [

    'relation'  => [

        'conversations' =>  Wqqas1\LaravelVideoChat\Models\Conversation\Conversation::class,

        'group_conversations' => Wqqas1\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:

```javascript

    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 

```javascript

```

 in your application's `head` HTML element

 

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

```vuejs

 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](https://github.com/tlaverdure/laravel-echo-server) GitHub repository.

In `resources/js/app.js` file:

```vuejs

 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: {

        // you will need json-loader in webpack 1

        'en-US': require('date-fns/locale/en')

    }

})

```

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

```php

$groups = Chat::getAllGroupConversations();

$conversations = Chat::getAllConversations()

```

```blade



    @foreach($conversations as $conversation)

        


        @if($conversation->message->conversation->is_accepted)

            

                
{{$conversation->user->name}}

                @if(!is_null($conversation->message))

                    {{ substr($conversation->message->text, 0, 20)}}

                @endif

            

         @else

            

                
{{$conversation->user->name}}

                @if($conversation->message->conversation->second_user_id == auth()->user()->id)

                    

                        Accept Message Request

                    

                @endif

            

         @endif

        

    @endforeach


    @foreach($groups as $group)

        


            

                
{{$group->name}}

                {{ $group->users_count }} Member

            

        

    @endforeach



```


#### Start Conversation 

```php

Chat::startConversationWith($otherUserId);

```

#### Accept Conversation 

```php

Chat::acceptMessageRequest($conversationId);

```

#### Get Conversation Messages

```php

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

```

```blade

```

#### Send Message

You can change message send route in component

```php

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.

```php

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

```

#### Start Group Conversation 

```php

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

```

#### Get Group Conversation Messages

```php

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

```

```blade

```

#### Send Group Chat Message

You can change message send route in component

```php

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

```

#### Add Members to Group

```php

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

```

#### Remove Members from Group

```php

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

```

#### Leave From Group

```php

Chat::leaveFromGroupConversation($groupConversationId);

```

## File Sharing

Run this command `php artisan storage:link`

#### Send Files in Conversation

```php

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

```

#### Send Files in Group Conversation

```php

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](LICENSE.md) for more information.

[Demo Project](https://github.com/Wqqas1/laravel-video-chat-demo)

This whole work is based on https://github.com/PHPJunior/laravel-video-chat but modified to make it compatible with laravel 5.7 this version does not work with laravel versions less than 5.7 for that you can download the original package