html5中播放rtsp流实现监控、直播等方案（利用Ffmpeg + node.js + websocket + flv.js实现）

憨傻發表於 2022-10-24 16:36:00

html5中播放rtsp流实现监控、直播等方案（利用Ffmpeg + node.js + websocket + flv.js实现）

<h3 data-id="heading-0">前提：需要确认你的服务器环境中是否安装了ffmpeg这个工具，因为转码的核心其实就是通过 ffmpeg命令 转码，需要你通过在命令行里输入 <code>ffmpeg</code> 来确认。</h3>
<img src="https://img2022.cnblogs.com/blog/2129518/202210/2129518-20221024162538674-467302263.png">
 
 
 安装参考：https://zhuanlan.zhihu.com/p/324472015
<h3 data-id="heading-0">一、node服务搭建</h3>
参考node版本： v14.20.0
node搭建转码服务器
<div class="cnblogs_code">
<pre>// const ffmpegPath = require('@ffmpeg-installer/ffmpeg'); // 自动为当前node服务所在的系统安装ffmpeg
const ffmpeg = require('fluent-ffmpeg');
const express = require('express');
const webSocketStream = require('websocket-stream/stream');
const expressWebSocket = require('express-ws');

// ffmpeg.setFfmpegPath(ffmpegPath.path);

/**
* 创建一个后端服务
*/
function createServer() {
const app = express();
app.use(express.static(__dirname));
expressWebSocket(app, null, {
 perMessageDeflate: true
});
app.ws('/rtsp/', rtspToFlvHandle);

app.get('/', (req, response) => {
 response.send('当你看到这个页面的时候说明rtsp流媒体服务正常启动中......');
});

app.listen(8100, () => {
 console.log('转换rtsp流媒体服务启动了，服务端口号为8100');
});
}

/**
* rtsp 转换 flv 的处理函数
* @param ws
* @param req
*/
function rtspToFlvHandle(ws, req) {
const stream = webSocketStream(ws, {
 binary: true,
 browserBufferTimeout: 1000000
}, {
 browserBufferTimeout: 1000000
});
console.log('req.query.url',req.query.url);
// const url = req.query.url;
const url = new Buffer.from(req.query.url, 'base64').toString(); // 前端对rtsp url进行了base64编码，此处进行解码
// console.log('rtsp url:', url);
try {
 console.log('进来了');
 ffmpeg(url)
 .addInputOption(
 '-rtsp_transport', 'tcp',
 '-buffer_size', '102400'
 )
 .on('start', (commandLine) => {
 // commandLine 是完整的ffmpeg命令
 console.log(commandLine, '转码开始');
 })
 .on('codecData', function (data) {
 console.log(data, '转码中......');
 })
 .on('progress', function (progress) {
 // console.log(progress,'转码进度')
 })
 .on('error', function (err, a, b) {
 console.log(url, '转码错误: ', err.message);
 console.log('输入错误', a);
 console.log('输出错误', b);
 })
 .on('end', function () {
 console.log(url, '转码结束!');
 })
 .addOutputOption(
 '-threads', '4',// 一些降低延迟的配置参数
 '-tune', 'zerolatency',
 '-preset', 'ultrafast'
 )
 .outputFormat('flv') // 转换为flv格式
 .videoCodec('libx264') // ffmpeg无法直接将h265转换为flv的，故需要先将h265转换为h264，然后再转换为flv
 .withSize('6%') // 转换之后的视频分辨率原来的50%, 如果转换出来的视频仍然延迟高，可按照文档上面的描述，自行降低分辨率
 .noAudio() // 去除声音
 .pipe(stream);
} catch (error) {
 console.log('抛出异常', error);
}
}

createServer();</pre>
</div>
<h3>二、vue代码，使用flv播放</h3>
<div class="cnblogs_code">
<pre><template>
<div class="wrap">
<video class="video" muted autoplay controls ref="player"></video>
</div>
</template>

<script>
import flvjs from 'flv.js' // 引入flvjs
export default {
data () {
return {
 player: null
}
},
mounted () {
// 如果浏览器支持flvjs，则执行相应的程序
if (flvjs.isSupported()) {
 // 准备监控设备流地址
 const url = 'rtsp://admin:1234567@192.168.1.100:554/Streaming/Channels/101?transportmode=unicast'
 // 创建一个flvjs实例
 // 下面的ws://localhost:8888换成你搭建的websocket服务地址，后面加上设备流地址
 this.player = flvjs.createPlayer({
 type: 'flv',
 isLive: true, url: `ws://localhost:8100/rtsp?url=${window.btoa(url)}`</pre>
<pre> },{</pre>
<div>
<div>            enableStashBuffer: false, // 是否启用IO暂存缓冲区：使用直播功能时，设置false可减少延迟，并减少网络不稳定时出现画面停顿的情况。</div>
<div>            fixAudioTimestampGap: false, // 检测到音视频不同步时，是否填充无声音频：</div>
<div>            isLive: true /// 是否为直播流：</div>
<div>        })</div>
</div>
<pre>this.player.on('error', (e) => {
 console.log(e)
 })

// 将实例挂载到video元素上面
 this.player.attachMediaElement(this.$refs.player)

 try {
 // 开始运行加载只要流地址正常就可以在h5页面中播放出画面了
 this.player.load()
 this.player.play().then(() => {</pre>
<div>
<div>             this.loading = false  // 加载成功</div>
<div>         })</div>
</div>
<pre>
 } catch (error) {
 console.log(error)
 }
}
},
beforeDestroy () {
// 页面销毁前关闭flvjs
this.player.destroy()
}
}
</script>

<style lang="scss" scoped>
.wrap{
.video {
 width: 300px;
 height: 300px;
}
}
</style></pre>
</div>
<h3>三、rstp转流服务打包出可执行文件（按需） </h3>
node打包可执行文件工具——Pkg 参考：http://wjhsh.net/cangqinglang-p-14785309.html
<h3>另</h3>
视频流demo地址参考： https://juejin.cn/post/6855577308271476743
参考：
https://juejin.cn/post/6908641550046068744#heading-1
https://juejin.cn/post/7124188097617051685#heading-9
  
来源：https://www.cnblogs.com/chunying/p/16821738.html

頁: [1]

琼殿技术论坛's Archiver

html5中播放rtsp流实现监控、直播等方案（利用Ffmpeg + node.js + websocket + flv.js实现）