简要说明
直播的风头基本都已经过去了，写这个文章的目的就是为了记录，所以废话少说，开始正题。
首先介绍下这几个工具：
- angular4, google开源的前端框架，最新的angular4使用了ts作为主力语言。
- flv.js, B站开源的html5播放器，简单来讲就是通过获取http-flv的直播流，然后利用MSE来播放。
- srs, 作者winlin，国内比较认可的一款开源的流媒体服务器
具体步骤
- 创建videoPlayer工程
ng new videoPlayer - 添加flv.js
$cd videoPlayer
$npm install --save flv.js
$cd node_modules/flv.js
$npm install
$npm install -g gulp
$gulp release
-
将flv.js添加到videoPlayer的工程中
- 修改
/path/videoPlayer/tsconfigure.json，添加"allowJs": true - 修改
/path/videoPlayer/.angular-cli.json，添加"scripts": ["../node_modules/flv.js/dist/flv.min.js"],
- 修改
-
创建播放器
- 修改
/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>- 修改
/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(); } } } - 修改
-
启动SRS
$git clone https://github.com/ossrs/srs.git $cd srs/trunk $./configure $make $./objs/srs -c conf/http.flv.live.confsrs相关内容可以去看相关wiki，极为全面
使用obs或者其他软件推流
确认播放地址正确，启动angular，访问页面就能够看到了。
注意：需要使用srs 3.0版本
videoPlayer的代码：https://github.com/SnailTowardThesun/videoPlayer
