一、安装srs
sudo docker run -d -p 1935:1935 -p 1985:1985 -p 8080:8080 --name srs registry.cn-hangzhou.aliyuncs.com/ossrs/srs:v4.0.34
二、vue展示
1、引入库
npm install --save flv.js
2、导包
import flvjs from "flv.js";
3、完整案例
<template><div><video ref="videoElement" controls autoplay muted></video></div>
</template><script>
import flvjs from "flv.js"export default {name: 'App',mounted() {this.$nextTick(() => {this.initVideo();});},methods: {initVideo() {const videoElement = this.$refs.videoElement;if (flvjs.isSupported()) {const flvPlayer = flvjs.createPlayer({type: 'flv',url: 'http://{ip}:8080/live/livehime.flv' // 注意使用 HTTP-FLV 协议});// 监听播放器的关闭事件flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail) => {if (errorType === flvjs.ErrorTypes.NETWORK_ERROR) {// 直播关闭时弹出提示框window.alert('直播已结束');}});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();flvPlayer.play();}}}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style> restartVideo() {// 停止播放并销毁之前的播放器实例if (this.flvPlayer) {this.flvPlayer.pause();this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();}// 重新初始化并播放视频this.initVideo();}
三、推流
推流地址为：rtmp://{ip}:8080/live
推流码为：zhk_123
四、srs配置
1、配置文件
cat /usr/local/srs/conf/srs.conf
1985地址是再打开nginx页面的:http://{ip}:{port}/console/ng_index.html#/connect
2、获取直播ts分片文件
cd /usr/local/srs/objs/nginx/html/推流直播的密钥前面的一截
zhk_123是你的推流密钥
ts分片文件可以再本地观看15秒一个分片，zhk_123.m3u8为你的ts信息
其中m3u8中结束的话#EXT-X-DISCONTINUITY为这个表示此次推流断了
3、合并上面的分片
编辑文件
vim filelist.txt
文件内容
file 'zhk_123-213.ts'
file 'zhk_123-214.ts'
使用ffmpeg命令
ffmpeg -f concat -safe 0 -i filelist.txt -c copy output.mp4
