以上为本机测试webrtc-streamer实现实时视频播放效果的全过程，后续还要验证服务器运行服务、局域网公网访问以及性能等。

7.另外把页面放到初始(根目录)公共页面(app.vue)可实现不登录的实时检测

8.关于截图的部分代码，有需要的可以参考

<code> <a-button class="taglist" @click="captureScreenshot">截图</a-button>code>

//定时监听

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);

9.部分用到的参考文章简介

1、各种服务端（如 linux / windows 等）都有介绍的比较全的版本推荐：参考链接

2、结合使用的文章参考：参考链接使用VUE和webrtc-streamer实现实时视频播放(监控设备-rtsp)_vue.js_脚本之家 (jb51.net)

3、cup占用过高处理参考：参考链接

总结

以上就是今天要讲的内容，本文简单总结了自己使用过程的一些知识点和VUE和webrtc-streamer实现rtsp实时监控的一些步骤，希望可以帮到你。