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