angular4 + flv.js + srs 搭建一個簡單的基於html5的直播平臺

簡要說明

直播的風頭基本都已通過去了，寫這個文章的目的就是爲了記錄，因此廢話少說，開始正題。 首先介紹下這幾個工具：

1. angular4, google開源的前端框架，最新的angular4使用了ts做爲主力語言。
2. flv.js, B站開源的html5播放器，簡單來說就是經過獲取http-flv的直播流，而後利用MSE來播放。
3. srs, 做者winlin，國內比較承認的一款開源的流媒體服務器

具體步驟

1. 建立videoPlayer工程 ng new videoPlayer
2. 添加flv.js

$cd videoPlayer
$npm install --save flv.js
$cd node_modules/flv.js
$npm install
$npm install -g gulp
$gulp release

1. 將flv.js添加到videoPlayer的工程中

   1. 修改/path/videoPlayer/tsconfigure.json，添加"allowJs": true
   2. 修改/path/videoPlayer/.angular-cli.json，添加 "scripts": ["../node_modules/flv.js/dist/flv.min.js"],

2. 建立播放器

   1. 修改/path/videoPlayer/src/app/app.component.html

   <!--The content below is only a placeholder and can be replaced.-->
     <div style="text-align:center">
       <h1>
         html5 http-flv player
         <video id="videoElement"></video>
       </h1>
     </div>

   1. 修改/path/videoPlayer/app/src/app.component.ts:

   import { Component, OnInit } from '@angular/core';
   import 'flv.js';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     title = 'app';
   
     ngOnInit(): void {
       if (flvjs.isSupported()) {
         const videoElement =    <HTMLAudioElement>document.getElementById('videoElement');
         const flvPlayer = flvjs.createPlayer({
           type: 'flv',
           url: 'http://127.0.0.1:8080/live/livestream.flv'
         });
         flvPlayer.attachMediaElement(videoElement);
         flvPlayer.load();
         flvPlayer.play();
       }
     }
   }

3. 啓動SRS

   $git clone https://github.com/ossrs/srs.git
   $cd srs/trunk
   $./configure
   $make
   $./objs/srs -c conf/http.flv.live.conf

   srs相關內容能夠去看相關wiki，極爲全面

4. 使用obs或者其餘軟件推流

5. 確認播放地址正確，啓動angular，訪問頁面就可以看到了。

注意：須要使用srs 3.0版本

videoPlayer的代碼：https://github.com/SnailTowardThesun/videoPlayer