vue3+setup使用rtsp视频流实现实时监控，全屏，拍摄，自动拍摄等功能(纯前端)

vue3+setup使用rtsp视频流实现实时监控，全屏，拍摄，自动拍摄等功能(纯前端)

概要

本文介绍了如何在Vue应用中通过WebRTC技术获取摄像头的rtsp视频流，同时展示了实时监控，全屏，拍摄，自动拍摄等功能。

一、获取rtsp流并确保其可用

1.因为是纯前端角度，所以从后端可以获取http开头的视频流地址（其实是在后端电脑打开，然后本地接入后端电脑，进行查看或修改配置）因为rstp流需要转码，所以在摄像头配置里面要修改转码格式
2.前端自己可以下载安装VLC播放器然后进行调试设置

二、在vue3项目里引入rtsp流

1.下载webrtc-streamer
下载地址：https://github.com/mpromonet/webrtc-streamer/releases
下载版本根据自己电脑进行选择，双击webrtc-streamer.exe可执行文件后在浏览器访问http://127.0.0.1:8000，可以看到自己电脑正在操作的内容。
2.将/html/libs目录下的adapter.min.js和/html目录下面的webrtcstreamer.js文件分别拷贝到vue项目public中，并在index.html文件全局引入。

 <script src="/adapter.min.js"></script>
 <script src="/webrtcstreamer.js"></script>

三、具体代码，video封装

1.父页面

<script setup>

import {
     
      ref } from 'vue'

import videoRtmp from './videoRtmp.vue'
const list = ref([])
const idlist = ref([])
const imgArr = ref([]) // 手动抓拍的图片
const screenshotUrl = ref([]) // 自动抓拍的图片

const total = ref(0)
const currentPage = ref(1)
const keyWord = ref('')
const rtmpUrl = ref('rtsp://用户:密码@电脑网址:554')
// videoFlag 判断是单个还是多个video 对应不同的样式 false是单个 true是多个
const form = ref({
     
      videoFlag: false, videoList: [] })
const openVideo = ref(false)
const screenButton = ref(false) // 默认解禁 点击抓拍按钮后禁止 抓拍完成后解禁
const sButton = ref(true) // 默认禁止 加载完成后解禁
let screenNums = 0 // 加载完成的数量

const loadData = (pageNum = currentPage.value, pageSize = 10) => {
     
     
 
  list.value = [
    {
     
     
      id: 1,
      idName: 'id1',
      name: '设备1',
      rtmpUrl: 'rtsp://用户:密码@电脑网址:554',
      userName: 'admin',
      screenFlag: false,
    },
    {
     
     
      id: 2,
      idName: 'id2',
      name: '设备2',
      code: '002',
      userName: 'admin',
      password: 'VWEFKS',
      screenFlag: false,
      rtmpUrl: 'rtsp://用户:密码@电脑网址:554',
    },
  ]
  total.value = list.value.length
}

//分页
const handlePageChange = (page) => {
     
     
  currentPage.value = page
  loadData()
}
// 搜索
const searchHandle = async () => {
     
     
  currentPage.value = 1
  loadData()
}
/** 选择条数  */
function handleSelectionChange(selection) {
     
     
  console.log(selection)
  idlist.value = selection
}
//单个点击观看
const videoLook = (row) => {
     
     
  console.log(row)
  form.value.videoList = [row]
  form.value.videoFlag = false
  openVideo.value = true
}
//多个观看
const videoAllLook = (row) => {
     
     
  console.log(row)
  form.value.videoList = idlist.value
  form.value.videoFlag = idlist.value.length > 1 ? true : false
  openVideo.value = true
}

//点击叉号
const closeHandle = () => {
     
     
  resetData()
}
//清空数据
const resetData = () => {
     
     
  openVideo.value = false
  imgArr.value = []  
  screenshotUrl.value = []
  screenNums = 0
  screenButton.value = false
  form.value = {
     
     }
  loadData()