Laravel Video Chat using Socket.IO and WebRTC

Overview

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 🍻 !

Beerpay Beerpay

Comments
  • Invalid SDP on start video call

    Invalid SDP on start video call

    Hello,

    I am implementing Text and Video chat using your package in laravel 5.6.

    All things are working fine in text chat, nothing issue in it. But my problem is in video chat.

    When i start video call and opponent clicked on Answer button here is an error showing in developer console.

    image

    Can you guide me in this. I don't have any idea about SDP.

    Thank you !!!

    opened by Dwiraj 2
  • Please add notice that an external ice/turn server is used by default or make it configurable

    Please add notice that an external ice/turn server is used by default or make it configurable

    Hi,

    Thanks for your work! I like realtime apps and so I tried this package.

    I found the following line, where a external not mentioned external server is used for video calling (or am I wrong?).

    https://github.com/PHPJunior/laravel-video-chat/blob/master/resources/assets/js/components/ChatRoom.vue#L283

    I think that should be mentioned somewhere or made configurable.

    best regards

    opened by okaufmann 1
  • Not working in Laravel 5.7.19

    Not working in Laravel 5.7.19

    I add this package in fresh Laravel 5.7.19 installation. But it didn't work. I think there is something wrong with publish because:

    1. Vuejs component folder is empty
    2. There is no eloquent model
    3. I think it's enough

    Also a modification need to be added to vue-timeago in app.js:

    Vue.use(VueTimeago, {
        name: 'timeago', // component name, `timeago` by default
        locale: 'en'
    });
    
    opened by khalilst 0
  • Trying to get property 'conversation' of non-object

    Trying to get property 'conversation' of non-object

    I have just tried to run your demo codes after everything has been installed into the domain server. The error encountered into my laravel 7 application. Let me show you where actually the issue occurred. This is home.blade.php

    @foreach($threads as $inbox)
                           @if($inbox->message->conversation->is_accepted) <!-- This is the line of code where error has been encountered -->
                               <a href="{{ route('chat' , [
                                   'id' => $inbox->message->conversation->id
                               ]) }}">
                                   <div class="about">
                                       <div class="name">{{$inbox->user->name}}</div>
                                       <div class="status">
                                           @if(auth()->user()->id == $inbox->message->sender->id)
                                               <span class="fa fa-reply"></span>
                                           @endif
                                           <span>{{ substr($inbox->message->text, 0, 20)}}</span>
                                       </div>
                                   </div>
                               </a>
                           @else
                               <a href="#">
                                   <div class="about">
                                       <div class="name">{{$inbox->user->name}}</div>
                                       <div class="status">
                                           @if(auth()->user()->id == $inbox->message->sender->id)
                                               <span class="fa fa-reply"></span>
                                           @endif
                                           <span>{{ substr($inbox->message->text, 0, 20)}}</span>
                                       </div>
                                       @if($inbox->message->conversation->second_user_id == auth()->user()->id)
                                           <div>
                                               <a href="{{ route('accept.message' , [
                                   'id' => $inbox->message->conversation->id
                               ]) }}" class="btn btn-xs btn-success">Accept Message Request</a>
                                           </div>
                                       @endif
                                   </div>
                               </a>
                           @endif
    
                   @endforeach
    

    This is HomeController.php index()

    public function index()
       {
           $groups = Chat::getAllGroupConversations();
           $threads = Chat::getAllConversations();
    
           return view('home')->with([
               'threads' => $threads,
               'groups'  => $groups
           ]);
       }
    

    When I dump and die into the $threads[0]->message, I find #relations null

    opened by shresthabiswas 0
  • Video and message events must be strictly synchronious

    Video and message events must be strictly synchronious

    In the base package it assumed that queue driver will be sync. If I use redis driver, neither messages nor videocall works, instead laravel queue driver becomes overloaded. I solved the problem by making events synchronious

    opened by sobolevna 0
Releases(v1.1.5)
Owner
Nyi Nyi Lwin
Hello I am not a robot , I am human
Nyi Nyi Lwin
Laravel Real-time chat app demo with React, Laravel Echo, Breeze, Socket.io, Redis, Inertia.js, TailwindCSS stack.

Laravel Real-time Chat App You can build yours from scratch with the following Medium article https://medium.com/@sinan.bekar/build-a-real-time-chat-a

Sinan Bekar 9 Oct 3, 2022
Live Helper Chat - live support for your website. Featuring web and mobile apps, Voice & Video & ScreenShare. Supports Telegram, Twilio (whatsapp), Facebook messenger including building a bot.

Live helper chat It's an open-source powered application, which brings simplicity and usability in one place. With live helper chat you can bring live

Live Helper Chat 1.7k Dec 29, 2022
A Laravel chat package. You can use this package to create a chat/messaging Laravel application.

Chat Create a Chat application for your multiple Models Table of Contents Click to expand Introduction Installation Usage Adding the ability to partic

Tinashe Musonza 931 Dec 24, 2022
Laravel Rocket chat Debugher, push all logs to rocket chat channels

Laravel Rocket chat Debugher, push all logs to rocket chat channels

Novaday 4 Jun 13, 2022
A Laravel 8 and Livewire 2 demo showing how to search and filter by tags, showing article and video counts for each tag (Polymorphic relationship)

Advanced search and filter with Laravel and Livewire A demo app using Laravel 8 and Livewire 2 showing how to implement a list of articles and tags, v

SĂ©rgio Jardim 19 Aug 29, 2022
PlayZ is an esport event organization and management website allowing the creation of tournaments on the most popular video games of the esport scene.

PlayZ the playz to play Table of Contents Description "What is Playz?" In one sentence PlayZ is "an esport event organization and management website a

Antoine Saunier 2 Dec 7, 2021
Simple Video is a automated H264 encryption system built on Lumen Laravel Framework

Simple Video is a automated H264 encryption system built on Lumen Laravel Framework

Azril Nazli Alias 4 Oct 5, 2022
A Multi User Chat Application With Laravel and Livewire

A Multi User Chat Application With Laravel and Livewire. where you can chat with multiple frinds at the same time. i build this with php Laravel and Livewire.

Tauseed 15 Oct 22, 2022
Laravel Chat System

Pre-build Laravel chat package. You can use this package to create a chat/messaging Laravel application or you can use the pre-build front-end part to kick-start your project.

SunArc Technologies 2 Mar 7, 2022
An example chat app to illustrate the usage of kitar/laravel-dynamodb.

Simplechat An example chat app to illustrate the usage of kitar/laravel-dynamodb. Demo https://demo.simplechat.app/ This demo app is deployed with Lar

Satoshi Kita 38 Nov 22, 2022
One-to-one plugin for editing world chat messages.

WorldChat One-to-one plugin for editing world chat messages. Supports English and Turkish language To set a new world chat format /worldchat new "worl

Aydın Demirci 12 May 20, 2023
Backend application using Laravel 9.x REST APIs for games topup from digiflazz.com and payment gateway using xendit.co

TOPUP - Laravel 9.x REST API Documentation is still on progress. For now, you can fork this postman collection Installation Clone this project git clo

Muhammad Athhar Kautsar 46 Dec 17, 2022
List of 77 languages for Laravel Framework 4, 5, 6, 7 and 8, Laravel Jetstream , Laravel Fortify, Laravel Breeze, Laravel Cashier, Laravel Nova and Laravel Spark.

Laravel Lang In this repository, you can find the lang files for the Laravel Framework 4/5/6/7/8, Laravel Jetstream , Laravel Fortify, Laravel Cashier

Laravel Lang 6.9k Jan 2, 2023
A light weight laravel package that facilitates dealing with arabic concepts using a set of classes and methods to make laravel speaks arabic

A light weight laravel package that facilitates dealing with arabic concepts using a set of classes and methods to make laravel speaks arabic! concepts like , Hijri Dates & Arabic strings and so on ..

Adnane Kadri 49 Jun 22, 2022
⚡ Laravel Charts — Build charts using laravel. The laravel adapter for Chartisan.

What is laravel charts? Charts is a Laravel library used to create Charts using Chartisan. Chartisan does already have a PHP adapter. However, this li

Erik C. Forés 31 Dec 18, 2022
A simple API documentation package for Laravel using OpenAPI and Stoplight Elements

Laravel Stoplight Elements Easily publish your API documentation using your OpenAPI document in your Laravel Application. Installation You can install

Steve McDougall 24 Nov 17, 2022
REST API with auth using Laravel 8 and Sanctum

Laravel REST API with Sanctum This is an example of a REST API using auth tokens with Laravel Sanctum Usage Change the .env.example to .env and add yo

Brad Traversy 251 Dec 29, 2022
Prerender Laravel pages using Clusteer and this nice package.

Laravel Clusteer Prerender Prerender Laravel pages using Clusteer and this nice package. ?? Supporting If you are using one or more Renoki Co. open-so

Renoki Co. 4 Aug 10, 2022
A Simple Store Front Web Application using Laravel and Bootstrap.

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Basil Basaif 1 Nov 28, 2021