当前位置:   article > 正文

如何采集rtsp流摄像头到浏览器实时播放_怎么获取rtsp视频流播放

怎么获取rtsp视频流播放

  1. 在node服务中建立websocket
  2. 通过fluent-ffmpeg转码,将RTSP 流转为flv格式
  3. 前端通过flv.js格式连接websocket,并对获取的flv格式视频数据进行渲染播放

思路非常清晰,下面开始实践。
一、node服务搭建
首先是新建一个项目,配置基础的webpack和babel,并安装websocket相关的两个库 ws、websocket-stream。
然后新建一个index.js文件,搭建websocket服务:

  1. import WebSocket from 'ws'
  2. import webSocketStream from 'websocket-stream/stream'
  3. // 建立WebSocket服务
  4. const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })
  5. // 监听连接
  6. wss.on('connection', handleConnection)
  7. // 连接时触发事件
  8. function handleConnection (ws, req) {
  9. console.log('一个客户端连接进来啦')
  10. }

如此,一个简单的websocket服务就搭建好了,可以通过配置脚本运行该文件:

  1. "scripts": {
  2. "start": "nodemon --exec babel-node index.js"
  3. }

运行 npm run start即可启动websocket服务,端口是8888。可在前端通过websocket连接该地址,测试是否连接成功。
二、ffpeg转码
接下来就是重点了,通过npm安装fluent-ffmpeg。
注意,在安装fluent-ffmpeg之前,需要确认你的服务器环境中是否安装了ffmpeg这个工具,因为转码的核心其实就是通过  ffmpeg命令转码,需要你通过在命令行里输入 ffmpeg 来确认安装。

不同的系统安装方法可查阅ffmpeg官网,最终只要确认环境变量里有ffmpeg就好了。这样就可以通过ffmpeg命令来对视频进行各种转码、编码操作。
fluent-ffmpeg这个库类似语法糖,本质上就是通过nodejs在终端中执行ffmpeg的命令,它将繁琐的ffmpeg命令进行封装,转化成易于理解的链式调用,让我们不需要花费太多的时间去了解ffmpeg命令中琐碎的细节,只需通过封装好的一些显而易见的方法就可以操作视频转码。

好了,直接上代码:

  1. import WebSocket from 'ws'
  2. import webSocketStream from 'websocket-stream/stream'
  3. import ffmpeg from 'fluent-ffmpeg'
  4. // 建立WebSocket服务
  5. const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })
  6. // 监听连接
  7. wss.on('connection', handleConnection)
  8. // 连接时触发事件
  9. function handleConnection (ws, req) {
  10. // 获取前端请求的流地址(前端websocket连接时后面带上流地址)
  11. const url = req.url.slice(1)
  12. // 传入连接的ws客户端 实例化一个流
  13. const stream = webSocketStream(ws, { binary: true })
  14. // 通过ffmpeg命令 对实时流进行格式转换 输出flv格式
  15. const ffmpegCommand = ffmpeg(url)
  16. .addInputOption('-analyzeduration', '100000', '-max_delay', '1000000')
  17. .on('start', function () { console.log('Stream started.') })
  18. .on('codecData', function () { console.log('Stream codecData.') })
  19. .on('error', function (err) {
  20. console.log('An error occured: ', err.message)
  21. stream.end()
  22. })
  23. .on('end', function () {
  24. console.log('Stream end!')
  25. stream.end()
  26. })
  27. .outputFormat('flv').videoCodec('copy').noAudio()
  28. stream.on('close', function () {
  29. ffmpegCommand.kill('SIGKILL')
  30. })
  31. try {
  32. // 执行命令 传输到实例流中返回给客户端
  33. ffmpegCommand.pipe(stream)
  34. } catch (error) {
  35. console.log(error)
  36. }
  37. }

这样,简单的websocket和流转码服务就搭建好了,运行起来。如果后续投入生产环境时,也可以通过docker进行服务端部署,开机自运行。
三、前端flv.js获取视频数据并渲染
服务端搭建完,接下来就等前端连接服务器上的websocket,获取转码后的flv格式数据,然后渲染出来就行了。我们通过flv.js这个库来便捷的实现它。
flv.js 是B站开源的一款纯js编写的HTML5 Flash Video(FLV)播放器,完全不需要Flash。
简单的说就是一款可以利用html5的video标签对flv格式数据进行实时播放的js版播放器。
原理大概就是获取到FLV格式的音视频数据后将 FLV 文件流转码复用成 ISO BMFF(MP4 碎片)片段,再通过Media Source Extensions API 传递给原生HTML5 Video标签进行播放。
所以从兼容性上说,支持Media Source Extensions的浏览器都是兼容flv.js的。而主流浏览器都是支持的,所以flv.js的兼容性是很不错的。

安装flv.js,在vue中使用:

  1. ​​
  2. <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:8888/' + url }) this.player.on('error', (e) => { console.log(e) }) // 将实例挂载到video元素上面 this.player.attachMediaElement(this.$refs.player) try { // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了 this.player.load() this.player.play() } catch (error) { console.log(error) } } }, beforeDestroy () { // 页面销毁前 关闭flvjs this.player.destroy() } } </script> <style lang="scss" scoped> .wrap{ .video { width: 300px; height: 300px; } } </style>
 

以上基本上实现了业务功能需求,运用到生产环境时,可进一步完善代码细节,测试各种异常情况,增加代码健壮性。

如果需要同时打开多个监控或直播画面,前端多实例化几个flvjs,挂载到video元素上即可。

四、方案总结
这套方案主要的核心思路就是搭建服务端websocket服务并转码,客户端通过flv.js连接websocket并渲染画面。
优点有:

  1. 不需要flash
  2. 可部署在本地环境中
  3. 兼容性良好
  4. 延迟较低,没有卡顿和花屏,CPU 占用率也不高
  5. 服务端和客户端全部js实现,适合大前端路线的开发者来实践

以上就是在html5中播放rtsp流的一个方案,可实现监控、直播、播放视频等业务。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/857114
推荐阅读
相关标签
  

闽ICP备14008679号