xuhuajiao
/
RIFD-management-system
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

视频流优化

master
xuhuajiao 2 weeks ago
parent
7ae6cb0d0d
commit
99282675ce
4 changed files with 165 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/views/assetManage/monitor/deviceList.vue
  2. 20
      src/views/assetManage/monitor/index.vue
  3. 71
      src/views/components/hkVideo-old.vue
  4. 121
      src/views/components/hkVideo.vue

6
src/views/assetManage/monitor/deviceList.vue
View File

@ -203,7 +203,7 @@
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<hkVideo ref="hkVideoRef" :hk-config="hkConfig" />
<hkVideo v-if="hkVideoVisible" ref="hkVideoRef" :hk-config="hkConfig" />
</div>
</el-dialog>
@ -603,9 +603,7 @@ export default {
}
this.hkVideoVisible = true
this.$nextTick(() => {
this.$refs.hkVideoRef.initVideo()
})
// hkVideo 加了 v-if，会随 visible 重建并触发 mounted 中的 initVideo，无需手动调用
}
}).catch(err => {
console.log('获取设备视频信息失败', err)

20
src/views/assetManage/monitor/index.vue
View File

@ -45,7 +45,9 @@
<p v-if="item.warehouse.administrator">{{ item.warehouse.administrator }}</p>
<p v-if="item.warehouse.contactPhone">&nbsp;{{ item.warehouse.contactPhone }}</p>
</div>
<p v-if="item.warehouse.lastTime">最后同步时间: {{ item.warehouse.lastTime | parseTime }}</p>
<el-tooltip class="item" effect="dark" content="最后同步时间" placement="top-end">
<p v-if="item.warehouse.lastTime">{{ item.warehouse.lastTime | parseTime }}</p>
</el-tooltip>
</div>
</div>
</div>
@ -115,7 +117,7 @@
<span class="dialog-right-top" />
<span class="dialog-left-bottom" />
<div class="setting-dialog">
<hkVideo ref="hkVideoRef" :hk-config="hkConfig" />
<hkVideo v-if="hkVideoVisible" ref="hkVideoRef" :hk-config="hkConfig" />
</div>
</el-dialog>
@ -199,10 +201,10 @@ export default {
warningScrollTasks: [],
hkVideoVisible: false,
hkConfig: {
username: null,
password: null,
ip: null,
port: null
'username': null,
'devicePassword': null,
'ip': null,
'port': null
},
// ==========历史报警弹窗新增data==========
alarmDialogVisible: false,
@ -417,14 +419,12 @@ export default {
const finalPassword = pwdRes || detailRes.devicePassword
this.hkConfig = {
username: detailRes.deviceAccount,
password: finalPassword,
devicePassword: finalPassword,
ip: detailRes.deviceIp,
port: detailRes.devicePort
}
this.hkVideoVisible = true
this.$nextTick(() => {
this.$refs.hkVideoRef.initVideo()
})
// hkVideo 加了 v-if，会随 visible 重建并触发 mounted 中的 initVideo，无需手动调用
} catch (err) {
console.error('打开视频失败：', err)
this.$message.error('获取监控设备信息失败')

71
src/views/components/hkVideo-old.vue
View File

@ -0,0 +1,71 @@
<template>
<div style="width: 100%; height: 100%; overflow: hidden;">
<!-- <h1>海康威视视频流</h1> -->
<!-- <h3>400W</h3>
<VideoCom :rtsp="rtspurl1" ref="video1"></VideoCom>
<h3>800W</h3>
<VideoCom :rtsp="rtspurl2" ref="video2"></VideoCom> -->
<video id="video" controls autoplay muted width="100%" height="100%" />
</div>
</template>
<script>
// import VideoCom from '../components/video'
// rtsp://admin:ftzn83560792@192.168.99.23:554/h264/ch1/main/av_stream
// rtsp://admin:ftzn83560792@192.168.99.26:554/Streaming/Channels/101
export default {
name: 'Home',
components: {
// VideoCom
},
props: {
hkConfig: {
type: Object,
required: true
}
},
data() {
return {
webRtcServer: null,
camera_ip: '127.0.0.1:8000'
}
},
created() {
// this.controlVolume()
},
mounted() {
},
// 销毁视频流
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
},
methods: {
controlVolume() {
this.$nextTick(() => {
this.$refs.video1.volume = 0
this.$refs.video2.volume = 0
})
},
initVideo() {
// video：需要绑定的video控件ID
// 127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiWebRtcServerUrl : process.env.VUE_APP_WEBRTCSTREAMER_API
this.camera_ip = linkSrc
console.log('hkConfig', this.hkConfig)
// eslint-disable-next-line no-undef
this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
// 需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
this.webRtcServer.connect('rtsp://' + this.hkConfig.username + ':' + this.hkConfig.devicePassword + '@' + this.hkConfig.ip + ':' + this.hkConfig.port + '/h264/ch1/main/av_stream')
// 测试用
// this.webRtcServer.connect('rtsp://admin:ftzn83560792@192.168.99.120:554/h264/1/1')
// this.webRtcServer.connect(rtsp_url)
}
}
}
</script>
<style lang="scss">
</style>

121
src/views/components/hkVideo.vue
View File

@ -1,24 +1,12 @@
<template>
<div style="width: 100%; height: 100%; overflow: hidden;">
<!-- <h1>海康威视视频流</h1> -->
<!-- <h3>400W</h3>
<VideoCom :rtsp="rtspurl1" ref="video1"></VideoCom>
<h3>800W</h3>
<VideoCom :rtsp="rtspurl2" ref="video2"></VideoCom> -->
<div style="width: 100%; height: 700px; overflow: hidden;">
<video id="video" controls autoplay muted width="100%" height="100%" />
</div>
</template>
<script>
// import VideoCom from '../components/video'
// rtsp://admin:ftzn83560792@192.168.99.23:554/h264/ch1/main/av_stream
// rtsp://admin:ftzn83560792@192.168.99.26:554/Streaming/Channels/101
export default {
name: 'Home',
components: {
// VideoCom
},
props: {
hkConfig: {
type: Object,
@ -28,44 +16,99 @@ export default {
data() {
return {
webRtcServer: null,
camera_ip: '127.0.0.1:8000'
camera_ip: '127.0.0.1:8000',
iceDisconnectTimer: null,
pcReadyTimer: null,
reconnectTimer: null,
isReconnecting: false,
pc: null
}
},
created() {
// this.controlVolume()
},
mounted() {
this.initVideo()
},
// 销毁视频流
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
// 清理所有定时器
clearTimeout(this.iceDisconnectTimer)
clearTimeout(this.pcReadyTimer)
clearTimeout(this.reconnectTimer)
// 移除事件监听
if (this.pc) {
this.pc.removeEventListener('iceconnectionstatechange', this.handleIceStateChange)
this.pc = null
}
// 断开 webrtc 连接
if (this.webRtcServer) {
this.webRtcServer.disconnect()
this.webRtcServer = null
}
this.isReconnecting = false
},
methods: {
controlVolume() {
this.$nextTick(() => {
this.$refs.video1.volume = 0
this.$refs.video2.volume = 0
})
},
initVideo() {
// video：需要绑定的video控件ID
// 127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
const linkSrc = process.env.NODE_ENV === 'production' ? window.g.ApiWebRtcServerUrl : process.env.VUE_APP_WEBRTCSTREAMER_API
const linkSrc = process.env.NODE_ENV === 'production'
? window.g.ApiWebRtcServerUrl
: process.env.VUE_APP_WEBRTCSTREAMER_API
this.camera_ip = linkSrc
console.log('hkConfig', this.hkConfig)
// eslint-disable-next-line no-undef
this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//' + this.camera_ip)
// 需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
this.webRtcServer.connect('rtsp://' + this.hkConfig.username + ':' + this.hkConfig.devicePassword + '@' + this.hkConfig.ip + ':' + this.hkConfig.port + '/h264/ch1/main/av_stream')
// 测试用
// this.webRtcServer.connect('rtsp://admin:ftzn83560792@192.168.99.120:554/h264/1/1')
// this.webRtcServer.connect(rtsp_url)
// 重置 pc 引用
this.pc = null
// 【重点】等待pc初始化完成，再监听事件，不能立即监听！
const waitPcReady = () => {
if (!this.webRtcServer || !this.webRtcServer.pc) {
this.pcReadyTimer = setTimeout(waitPcReady, 100)
return
}
this.pc = this.webRtcServer.pc
this.pc.addEventListener('iceconnectionstatechange', this.handleIceStateChange)
}
waitPcReady()
// 海康子码流102
const streamNo = 1 * 100 + 2
const rtspUrl = `rtsp://${this.hkConfig.username}:${this.hkConfig.devicePassword}@${this.hkConfig.ip}:${this.hkConfig.port}/Streaming/Channels/${streamNo}`
console.log('rtspUrl:', rtspUrl)
this.webRtcServer.connect(rtspUrl)
},
// ICE 连接状态变化处理（抽成方法便于移除监听）
handleIceStateChange() {
if (!this.pc) return
const state = this.pc.iceConnectionState
console.log('iceConnectionState:', state)
if (state === 'disconnected') {
this.iceDisconnectTimer = setTimeout(() => {
if (!this.isReconnecting) {
this.isReconnecting = true
console.warn('ICE长时间disconnected，执行重连')
this.reConnectStream()
}
}, 5000)
} else if (state === 'connected') {
clearTimeout(this.iceDisconnectTimer)
this.isReconnecting = false
} else if (state === 'failed') {
clearTimeout(this.iceDisconnectTimer)
this.reConnectStream()
}
},
reConnectStream() {
// 清理旧 pc 上的监听
if (this.pc) {
this.pc.removeEventListener('iceconnectionstatechange', this.handleIceStateChange)
this.pc = null
}
if (this.webRtcServer) {
this.webRtcServer.disconnect()
}
this.reconnectTimer = setTimeout(() => {
this.initVideo()
}, 300)
}
}
}
</script>
<style lang="scss">
</style>
Write Preview
Loading…
Cancel
Save