工作需求:在浏览器网页上播放建筑工地摄像头监控的画面,如工地出入口通道画面、塔吊可视化,并且可兼容不同型号的摄像头设备。
由于摄像头大多都是通过 RTSP 协议传输视频流的,而HTML 并不标准支持 RTSP 流,经过网上各种查资料并一番讨论后初步拟定如下方案,node + ffmpeg + websocket + flv.js
:
- 在node服务中建立websocket
- 通过fluent-ffmpeg转码,将RTSP 流转为flv格式
- 前端通过flv.js连接websocket,并对获取的flv格式视频数据进行渲染播放
思路非常清晰,下面开始实践。
一、node服务搭建
首先是新建一个项目,配置基础的webpack和babel,并安装websocket相关的两个库 ws
、websocket-stream
。
然后新建一个index.js文件,搭建websocket服务:
import WebSocket from 'ws'
import webSocketStream from 'websocket-stream/stream'
// 建立WebSocket服务
const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })
// 监听连接
wss.on('connection', handleConnection)
// 连接时触发事件
function handleConnection (ws, req) {
console.log('一个客户端连接进来啦')
}
如此,一个简单的websocket服务就搭建好了,可以通过配置脚本运行该文件:
"scripts": {
"start": "nodemon --exec babel-node index.js"
}
运行 npm run start
即可启动websocket服务,端口是8888。可在前端通过websocket连接该地址,测试是否连接成功。
二、ffmpeg转码
接下来就是重点了,通过npm安装fluent-ffmpeg
。
好了,直接上代码:
import WebSocket from 'ws'
import webSocketStream from 'websocket-stream/stream'
import ffmpeg from 'fluent-ffmpeg'
// 建立WebSocket服务
const wss = new WebSocket.Server({ port: 8888, perMessageDeflate: false })
// 监听连接
wss.on('connection', handleConnection)
// 连接时触发事件
function handleConnection (ws, req) {
// 获取前端请求的流地址(前端websocket连接时后面带上流地址)
const url = req.url.slice(1)
// 传入连接的ws客户端 实例化一个流
const stream = webSocketStream(ws, { binary: true })
// 通过ffmpeg命令 对实时流进行格式转换 输出flv格式
const ffmpegCommand = ffmpeg(url)
.addInputOption('-analyzeduration', '100000', '-max_delay', '1000000')
.on('start', function () { console.log('Stream started.') })
.on('codecData', function () { console.log('Stream codecData.') })
.on('error', function (err) {
console.log('An error occured: ', err.message)
stream.end()
})
.on('end', function () {
console.log('Stream end!')
stream.end()
})
.outputFormat('flv').videoCodec('copy').noAudio()
stream.on('close', function () {
ffmpegCommand.kill('SIGKILL')
})
try {
// 执行命令 传输到实例流中返回给客户端
ffmpegCommand.pipe(stream)
} catch (error) {
console.log(error)
}
}
这样,简单的websocket和流转码服务就搭建好了,运行起来。如果后续投入生产环境时,也可以通过docker进行服务端部署,开机自运行。
三、前端flv.js获取视频数据并渲染
服务端搭建完,接下来就等前端连接服务器上的websocket,获取转码后的flv格式数据,然后渲染出来就行了。我们通过flv.js这个库来便捷的实现它。
安装flv.js,在vue中使用:
<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元素上即可。demo效果如下:
四、方案总结
这套方案主要的核心思路就是搭建服务端websocket服务并转码,客户端通过flv.js连接websocket并渲染画面。
优点有:
- 不需要flash
- 可部署在本地环境中
- 兼容性良好
- 延迟较低,没有卡顿和花屏,CPU 占用率也不高
- 服务端和客户端全部js实现,适合大前端路线的开发者来实践
以上就是在html5中播放rtsp流的一个方案,可实现监控、直播、播放视频等业务。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!