簡(jiǎn)要說明
直播的風(fēng)頭基本都已經(jīng)過去了面徽，寫這個(gè)文章的目的就是為了記錄，所以廢話少說吻育，開始正題鱼的。
首先介紹下這幾個(gè)工具：
- angular4, google開源的前端框架蛾方，最新的angular4使用了ts作為主力語(yǔ)言。
- flv.js, B站開源的html5播放器，簡(jiǎn)單來講就是通過獲取http-flv的直播流，然后利用MSE來播放常潮。
- srs, 作者winlin，國(guó)內(nèi)比較認(rèn)可的一款開源的流媒體服務(wù)器
具體步驟
- 創(chuàng)建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"],
- 修改
-
創(chuàng)建播放器
- 修改
/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(); } } } - 修改
-
啟動(dòng)SRS
$git clone https://github.com/ossrs/srs.git $cd srs/trunk $./configure $make $./objs/srs -c conf/http.flv.live.confsrs相關(guān)內(nèi)容可以去看相關(guān)wiki孵户，極為全面
使用obs或者其他軟件推流
確認(rèn)播放地址正確，啟動(dòng)angular岔留，訪問頁(yè)面就能夠看到了夏哭。
注意：需要使用srs 3.0版本
videoPlayer的代碼：https://github.com/SnailTowardThesun/videoPlayer
