Angular 2 – Videochat using peerjs

Hi Friends,

Hope you are all well. This post is a response to many of our friends asking me how to do simple videochats via WebRTC in Angular 2. Well, here we will be using a library called peerjs to accomplish the same.

Let’s begin.

A screencast of this post

 

The complete code for this post is available here.

You could either host your own peerjs server either locally or on hosting services such as heroku. Alternatively you could just register in their site peerjs.com

Scaffold out an application using the below command.

If you are using angular-cli webpack version(as of today), kindly use rc.5 version. If not, feel free to use rc.6

Now open up your application and get to index.html. Add the below line of code in the <head> section.

Open up your app.component.html and add the below lines of code.

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

Let’s break this down.

We are creating an instance of Peer. (A peer id is created) We are then using that peer object to open a connection to a peer id. Once the connection is open we send a message.

We have also written code in ngOnInit() for listening to messages. When it receives a message it will print it out on the console.

Since Peer is not predefined interface or component it will obviously throw a type error from the typescript compiler.

So simply open up typings.d.ts in the app directory and add the below line to it.

 

Run this app using ng serve and see if it all goes fine.

It would wait for 3 seconds before displaying the peer id on the screen. Use that peer id to

Okay let’s move on to video.

Open up app.component.html again and add the below lines of code.

Now open up app.component.ts and modify it as shown below.

Let’s break this down.

Now if you notice

  1. We have added a navigator instance (Typecasted it out). Using this I am getting an instance of the video and audio devices in the user’s browser.
  2. Once the input streams are received then it is converted into a blob using URL.createObjectURL and then this is given as src to the video element.
  3. The video element is referenced here using ViewChild.
  4. We have also written code for receiving an incoming call. The call.answer() function will answer the call and get the incoming stream.
  5. We once again follow the same method to get an instance of the user’s cam and audio using getUserMedia and then receives the stream which is then passed on the src attribute of the video tag.

Now simply run the app. When the browser asks for permission click allow. If everything goes fine you should be able to see yourself. (Use multiple tabs/windows to simulate a multi-user environment).

Hope this helped you guys. Kindly share it with someone and help them too.

Thanks for reading guys. Peace.. :)

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

    great post, let me say thank you. like you know i’m a great fan of ionic 2, and and i want to know if possible to use peerJs with ionic 2? thanks

  • arsene

    i’m have my database ready with a list of person in ionic 2 and i want to know if there is a way to add video call in my app? sorry for english

  • Adebanke Buki Alabi

    I love you!

  • Barath

    Im using ionic 1. How can I get navigator in agnualr 1

    var n = navigator;

    What is the corresponding code for above?