Angular2 簡易版的webRTC

html5推出webrtc的線上影音串流，我們就能立即取得即時視訊，但門檻仍高，

所以有人佛心來研究這款好用的工具peer.js 簡化複雜認證過程，我就簡單示範一下。

一、下戴相關Peer.js的javaScript

http://peerjs.com/docs/

將其檔案放置assets/js

二、修改anguar-cli.json

在scripts區塊中引用

      "scripts": [

        "./assets/js/peer.min.js"

      ],

在default的區塊中設定IP 和 Port

"defaults": {     "styleExt": "css",     "component": {},      "serve": {       "port": 4300,       "host": "192.168.4.88"      }

三、使用Peer.js 的範例

修改 app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

修改app/app.component.html

<h1>My id - {{mypeerid}}</h1>

<input type="text" [(ngModel)]="anotherid">

<button (click)="connect()">Connect</button>

<button (click)="videoconnect()">VideoChat</button>

<video #myvideo></video>

修改app/app.component.ts

import { Component, OnInit,ViewChild} from '@angular/core';

declare var Peer: any;

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

})

export class AppComponent implements OnInit {

  title = 'app';

  mypeerid: any;

  peer;

  anotherid;

  @ViewChild('myvideo') myVideo: any; //取得html的video元素ID為myvideo

  ngOnInit() {

    let video = this.myVideo.nativeElement;

//建立peer物件，如需建立https 才能跨電腦取得對方的視訊

    this.peer = new Peer({ host: 'peerjs-server.herokuapp.com', secure: true, port: 443 })

    //建立逾期時間，如果太久自動失效

setTimeout(() => {

      this.mypeerid = this.peer.id;

    }, 3000);

    //接受連線

    this.peer.on('connection', function (conn) {

     //取得資料

      conn.on('data', function (data) {

        console.log(data);

      });

    });

 

    var n = <any>navigator;

    n.getUserMedia = (n.getUserMedia || n.webkitGetUserMedia || n.mozGetUserMedia || n.msGetUserMedia);

    //回應另一端電腦所建立Peer連線

   this.peer.on('call', function(call) {

      n.getUserMedia({video: true, audio: true}, function(stream) {

        call.answer(stream); //回傳本機端的視訊或聲音

        //取得遠端電腦傳回的視訊或聲音

        call.on('stream', function(remotestream){ 

          video.src = URL.createObjectURL(remotestream);

          video.play();

        })

      }, function(err) {

        console.log('Failed to get stream', err);

      })

    })

 }

  connect() {

    var conn = this.peer.connect(this.anotherid); //與遠端電腦建立peer連線

    conn.on('open', function () {

      conn.send('Message from that id');

    });

  }

  videoconnect(){

    let video = this.myVideo.nativeElement;

    var localvar = this.peer;

    var fname = this.anotherid;

    var n = <any>navigator;

   

    n.getUserMedia = ( n.getUserMedia || n.webkitGetUserMedia || n.mozGetUserMedia  || n.msGetUserMedia );

   

    n.getUserMedia({video: true, audio: true}, function(stream) {

      var call = localvar.call(fname, stream); //與遠端電腦建立peer連線

call.on('stream', function(remotestream) {

        video.src = URL.createObjectURL(remotestream); //取得遠端電腦資訊

        video.play();

      })

    }, function(err){

      console.log('Failed to get stream', err);

    })

  }

}

四、安裝openSSL

參考這篇文章https://dotblogs.com.tw/divingdon/2017/01/06/132824

五、啟動專案

啟動WebRTC需要有https的協定下，所以需要建立自我憑證的金鑰

ng serve --ssl 1 --ssl-key "D:\joyce\angular2\angularWebRTC\cert\private.key" --ssl-cert "D:\joyce\angular2\angularWebRTC\cert\mycert.crt"

畫面示範