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.
|
1 |
ng new simplepeer |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Simplepeer</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-peer/6.2.1/simplepeer.min.js"></script> </head> <body> <app-root>Loading...</app-root> </body> </html> |
Open up app.component.html and add the below code.
|
1 2 3 |
<input type="text" [(ngModel)]="targetpeer"> <button (click)="connect()">Connect</button> <button (click)="message()">Send Message</button> |
Now open up app.component.ts and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { title = 'app works!'; targetpeer: any; peer: any; ngOnInit() { this.peer = new SimplePeer ({ initiator: location.hash === '#init', trickle: false }) this.peer.on('signal', function(data) { console.log(JSON.stringify(data)); this.targetpeer = data; }) this.peer.on('data', function(data) { console.log('Recieved message:' + data); }) } connect() { this.peer.signal(JSON.parse(this.targetpeer)); } message() { this.peer.send('Hello world'); } } |
Okay. Let’s break this down.
- 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.
- When such a signal is made the peer data(JSON format) is simply logged on to the console.
- 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.
|
1 |
declare var SimplePeer: any; |
Now open up main.ts file and add the below code. (at the top of the file)
|
1 |
///<reference path="typings.d.ts"/> |
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.
|
1 |
<video #myvideo></video> |
Then open up app.component.ts file and add the below code to it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import { Component, OnInit, ViewChild } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { @ViewChild('myvideo') myVideo: any; title = 'app works!'; targetpeer: any; peer: any; n = <any>navigator; ngOnInit() { let video = this.myVideo.nativeElement; let peerx: any; this.n.getUserMedia = (this.n.getUserMedia || this.n.webkitGetUserMedia || this.n.mozGetUserMedia || this.n.msGetUserMedia); this.n.getUserMedia({video:true, audio:true}, function(stream) { peerx = new SimplePeer ({ initiator: location.hash === '#init', trickle: false, stream:stream }) peerx.on('signal', function(data) { console.log(JSON.stringify(data)); this.targetpeer = data; }) peerx.on('data', function(data) { console.log('Recieved message:' + data); }) peerx.on('stream', function(stream) { video.src = URL.createObjectURL(stream); video.play(); }) }, function(err){ console.log('Failed to get stream', err); }); setTimeout(() => { this.peer = peerx; console.log(this.peer); }, 5000); } connect() { this.peer.signal(JSON.parse(this.targetpeer)); } message() { this.peer.send('Hello world'); } } |
Let’s break this down.
- We use ViewChild to reference/access our video element from the view in our component here.
- We are simply getting the video stream from the device using navigator.getUserMedia and passing it on in our connection.
- 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.
