Coder Social home page Coder Social logo

pavanaditya / peek-a-boo-video-conference-webapp Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 4.88 MB

Peek-A-Boo is a Video conferencing app. This is the Web Version source code of the mobile Peek-A-Boo application.

HTML 13.80% JavaScript 61.05% CSS 25.16%
chat webrtc video-calling react reactjs connectycube video-conferencing

peek-a-boo-video-conference-webapp's Introduction

Peek-A-Boo

-- A Video Conferencing WebApp.

The Peek-A-Boo Video Conferencing app is built as a web clone version for the Peek-A-Boo android App.

This is Video Conference Calling app built using React Native and ConnectyCube Open Source Apis.

Project contains the following features implemented:

  • User authorization
  • Video calls up to 4 users
  • Mute/unmute microphone
  • Mute/unmute video
  • Switch camera
  • Snack bars to notify users about changes
  • Guest room mode up supports to 12 users

The sample provides 2 mods:

  • Calling mode, with call/accept/reject signals
  • Guest Room mode, where any user can join a call by link. To create a guest room you can click on a 'Guest Room' button and then share an url with other users.

Screenshots (Web app)

Video Chat, Login Screen

Video chat, select users

Video chat Calling

Screenshots (Mobile app)

Video Chat, Login Screen

Video chat Permissions

Build your own VideoChat app

To make the sample works for your own app, please do the following:

  1. Register new account and application at https://admin.connectycube.com and then put Application credentials from 'Overview' page into videochat-conf/src/config.js file:

    const credentials = {
      appId: 0,
      authKey: "",
      authSecret: ""
    };
  2. At https://admin.connectycube.com, create from 2 to 4 users in 'Users' module and put them into videochat-conf/src/config.js file:

    const users = [
      {
        id: 0,
        name: "User1",
        login: "videouser1",
        password: "videouser1",
        color: "#34ad86"
      },
      {
        id: 1,
        name: "User2",
        login: "videouser2",
        password: "videouser2",
        color: "#077988"
      },
      {
        id: 2,
        name: "User3",
        login: "videouser3",
        password: "videouser3",
        color: "#13aaae"
      },
      {
        id: 3,
        name: "User4",
        login: "videouser4",
        password: "videouser4",
        color: "#056a96"
      }
    ];
  3. (Optional) If you are at Enterprise plan - provide your API server and Chat server endpoints at videochat/src/config.js file to point the sample against your own server:

    {
       endpoints: {
           api: "",
           chat: ""
       },
       ...
    };
  4. Install node modules - npm install

  5. Run npm run build and open dist/index.html

  6. Or run npm start to start application in developing mode on https://localhost:3000

Created with the help of ConnectyCube React Native app code samples.

Developer: Pavan Aditya M S

peek-a-boo-video-conference-webapp's People

Contributors

pavanaditya avatar

Watchers

 avatar  avatar

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.