Skip to content

technikhil314/next-webrtc

Repository files navigation

An open source live screen share and webcam video recorder

Deploy your instance

  1. Deploy the backend project to some cloud (heroku etc) to consume websockets.
  2. Deploy the frontend project to vercel with single click Deploy with Vercel
  3. Add required env variables
    • NEXT_PUBLIC_WEBSOCKET_URL - URL to your websocket server. The backend deployment. If you want to use meeting feature
    • NEXT_PUBLIC_URL - URL of your site
    • NODE_ENV - development or production

Features

  • Background removal
  • Virtual backgrounds
  • Background blur

Contributions

Welcome :)

Requirements

  1. Node >= v15.x
  2. npm >= v7
  3. yarn 1.x

Code structure

  1. It is a monorepo managed by yarn
  2. There are two packages backend and frontend
  3. Backend is just a small websocket server used for signaling
  4. Frontend is actual UI built with nextjs
  5. It uses google stun server for populating ice candidates

How to run

  1. Install all dependencies using yarn --frozen-lockfile
  2. add .env see the contents below
  3. run backend using yarn workspaces @openrtc/backend start
  4. run frontend using yarn workspaces @openrtc/frontend start

.env contents

NEXT_PUBLIC_WEBSOCKET_URL=wss://localhost:4000/
NODE_ENV=development
NEXT_PUBLIC_URL=http://localhost:3000

How to build

  1. You dont need to build backend
  2. You can build frontend package with yarn workspaces @openrtc/frontend build command

TO DO

  1. Handle if someone stops screen share in recording vlog
    • This currently stops recording
    • Ideally it should keep on recording but change video from screen to user
  2. First time visitor faces lag in audio recording
  3. First time visitor can not see small PiP video
  4. Microphone volume control
  5. Ability to name the video file - Currently it uses ISO date time string