Angular two – Peer two Peer movie talk

Hope you are all well. In this post let’s see how to do a elementary movie streaming functionality in your Angular two 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 two years back. So let’s use simple-peer today.

A movie screencast of this post

The code for this post is available here.

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

Just to make it elementary 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 ‘suggest’ 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 announced 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

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 fresh tab and navigate to

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 very 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.

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

Open up app.component.html and add a movie 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 movie element from the view in our component here.
2. We are simply getting the movie 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 entire 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 movie of yourself in both the tabs when the connection is established.

Please see the movie 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.

Related video: