使用VUE和webrtc-streamer实现rtsp实时监控

---

前言

项目中遇到过的标题：通过 前端 Vue 或者后端Java 实现对监控的实时预览播放，截图等，刚开始肯定是没有头绪，通过多方面的查找和验证，就有了这篇文章。

---

提示：以下是本篇文章正文内容，下面案例可供参考
一、webrtc-streamer是什么？

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

复制代码

二、使用步骤

1.下载webrtc-streamer，本机测试我下载的最新window版本

下载地址：https://github.com/mpromonet/webrtc-streamer/releases
2.解压下载的安装

3.双击webrtc-streamer.exe启动服务

如下图则启动成功，此时在浏览器访问127.0.0.1:8000可以看到本机监控画面

   当你同时打开多个视频流/访问窗口时，会发现当地CPU会快速上涨，cpu太高的话打字都非常卡。所以在cmd里下令启动exe时，需要加上这个配置参数 -o
  

4.将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目次下 、在index.html文件里引入这两个js文件

5.编写测试页面

   注意：第三步在本机启动服务所以 new WebRtcStreamer(id,serverUrl)中URL传入127.0.0.1端口可
见第三步截图为8000；各监控设备厂商有自己的RTSP地址格式connect要传入正确的rtsp地址。

1. <template>
2.         <div>
3.                 <a-button @click="handleChange">切换</a-button>
4.                 <video id="video" autoplay width="900" height="900"></video>
5.         </div>
6. </template>
7. <script>
8. export default {
9. name: 'index1',
10. data() {
11.         return {
12.                 webRtcServer: null
13.         }
14. },
15. mounted() {
16.         //video：需要绑定的video控件ID
17.         //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
18.         this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
19.         //需要查看的rtsp地址
20.         this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')
21.         //rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
22.         //rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0--大华
23. },
24. beforeDestroy() {
25.         this.webRtcServer.disconnect()
26.         this.webRtcServer = null
27. },
28. methods: {
29.         handleChange() {
30.                 this.webRtcServer.connect('rtsp://user:password@ip:port/h264/ch1/main/av_stream')
31.         }
32. }
33. }
34. </script>
35. <style scoped></style>

复制代码

6.运行项目可查看监控视频播放结果

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

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

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

1. <a-button  class="taglist"  @click="captureScreenshot">截图</a-button>
2.   //定时监听
3.       setTime(){
4.         //每隔2秒进行截图
5.        this.timer = setInterval(()=>{
6.          this.captureScreenshot();
7.        },10000)
8.      },
9. //截图的点击事件
10.     captureScreenshot() {
11.       for (var i = 0; i < this.number; i++) {
12.         var videoElement = ''
13.         videoElement = document.getElementById('video' + i)
14.         this.windowip=videoon.ip
15.         console.log(videoElement.ip,"1234")
16.         if (videoElement.biaoshi == 'videoplay') {
17.           console.log('截图j', videoElement, i)
18.           const canvas = document.createElement('canvas')
19.           canvas.width = videoElement.videoWidth
20.           canvas.height = videoElement.videoHeight
21.           canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height)
22.           this.screenshot = canvas.toDataURL()
23.           console.log(this.screenshot, '123')
24.           var shijian = new Date()
25.           console.log(shijian)
26.           // this.base64ToImage(this.screenshot,'shexiangtou'+shijian+'.png')
27.           this.base64ToImage(this.screenshot, 'shexiangtou' + shijian + '.png')
28.         }
29.       }
30.       //  console.log("截图",videoElement)
31.     },
32.     //上传截图
33.     postImg(base64Str, filename) {
34.       var imgData = {
35.         serialNumber: '01',
36.         base64: base64Str,
37.         ip: this.windowip
38.       }
39.       // console.log(imgData,"imgdata",base64Str,imgData.base64Str,"wozoul")
40.       // return
41.       postAction(this.url.vueScreenSendAndPython, imgData)
42.         .then(res => {
43.           if (res.success) {
44.             this.$message.success(`保存成功！`)
45.           } else {
46.             this.$message.warn(`保存失败：` + res.message)
47.           }
48.         })
49.         .finally(() => {
50.           this.loading = false
51.         })
52.     },
53.     //下载截图
54.     base64ToImage(base64Str, filename) {
55.       var that = this
56.       console.log(base64Str, filename, '我走了下载')
57.       const img = new Image()
58.       img.src = base64Str
59.       img.onload = function() {
60.         const canvas = document.createElement('canvas')
61.         canvas.width = img.width
62.         canvas.height = img.height
63.         const ctx = canvas.getContext('2d')
64.         ctx.drawImage(img, 0, 0)
65.         // 如果需要将图片保存到文件，可以使用以下代码
66.         that.getlick = document.createElement('a')
68.         that.getlick.href = canvas.toDataURL('image/jpeg')
69.         that.getlick.download = filename || 'image.jpg'
70.         // that.postImg(that.getlick.href,filename)
72.         that.getlick.click()
73.         // 如果只需要在页面展示图片，可以将以下代码取消注释 //
74.         // document.body.appendChild(canvas);
75.       }
76.     }
78.     //  // 使用示例
79.     //  const base64String = 'data:image/png;base64,iVBORw0KG...';
80.     //  // 替换为你的Base64编码字符串
81.     //  const filename = 'image.png';
82.     //  // 可选的文件名，如果不提供，默认为
83.     //  'image.jpg' base64ToImage(base64String, filename);

复制代码

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

1、各种服务端（如 linux / windows 等）都有先容的比较全的版本推荐：参考链接
2、联合使用的文章参考：参考链接使用VUE和webrtc-streamer实实际时视频播放(监控设备-rtsp)_vue.js_脚本之家 (jb51.net)
3、cup占用过高处理处罚参考：参考链接
总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。