Skip to content

hazem-taha/video-chat-sample

Repository files navigation

Conference Call code sample for Browser for ConnectyCube platform

This README introduces ConnectyCube Conference Call code sample for Browser

Project contains the following features implemented:

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

Documentation

ConnectyCube JS SDK getting started - https://developers.connectycube.com/js

ConnectyCube Conference API documentation - https://developers.connectycube.com/js/videocalling-conference

This sample has two mods:

  • Calls up to 4 users (like web p2p sample)
  • Guest Room. To create guest rom you can click on Guest Room button under title "Or create and join", than you can share url to other participants. If you want to use Guset Room mode only you can set variable (videochat-conf/src/config.js) to true
  const GUEST_ROOM_ONLY_MODE = true

Screenshots

Conference Call code sample demo image login screen

Conference Call code sample demo image active call screen

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published