Angular 2 – Peer 2 Peer video chat

Hi Friends,

Hope you are all well. In this post let’s see how to do a simple video streaming functionality in your Angular 2 app using the simple-peer library. I already made a similar post using peerjs library. But that library doesn’t seem to be maintained nowadays and the last commit was 2 years back. So let’s use simple-peer today.

A video screencast of this post

The code for this post is available here.

Let’s scaffold out our angular 2 app using the angular-cli.

Just to make it simple we’ll make use of a cdn to provide simple-peer file in our app.

Open up index.html and add the script as shown below.

Open up app.component.html and add the below code.

Now open up app.component.ts and add the below code.

Okay. Let’s break this down.

  1. The peer.signal is to simply signal the peer to which a connection is to be established, or rather an ‘offer’ is to be made.
  2.  When such a signal is made the peer data(JSON format) is simply logged on to the console.
  3. The message function is simply to send a message when a connection is established. When data is received it is simply logged onto the console again.

Now you might encounter an error while creating the peer since we haven’t declared SimplePeer anywhere.

To fix this create a file called typings.d.ts in your src directory and include this line to that.

Now open up main.ts file and add the below code. (at the top of the file)

Now run the app using ng serve.

Open up your browser and navigate to

http://localhost:4200/#init

This will be the initiator peer and if you open up the console you would see the JSON data of that peer. Copy this.

Open a new tab and navigate to

http://localhost:4200

Paste it in the input field and click on connect button. Open up the console and copy the JSON data here too.

Go back to the first (initiator) tab and paste this in the input field there and click on connect. Now a peer to peer connection is established. To verify the connection. Just click on Send Message button in both the tabs and you would see the message in the console.

Adding Video

Now that we know how to establish a connection and send data over the channel let’s see how to stream video over the network.

Open up app.component.html and add a video element to it as shown below.

Then open up app.component.ts file and add the below code to it.

Let’s break this down.

  1. We use ViewChild to reference/access our video element from the view in our component here.
  2. We are simply getting the video stream from the device using navigator.getUserMedia and passing it on in our connection.
  3. We are using a setTimeout function so that our peer doesn’t go undefined since this whole operation would happen before the view elements come into picture.

Now run the app using ng serve and perform the same steps you did last time.

If everything goes fine you would see a video of yourself in both the tabs when the connection is established.

Please watch the video for a little bit of detailed explanation and have a look at the code in github (click here) if you run into any errors.

If you found this helpful share this with someone else and help them too.

Special thanks to Feross for providing us the simple-peer library.

Thanks for reading guys. Peace.

 

Liked it? Take a second to support admin on Patreon!
  • Barath

    Hi,

    Is it possible to do a group video chat using ionic?