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()
### EasyPlayerPro 分屏功能实现方式 EasyPlayerPro 是一款支持多种视频播放需求的工具,其核心优势在于可以轻松集成到项目中并提供自动全屏自动播放等功能[^1]。然而,在实际应用中,如果需要实现分屏显示(例如 1 分屏、4 分屏、9 分屏等),则可能需要借助前端框架(如 Vue.js)来完成更复杂的布局控制。 以下是基于 Vue3 的一种实现方案,用于创建多分屏播放器: #### 前端代码示例 以下是一个简单的 Vue3 组件代码片段,展示如何通过动态渲染多个播放器实例来实现分屏效果[^2]。 ```vue <template> <div class="player-container"> <!-- 动态生成播放器 --> <div v-for="(source, index) in videoSources" :key="index" class="player-item"> <video controls autoplay muted width="100%" height="100%"> <source :src="source.url" type="video/mp4" /> Your browser does not support the video tag. </video> </div> </div> </template> <script setup> import { ref } from &#39;vue&#39;; // 定义视频源数组 const videoSources = ref([ { url: &#39;https://example.com/video1.mp4&#39; }, { url: &#39;https://example.com/video2.mp4&#39; }, { url: &#39;https://example.com/video3.mp4&#39; }, { url: &#39;https://example.com/video4.mp4&#39; } ]); </script> <style scoped> .player-container { display: grid; grid-template-columns: repeat(2, 1fr); /* 可调整为其他列数 */ gap: 10px; /* 设置间距 */ } .player-item { position: relative; } </style> ``` 上述代码展示了如何利用 `v-for` 指令循环渲染多个 `<video>` 元素,并绑定不同的视频源地址。通过 CSS Grid 布局技术,可以根据需要灵活设置每行显示多少个播放窗口(即分屏数量)。例如,将 `grid-template-columns: repeat(2, 1fr)` 修改为 `repeat(3, 1fr)` 即可实现三列分屏。 --- #### 后端配置说明 对于 EasyPlayerPro 而言,通常会涉及后端流媒体服务的支持。假设已经集成了 RTSP 或 HLS 流协议,则可以通过 URL 参数传递给前端组件中的 `videoSources` 数组。具体实现取决于所使用的服务器架构以及 API 接口设计。 --- #### 注意事项 - **性能优化**:当分屏数量较多时,建议启用硬件加速以减少 CPU 和 GPU 的负担。 - **跨浏览器兼容性**:部分旧版浏览器可能不完全支持 HTML5 Video 标签的新特性,请提前测试目标环境。 - **自定义样式**:可根据业务场景进一步美化界面,比如添加进度条、音量调节按钮等交互控件。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值