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

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?

  • naresh

    how to disconnect the call

  • lynn

    How i can add 2 buttons, like mute and disable camera ? I need to get the stream or call a function in the peer, but is not possible ? Thanks for your help ! Great tuto :)

  • Aditya Jhordan

    hello, Thank you so much for sharing, you really save my time…

    anyway, i try to build your project on ionic2 , it’s success when i run ionic serve ( run based on web ), but it’s failed when i’m try run into my android phone (ionic cordova run android).

    i’m newbie in peerjs, is peerjs doesn’t support for phone services ? or something ?

    Thank you Sir..

    • it’s not peerjs problem , it’s the webrtc problem since he still not well supported by some browsers

  • Debbie Zuleta

    thank you so much!!!!

  • Iñigo Enrique


    When I click on ‘video chat’ it does not give me any error, but it does not do anything

  • Praneet Chaganti

    how i can do with ipadress i showin undefined