Build a Real-Time Video Chat App in Angular with WebRTC!

javascript

Build a Real-Time Video Chat App in Angular with WebRTC!

WebRTC and Angular combine to create video chat apps. Key features include signaling server, peer connections, media streams, and screen sharing. Styling enhances user experience.

Jul 19, 2023

Build a Real-Time Video Chat App in Angular with WebRTC!

Real-time video chat apps have become a staple in our digital lives, and building one yourself can be a thrilling adventure. Let’s dive into creating a video chat app using Angular and WebRTC – a powerful combination that’ll have you chatting face-to-face with friends in no time!

First things first, let’s get our Angular project set up. If you haven’t already, install the Angular CLI and create a new project:

npm install -g @angular/cli
ng new video-chat-app
cd video-chat-app

Now that we’ve got our project ready, let’s dive into the world of WebRTC. WebRTC, or Web Real-Time Communication, is a free, open-source project that provides web browsers and mobile applications with real-time communication via simple APIs. It’s like magic for web developers!

To get started with WebRTC, we’ll need to set up a signaling server. This server helps our peers find each other and exchange the necessary information to establish a direct connection. I like to use Socket.io for this, as it makes real-time bidirectional event-based communication a breeze.

Let’s install Socket.io and create a simple server:

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  socket.on('join', (roomId) => {
    const roomClients = io.sockets.adapter.rooms[roomId] || { length: 0 };
    const numberOfClients = roomClients.length;

    if (numberOfClients == 0) {
      socket.join(roomId);
      socket.emit('created');
    } else if (numberOfClients == 1) {
      socket.join(roomId);
      socket.emit('joined');
    } else {
      socket.emit('full');
    }
  });

  // Handle RTCPeerConnection signaling
  socket.on('offer', (offer, roomId) => {
    socket.to(roomId).emit('offer', offer);
  });

  socket.on('answer', (answer, roomId) => {
    socket.to(roomId).emit('answer', answer);
  });

  socket.on('ice-candidate', (candidate, roomId) => {
    socket.to(roomId).emit('ice-candidate', candidate);
  });
});

server.listen(3000, () => {
  console.log('Server running on port 3000');
});

This server sets up a basic room system and handles the signaling messages we’ll need for our WebRTC connection. Now, let’s move on to the Angular side of things.

In our Angular app, we’ll create a video chat component that handles the WebRTC connection and displays the video streams. Here’s a basic implementation:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { io } from 'socket.io-client';

@Component({
  selector: 'app-video-chat',
  template: `
    <video #localVideo autoplay playsinline></video>
    <video #remoteVideo autoplay playsinline></video>
    <button (click)="startCall()">Start Call</button>
  `
})
export class VideoChatComponent implements OnInit {
  @ViewChild('localVideo') localVideo: ElementRef;
  @ViewChild('remoteVideo') remoteVideo: ElementRef;

  private socket: any;
  private peerConnection: RTCPeerConnection;

  ngOnInit() {
    this.socket = io('http://localhost:3000');
    this.setupSocketListeners();
  }

  setupSocketListeners() {
    this.socket.on('offer', (offer) => this.handleOffer(offer));
    this.socket.on('answer', (answer) => this.handleAnswer(answer));
    this.socket.on('ice-candidate', (candidate) => this.handleIceCandidate(candidate));
  }

  async startCall() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    this.localVideo.nativeElement.srcObject = stream;

    this.peerConnection = new RTCPeerConnection();

    stream.getTracks().forEach(track => {
      this.peerConnection.addTrack(track, stream);
    });

    this.peerConnection.ontrack = (event) => {
      this.remoteVideo.nativeElement.srcObject = event.streams[0];
    };

    this.peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        this.socket.emit('ice-candidate', event.candidate);
      }
    };

    const offer = await this.peerConnection.createOffer();
    await this.peerConnection.setLocalDescription(offer);
    this.socket.emit('offer', offer);
  }

  async handleOffer(offer) {
    this.peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await this.peerConnection.createAnswer();
    await this.peerConnection.setLocalDescription(answer);
    this.socket.emit('answer', answer);
  }

  handleAnswer(answer) {
    this.peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
  }

  handleIceCandidate(candidate) {
    this.peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
  }
}

This component sets up the WebRTC connection, handles the signaling through our Socket.io server, and displays the video streams. It’s like building a mini-Zoom right in your browser!

Now, I know what you’re thinking – “This is cool, but what about styling?” Well, my friend, let’s add some pizzazz to our video chat app. We can create a sleek, modern interface that’ll make your friends think you’re the next big tech mogul.

Here’s a bit of CSS to get you started:

.video-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

video {
  max-width: 45%;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

button {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

With this styling, your video chat app will look slick and professional. Trust me, your friends will be impressed!

Now, let’s talk about some advanced features we can add to take our app to the next level. How about screen sharing? It’s a game-changer for remote work and collaborative projects. We can implement this by modifying our startCall function:

async startCall(shareScreen = false) {
  let stream;
  if (shareScreen) {
    stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  } else {
    stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  }
  // ... rest of the function remains the same
}

We can then add a new button to our template for screen sharing:

<button (click)="startCall(true)">Share Screen</button>

Another cool feature we could add is the ability to mute audio or turn off video. We can do this by toggling the tracks on our media stream:

toggleAudio() {
  const audioTrack = this.localStream.getAudioTracks()[0];
  audioTrack.enabled = !audioTrack.enabled;
}

toggleVideo() {
  const videoTrack = this.localStream.getVideoTracks()[0];
  videoTrack.enabled = !videoTrack.enabled;
}

Remember, building a video chat app is like cooking a gourmet meal – it takes time, patience, and a bit of creativity. But with Angular and WebRTC, you’ve got all the ingredients you need to whip up something amazing.

As you continue to build and improve your app, you’ll encounter challenges. Maybe the video quality isn’t quite right, or you’re struggling with NAT traversal. Don’t worry – these are all part of the journey. Keep experimenting, keep learning, and before you know it, you’ll have a video chat app that rivals the big players.

And hey, who knows? Maybe your little side project will turn into the next big thing in video communication. After all, every tech giant started somewhere. So go ahead, dive in, and start building. The world of real-time communication is waiting for your contribution!