Giter Site home page Giter Site logo

kirti180 / talkies Goto Github PK

View Code? Open in Web Editor NEW
14.0 1.0 6.0 9.8 MB

Realtime screen sharing ,Video call and Messaging web application.

Home Page: https://talkies-lets-connect.netlify.app/

CSS 38.21% HTML 38.54% JavaScript 23.25%
mongodb-atlas nodejs oauth peerjs socket-io webrtc bcrypt boostrap css google-authentication

talkies's Introduction

icon

Talkies - Real Time Screen Sharing Chat Application

Takies is a communications platform that allows users to connect with video, audio, screen share, and chat. The power of collaboration is that it can turn a group of individuals into a team empowered to achieve great things Talkies is a type of application that enables users to share their computer screens with others in real-time over the internet. It includes features that allows user to chat, video call, screen share with each other.

Deployment Link - https://talkies-lets-connect.netlify.app/

Tech Stack

Client: HTML | CSS | Javascript | Bootsrap | External CSS library

Server: Node.js | Express.js | MongoDB | WebRTC | PeerJS library | Socket.io | Bcrypt | PassPort | cors | Redis | JWT

github: To maintain repository and collabration and version control.

VS Code: To write HTML,CSS and JavaScript code.

Microsoft Edge,Google Chrome & Mozilla Firefox: To check the functionality and run the code.

Frontend Part

  • Home page
  • Login/Signup
  • Dashboard
  • Google OAuth
  • Github OAuth

Backend Part

  • Authentication using JWT
  • implementation using Socket.io
  • fully functional Video, Audio and Screen Share icons

Database

  • MongoDB
  • Redis

Features

  • Screen Sharing
  • Chatting
  • Video Calling

Application Guide to use features

To use {Screen share} feature -->

  • First Create room
  • User can share the screen
  • User can join the room using room ID
  • Enter room ID to join

Stop share -->

  • Click on stop share option

To use {Video calling} feature -->

  • First Create room
  • User can join the call by using the room ID
  • To end the call click on hang on button

To use {Chat} feature -->

  • First Create room
  • User can join the room using room ID after login
  • Time is displayed of message
  • Notifies User info

Examples

Creating connection and accessing user media .

    peer = new Peer(room_id);
    peer.on('open', (id) => {
        console.log("Peer has joined ID no", id);
        hideModal()
        // media options...
        getUserMedia({ video: true, audio: true },
            (stream) => {
                local_stream = stream;
                setLocalStream(local_stream)
            }, (err) => {
                console.log(err);
            })
        notify("Waiting for the member to join.")
    })

Group Members Info

  1. Kirti Shinde(Team Lead)

  2. Love Porwal

  3. Rishab Kumar Chaurasiya

  4. Pankaj Jain

  5. Veeresh S P


Complete Work-flow of Talkies

work-flow

Home Page

home page

Footer Page

ooter page

Signing Page

sigin page

Login Page

login page

Dashboard Page

dashboard page

Video Chat Platform

video chat platform

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.