使用VUE和webrtc-streamer实现rtsp实时监控 - ToB企服应用市场:ToB评测及商务社交产业平台

webrtc-streamer是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC需要的相关接口提供支持。

复制代码

<template>
<div>
<a-button @click="handleChange">切换</a-button>
<video id="video" autoplay width="900" height="900"></video>
</div>
</template>
<script>
export default {
name: 'index1',
data() {
return {
webRtcServer: null
}
},
mounted() {
//video：需要绑定的video控件ID
//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
//需要查看的rtsp地址
this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')
//rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
//rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0--大华
},
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
},
methods: {
handleChange() {
this.webRtcServer.connect('rtsp://user:password@ip:port/h264/ch1/main/av_stream')
}
}
}
</script>
<style scoped></style>

复制代码

<a-button class="taglist" @click="captureScreenshot">截图</a-button>
//定时监听
setTime(){
//每隔2秒进行截图
this.timer = setInterval(()=>{
this.captureScreenshot();
},10000)
},
//截图的点击事件
captureScreenshot() {
for (var i = 0; i < this.number; i++) {
var videoElement = ''
videoElement = document.getElementById('video' + i)
this.windowip=videoon.ip
console.log(videoElement.ip,"1234")
if (videoElement.biaoshi == 'videoplay') {
console.log('截图j', videoElement, i)
const canvas = document.createElement('canvas')
canvas.width = videoElement.videoWidth
canvas.height = videoElement.videoHeight
canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height)
this.screenshot = canvas.toDataURL()
console.log(this.screenshot, '123')
var shijian = new Date()
console.log(shijian)
// this.base64ToImage(this.screenshot,'shexiangtou'+shijian+'.png')
this.base64ToImage(this.screenshot, 'shexiangtou' + shijian + '.png')
}
}
// console.log("截图",videoElement)
},
//上传截图
postImg(base64Str, filename) {
var imgData = {
serialNumber: '01',
base64: base64Str,
ip: this.windowip
}
// console.log(imgData,"imgdata",base64Str,imgData.base64Str,"wozoul")
// return
postAction(this.url.vueScreenSendAndPython, imgData)
.then(res => {
if (res.success) {
this.$message.success(`保存成功！`)
} else {
this.$message.warn(`保存失败：` + res.message)
}
})
.finally(() => {
this.loading = false
})
},
//下载截图
base64ToImage(base64Str, filename) {
var that = this
console.log(base64Str, filename, '我走了下载')
const img = new Image()
img.src = base64Str
img.onload = function() {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
// 如果需要将图片保存到文件，可以使用以下代码
that.getlick = document.createElement('a')
that.getlick.href = canvas.toDataURL('image/jpeg')
that.getlick.download = filename || 'image.jpg'
// that.postImg(that.getlick.href,filename)
that.getlick.click()
// 如果只需要在页面展示图片，可以将以下代码取消注释 //
// document.body.appendChild(canvas);
}
}
// // 使用示例
// const base64String = 'data:image/png;base64,iVBORw0KG...';
// // 替换为你的Base64编码字符串
// const filename = 'image.png';
// // 可选的文件名，如果不提供，默认为
// 'image.jpg' base64ToImage(base64String, filename);

复制代码