DEV Community

Cover image for Video Calling and Screen Sharing with React, WebRTC
Somik Datta
Somik Datta

Posted on

Video Calling and Screen Sharing with React, WebRTC

With the advent of a huge push in video calling technologies due to Covid-19, I started growing ever so curious about how all of it works. As I looked more and more into it, I discovered a lot, learned a lot and wanted to build an application for myself!

May I present to you Cuckoo: Free and anonymous video calling
drumrolls please πŸ˜‚

Technologies used:

  • WebRTC- facilitates real time data communication between two peers.
  • simple-peer- Simple-peer library acts as a wrapper over WebRTC and makes it simpler.
  • socket-io as a wrapper over web sockets.

Features

  • Audio call
  • Video call
  • Screen sharing

Try it live: live demo

This project is available at GitHub -

GitHub logo somikdatta / cuckoo

πŸŽ₯ Cuckoo - A free anonymous video-calling web application built with WebRTC and React that provides peer-to-peer video and audio communication in a web browser with no plugins or extensions required.

Cuckoo

Cuckoo - Anonymous, Free Video Calls

Anonymous video calls across the world for free with screensharing!

cuckoo forks cuckoo stars cuckoo issues cuckoo pull-requests

View Cuckoo Β· Report Bug Β· Request Feature

✨ Loved the project? Give this project a star to show your support. ✨


Cuckoo is a small project to demonstrate the concepts of WebRTC, WebSockets by facilitating video calls across the web!

🧐 Feature list

  • Video Call
  • Screen Sharing
  • Select camera
  • Select audio device

πŸš€ Getting started

This project is deployed at https://cuckooapp.herokuapp.com

Guide for local deployment -

  1. Clone the repository
git clone https://github.com/somikdatta/cuckoo.git
Enter fullscreen mode Exit fullscreen mode
  1. Change the working directory
cd cuckoo
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies
npm install
Enter fullscreen mode Exit fullscreen mode
  1. Change the working directory
cd client
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies
yarn install
Enter fullscreen mode Exit fullscreen mode
  1. Run the app
npm start in parent directory /cuckoo
Enter fullscreen mode Exit fullscreen mode
yarn start in directory /cuckoo/client
Enter fullscreen mode Exit fullscreen mode
  1. Open project at http://localhost:3000

🌟 You are all set!

πŸ™‡ Special Thanks

…

Try it if you find it interesting!

If you liked what I made, please consider leaving a star ⭐ on the GitHub repo to keep me motivated for better projects

Top comments (7)

Collapse
 
zainbinfurqan profile image
Zain Ahmed

how can i create a username

Collapse
 
somikdatta profile image
Somik Datta

You cannot! By design, this app uses randomly generated usernames to provide maximum privacy!

Collapse
 
jiftuq profile image
chris

Can you do it for 20 participants and with Twilio-video?

Collapse
 
shivangchauhan7 profile image
Shivang Chauhan

This is amazing man! Hope to discuss about WebRTC with you some day :)

Collapse
 
somikdatta profile image
Somik Datta

Sure, I'd love that!

Collapse
 
noa131 profile image
noa131

Is it possible for more than two people to participate in the conversation?

Collapse
 
tsonga12 profile image
tsonga12 • Edited

How can I record both the screen and the webcam at the same time? For example, my partner can see both the screen I am sharing and my webcam. Thank you.