lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

类型：开发

Browse Source 
描述：
This commit is contained in:
lixuefeng
2026-01-14 00:24:38 +08:00
parent c392ce026d
commit 402e3c6e09
8 changed files with 140 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
package-lock.json generated
View File

@@ -24,7 +24,8 @@
"vue-echarts": "^7.0.3",
"vue-router": "^4.4.5",
"vue3-seamless-scroll": "^2.0.1",
"vuedraggable": "^4.1.0"
"vuedraggable": "^4.1.0",
"whepts": "^1.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
@@ -6165,6 +6166,12 @@
"resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
"license": "MIT"
},
"node_modules/whepts": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/whepts/-/whepts-1.0.2.tgz",
"integrity": "sha512-9P0OP514Z2ZR2ev7qMOApplw6ERMChqgPi6eWWn6HTlTpDV0gW7Zqs4kLAKIV7xqxXCDNDCorxNz8ekOYAEp5g==",
"license": "MIT"
},
"node_modules/which": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

3
package.json
View File

@@ -25,7 +25,8 @@
"vue-echarts": "^7.0.3",
"vue-router": "^4.4.5",
"vue3-seamless-scroll": "^2.0.1",
"vuedraggable": "^4.1.0"
"vuedraggable": "^4.1.0",
"whepts": "^1.0.2"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",

34
src/components/HlsPlayer/index.vue
View File

@@ -4,10 +4,10 @@
class="myVideo"
id="video"
ref="videoElement"
preload="auto"
muted
playsinline
autoplay
:controls="false"
disablePictureInPicture
></video>
<!-- <div v-if="loading" class="loading-overlay pointer-events-none">
<div class="loading-text">{{ loadingText }}</div>
@@ -17,7 +17,7 @@
<script>
import Hls from 'hls.js'
import mpegtsjs from 'mpegts.js'
import WebRTCWhep from 'whepts'
export default {
name: 'HlsPlayer',
props: {
@@ -121,6 +121,7 @@
immediateCleanup() {
// 立即停止网络请求
if (this.hls) {
this.hls.close();
this.hls.stopLoad()
this.hls.detachMedia()
}
@@ -163,26 +164,13 @@
if (this.hls) {
this.immediateCleanup()
}
if(this.url.startsWith('ws')){
const videoElement = document.getElementById('video')
const player = mpegtsjs.createPlayer({
url: this.url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
player.unload()
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
if(this.url.startsWith('http://192.168.77.200:8050/')){
this.hls = new WebRTCWhep({
url: this.url, // WHEP 服务器地址
container: this.video, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
}else{
this.hls = new Hls({

39
src/layout/components/CoreVideo/allList.vue
View File

@@ -43,12 +43,13 @@ import {getVideoListApi, getColletListApi, getPreviewUrlApi} from '@/api/home'
import Hls from 'hls.js'
import pubSub from 'pubsub-js'
import mpegtsjs from "mpegts.js";
import WebRTCWhep from "whepts";
let modelValue = defineModel()
let isCollect = ref(0)
let list = ref([])
let hlsRefs = []
let webrtcRefs = []
let total = ref(0)
let src = ref('')
let cameraIndexCode = ref('')
@@ -109,6 +110,12 @@ import mpegtsjs from "mpegts.js";
})
hlsRefs = []
}
if (webrtcRefs.length > 0) {
webrtcRefs.map((item) => {
item.close()
})
webrtcRefs = []
}
}
const pageNumChange = () => {
clearHlsRefs()
@@ -121,29 +128,15 @@ const createPlayer = (cameraIndexCode,videoElement) => {
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url:url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
webrtcRefs.push(player)
}
else{
const player = new Hls({

43
src/layout/components/CoreVideo/index.vue
View File

@@ -39,7 +39,7 @@
import { useWebSocket } from '@/hooks/socket'
import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
import mpegtsjs from "mpegts.js";
import WebRTCWhep from 'whepts'
const { dataRes } = useWebSocket(
`${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/securityAlerts`
@@ -59,6 +59,7 @@ let isCollect = ref(0)
let cameraIndexCode = ref('')
let videoShow = ref(false)
let allShow = ref(false)
let webrtcRefs = []
let hlsRefs = []
let timer = null
let isDiy = ref(0)
@@ -97,29 +98,15 @@ let isCollect = ref(0)
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url:url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
webrtcRefs.push(player)
}
else{
const player = new Hls({
@@ -185,6 +172,16 @@ let isCollect = ref(0)
})
hlsRefs = []
}
if(webrtcRefs.length>0){
webrtcRefs.map((item) => {
try{
item.close()
}catch (e) {
}
})
webrtcRefs = [];
}
getVideoList()
}
const onVideoCollect = () => {

62
src/views/collect/components/video-box.vue
View File

@@ -71,7 +71,7 @@
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
import mpegtsjs from "mpegts.js";
import WebRTCWhep from 'whepts'
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
// const UP = 'UP' // 上转
@@ -89,6 +89,7 @@
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
let webrtcRefs = []
let hlsRef = null
let timer = null
let videoLog = ref(1)
@@ -232,12 +233,26 @@
}
//清除 hls
const clearHlsRefs = () => {
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
item.destroy()
})
hlsRefs = []
}
if (hlsRefs.length > 0) {
hlsRefs.map((item) => {
try{
item.destroy()
}catch (e) {
}
})
hlsRefs = []
}
if(webrtcRefs.length>0){
webrtcRefs.map((item) => {
try{
item.close()
}catch (e) {
}
})
webrtcRefs = [];
}
}
// 分页
const currentChange = (e) => {
@@ -271,31 +286,16 @@
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
player.unload();
player.destroy();
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
}
else{
webrtcRefs.push(player)
}else{
const player = new Hls({
maxBufferLength: 10, // 最大缓冲长度（秒）
maxMaxBufferLength: 15, // 缓冲区长度的上限

68
src/views/hotel/components/video-box.vue
View File

@@ -196,7 +196,8 @@
import Hls from 'hls.js'
import emptyIco from '@/assets/images/n-icon.png'
import { debounce } from 'lodash'
import mpegtsjs from "mpegts.js";
// import mpegtsjs from "mpegts.js";
import WebRTCWhep from "whepts";
// const Z00M_IN = 'ZOOM_IN' // 焦距变大
// const Z00M_OUT = 'ZOOM_OUT' // 焦距变小
// const UP = 'UP' // 上转
@@ -214,6 +215,7 @@
let cond = ref(false)
let ACTION = '0'
let hlsRefs = []
let webrtcRefs = []
let hlsRef = null
let timer = null
let videoLog = ref(1)
@@ -322,6 +324,12 @@
})
hlsRefs = []
}
if (webrtcRefs.length > 0) {
webrtcRefs.map((item) => {
item.close()
})
webrtcRefs = []
}
}
// 分页
const currentChange = (e) => {
@@ -335,34 +343,15 @@
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
try{
player.unload();
player.destroy();
}catch (e) {
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url:url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
hlsRefs.push(player)
webrtcRefs.push(player)
}
else{
const player = new Hls({
@@ -438,24 +427,13 @@
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
if (url.startsWith('ws')) {
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoRef.value)
player.load()
player.play()
// 错误处理和重连机制
player.on('error', (err) => {
// 3 秒后尝试重新加载
setTimeout(() => {
player.load()
player.play()
}, 3000)
if (url.startsWith('http://192.168.77.200:8050/')) {
hlsRef = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoRef.value, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
})
} else {
hlsRef = new Hls({

79
src/views/monitor/components/box-2.vue
View File

@@ -203,7 +203,7 @@
<script setup>
import {getVideoListApi, getPreviewUrlApi, getColletListApi, getColletDiyListApi, getColletDiyApi} from '@/api/home'
import mpegtsjs from 'mpegts.js'
import WebRTCWhep from 'whepts'
import {
getVideoTypeApi,
getVideoRegionsApi,
@@ -262,6 +262,7 @@ let params = reactive({
businessVideoDisplayPosition: ''
})
let hlsRefs = []
let webrtcRefs = []
let hlsRef = null
let timer = null
@@ -301,6 +302,16 @@ const clearHlsRefs = () => {
})
hlsRefs = []
}
if(webrtcRefs.length>0){
webrtcRefs.map((item) => {
try{
item.close()
}catch (e) {
}
})
webrtcRefs = [];
}
}
const currentChange = (e) => {
if (navList.value.length == current.value) {
@@ -362,31 +373,13 @@ const handleItemVideo = async (url, type, code, item) => {
videoLog.value = 2
cameraIndexCode.value = code
setTimeout(() => {
if (url.startsWith('ws')) {
hlsRef = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
hlsRef.attachMediaElement(videoRef.value)
hlsRef.load()
hlsRef.play()
// 错误处理和重连机制
hlsRef.on('error', (err) => {
console.error('播放器错误:', err)
// 3 秒后尝试重新加载
try{
hlsRef.unload()
hlsRef.destroy()
}catch (e) {
if (url.startsWith('http://192.168.77.200:8050/')) {
hlsRef = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoRef.value, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
handleItemVideo(url, 101, code, item);
}, 3000)
})
} else {
hlsRef = new Hls({
@@ -502,37 +495,15 @@ const createPlayer = (cameraIndexCode,videoElement) => {
cameraIndexCode: cameraIndexCode
}).then(res=>{
const url = res.data.url;
if(url.startsWith('ws')){
const player = mpegtsjs.createPlayer({
url: url,
type: 'flv',
isLive: true,
hasAudio: false
})
player.attachMediaElement(videoElement)
player.load()
player.play()
// 错误处理和重连机制
player.on(mpegtsjs.Events.ERROR, (err) => {
console.error('播放器错误【'+cameraIndexCode+'】:', err)
try{
player.unload();
player.destroy();
}catch (e) {
if(url.startsWith('http://192.168.77.200:8050/')){
const player = new WebRTCWhep({
url: url, // WHEP 服务器地址
container: videoElement, // 视频播放容器
onError: (error) => {
console.error('播放错误:', error)
}
// 3 秒后尝试重新加载
setTimeout(() => {
console.error('重新加载【'+cameraIndexCode+'】' )
createPlayer(cameraIndexCode,videoElement);
}, 3000)
})
player.on(mpegtsjs.Events.LOADING_COMPLETE, (err) => {
console.error('加载完成:', err)
})
hlsRefs.push(player)
webrtcRefs.push(player)
}
else{
const player = new Hls({