浏览器不能直接播放rtsp格式视频
需要将rtsp转为flv,然后再使用flv.js播放
1.rtsp转flv(需要node)
首先电脑需要下载 ffmpeg(将resp转为flv主要使用他)
下载完需要配置环境变量
配置好后 cmd 运行 ffmpeg -version 输出版本信息则成功
2.node代码
下载node依赖
npm i fluent-ffmpeg ws websocket-stream
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)
}
}
作者:有刃有鱼阮小六
链接:https://juejin.cn/post/6908641550046068744
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
3.vue代码
npm i flv.js
<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>
作者:有刃有鱼阮小六
链接:https://juejin.cn/post/6908641550046068744
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。