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

     
     
   
       
   
         html5 http-flv player
         
       
     
   

   2. 修改/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 =    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