This project is a comprehensive demonstration of the WebRTC API and various concepts behind establishing a Peer-to-Peer connection.

A Peer connection is part of the WebRTC specifications that deals with connecting two applications on different computers using a Peer-to-Peer protocol. The communication between peers can be video, audio, or arbitrary binary data.

In order to create peer-to-peer connections, a multitude of processes must take place beforehand.

1. User must generate a Peer
2. User's media stream must be obtained
3. User must generate and send ICE candidates to another Peer
4. User must set Local and Remote SDP's via offer/answer system

After Users exchange ICE candidates and set their local and remote SDP's, WebRTC can then establish a Peer-to-Peer connection and exchange data/media streams over UDP.

Here's a interactive program to help you conceptualize these processes(without signaling): https://divanov11.github.io/WebRTC-Simple-SDP-Handshake-Demo/

Read more on media streams, ICE candidates, STUN and TURN servers, and Local/Remote SDPs here: https://webrtc.org/getting-started/overview

This project also includes a signaling server that aids with the proccesses above. The signaling server utilizes the Socket.io API to enable real-time, bidrectional, and event-based communication between the server and clients. This API is used to emit to Users room events as well as to handle offer/answer events when establishing Peer-to-Peer connections.

(back to top)

(back to top)

After cloning, cd to the repository and run yarn install in both the root and client directory. This is install all dependencies for this project. Ensure you have yarn installed before this step.

Once all dependencies are installed, you will need to create two .env files: one in the root directory and one in the client directory.

• /root

  CLIENT_URL="http://localhost:YOUR_REACT_PORT"

• /client

  REACT_APP_SERVER_URL="http://localhost:YOUR_NODE_SERVER_PORT"

• If you intend on deploying this app, you will need to provide your TURN server's url and credentials (you can either pay for a TURN server or set one up yourself using coTURN). /client

  REACT_APP_TURN_URL="turn:YOUR_TURN_SERVER_HOSTNAME/IP_ADDRESS:YOUR_TURN_SERVER_PORT"
  REACT_APP_TURN_USERNAME="YOUR_TURN_SERVER_USERNAME"
  REACT_APP_TURN_CREDENTIAL="YOUR_TURN_SERVER_PASSWORD"

• If you only plan on demo-ing this app, remove the TURN server configurations by commenting out lines 20-24 in /client/src/routes/Room.js.

Once all dependencies have been installed and all environment variables are initialized, you are ready to run the project.

Start the server by running yarn start in the root directory.

Start the client-side application by running yarn start in the client directory.

Navigate to http://localhost:YOUR_REACT_PORT.

Create a room and share your URL with another User.

(back to top)

This project foucuses on the essential features required to establish peer-topeer connections using WebRTC, enabling users in remote locations to share audio and video in real time. The current implementation serves as a robust foundation for a wide range of potential use cases and can be expanded upon to create diverse real-time communication applications.

Current Features:

• Real-time peer-to-peer audio and video communication.
• Seamless integration of WebRTC for low-latency connections.
• Signal server powered by Node.js and Socket.io for effective signaling between peers.
• Utilization of STUN and TURN servers to ensure connectivity in various network environments.

Potential Use Cases:

• Livestreaming Platform: Enhance the project to support broadcasting, viewer interaction, and content monetization, paving the way for a feature-rich livestreaming platform.
• Livestreaming Auction Platform: Build upon the core functionality to facilitate real-time auctions, where participants can engage via audio and video to make bids.
• Messaging Platform: Extend the project to include text-based messaging alongside audio and video communication, creating a comprehensive messaging solution.
• Chatroom Platform: Implement chatroom features to enable multiple users to participate in group discussions alongside video and audio sharing.
• Custom Real-Time Applications: Leverage the WebRTC foundation to develop unique real-time applications tailored to specific needs, such as collaborative tools, educational platforms, or telehealth solutions

(back to top)

Minsung - kmaxsung@gmail.com

(back to top)

• Checkout Dennis Ivy's YouTube video for a more conceptual understanding of signaling servers and WebRTC: https://www.youtube.com/watch?v=8I2axE6j204&t=3658s&ab_channel=DennisIvy
• Checkout Engineering Semester's YouTube playlist for more on WebRTC: https://www.youtube.com/watch?v=jUh9RlO8y18&list=PL34gl7XmgyxT4p6-nMgddxdl18S1Xpczr&ab_channel=EngineeringSemester
• Checkout Awesome Open Source's YouTube video for how to setup your own TURN server (On the video he left 'relay_ip' commented out, but you should uncomment that option and set it to your public ip address): https://www.youtube.com/watch?v=eZ9Jrxy6NVM&t=1586s&ab_channel=AwesomeOpenSource

(back to top)