DEV Community

Cover image for Video chat for your own web server
Valentin Giselbrecht
Valentin Giselbrecht

Posted on

7 3

Video chat for your own web server

Features

  • Open-Source
  • For small groups
  • Browser based
  • Only peer-to-peer connections
  • Firebase is only used for signaling
  • No media server
  • Screen sharing
  • Text-Chat with images
  • Change of video and microphone source
  • Multilingual (English and German)
  • Mobile friendly

Demo

Live Demo: https://chat.gise.at

The characters after the hashtag define the room, if no hashtag is selected, the create room dialog is displayed.

For example, all visitors with a link to https://chat.gise.at/#roulette-chat enter into a room and can communicate with each other there.

Therefore simply forward the current URL to invite others.

Installation

This video chat is made to install it on an own webserver.
The webserver need no server-side programming language, only a free firebase project is required.

Prerequisites

  • Local development environment
    • Git
    • Node.js
    • npm
  • Server
    • nginx or apache

Configuration

Load code and dependencies in your local development environment:

git clone https://github.com/vgiselbrecht/chat.git chat
cd chat
npm install
cp src/config.tmp.json src/config.json
Enter fullscreen mode Exit fullscreen mode

For signaling you need a free Firebase Project with anonymous authentication and realtime database.

Copy the firebase configuration to the src/config.json file in exchangeServices/firebase.

{
    "meta": {
        "title": "Video Chat",
        "description": "Open-Source video chat based on WebRTC and Firebase.",
        "keywords": "chat, webrtc, video-call, video-chat",
        "image": ""
    },
    "privacy": {
        "firebaseAnalytics": 0,
        "imprint": "",
        "gdpr": ""
    },
    "exchangeServices": { 
        "firebase": {
            "apiKey": "",
            "authDomain": "",
            "databaseURL": "",
            "projectId": "",
            "storageBucket": "",
            "messagingSenderId": "",
            "appId": "",
            "measurementId": ""
        }
    },
    "communication": {
        "webrtc": {
            "iceServers": [
                {"urls": "stun:stun.services.mozilla.com"}, 
                {"urls": "stun:stun.l.google.com:19302"}
            ]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Additional STUN / TURN Server can also be added in communication/webrtc/iceServers. To use this video chat behind some Firewalls and NATs, you need a TURN server.

List of free STUN and TURN Server

Deploy video chat for development

grunt deploy
Enter fullscreen mode Exit fullscreen mode

Add content from dist directory to the document root of your local webserver.

Deploy video chat for production

grunt deploy --target=production
Enter fullscreen mode Exit fullscreen mode

Copy content from dist directory to your webserver.

Development

grunt watch
Enter fullscreen mode Exit fullscreen mode

Change the compiled code in dist directory after saving a project file.
Ideally the dist directory is the document root of a local webserver like nginx or apache.

More information and source code on GitHub.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay