Vue 3 ezuikit-js 7.7.7 深度集成萤石云四大核心功能实战指南在智能安防与远程监控领域萤石云作为行业领先的解决方案其Web端SDK的集成一直是前端开发者的重点关注方向。本文将基于Vue 3框架和ezuikit-js 7.7.7版本带您实现监控播放、云台控制、声音切换和全屏展示四大核心功能的模块化集成。1. 环境准备与SDK集成1.1 项目初始化与依赖安装首先确保已创建Vue 3项目推荐使用Vite脚手架然后安装指定版本的ezuikit-jsnpm install ezuikit-js7.7.7 --save注意经实测ezuikit-js的最新版本(8.x)存在兼容性问题7.7.7版本是最稳定的选择。这是笔者经过多次测试得出的结论避免读者重复踩坑。1.2 全局引入SDK在main.js中全局引入EZUIKitimport { createApp } from vue import App from ./App.vue import EZUIKit from ezuikit-js const app createApp(App) app.config.globalProperties.$EZUIKit EZUIKit app.mount(#app)1.3 获取萤石云认证信息需要提前准备以下参数参数名称获取途径有效期accessToken通过萤石开放平台API获取7天deviceSerial设备背面标签或萤石云APP永久channelNo默认为1多通道设备需确认永久videoUrl格式ezopen://open.ys7.com/[设备序列号]/[通道号].hd.live永久2. 监控播放功能实现2.1 基础播放器组件创建EzPlayer.vue组件实现播放器初始化和销毁template div classezui-container div idezuikit-player refplayerContainer/div /template script export default { props: { accessToken: String, deviceSerial: String, channelNo: { type: Number, default: 1 } }, data() { return { player: null } }, methods: { initPlayer() { this.player new this.$EZUIKit.EZUIKitPlayer({ id: ezuikit-player, accessToken: this.accessToken, url: ezopen://open.ys7.com/${this.deviceSerial}/${this.channelNo}.hd.live, autoplay: true, template: pcLive, // PC端专用模板 width: 100%, height: 100% }) }, destroyPlayer() { if (this.player) { this.player.destroy() this.player null } } }, mounted() { this.initPlayer() }, beforeUnmount() { this.destroyPlayer() } } /script style scoped .ezui-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9宽高比 */ background: #000; } #ezuikit-player { position: absolute; width: 100%; height: 100%; } /style2.2 播放状态管理通过SDK提供的事件系统实现播放状态监听// 在initPlayer方法中添加 this.player.on(log, (log) { console.log(Player Log:, log) if (log.includes(PLAYER_EVENT_PLAY_SUCCESS)) { this.$emit(play-success) } else if (log.includes(PLAYER_EVENT_PLAY_FAIL)) { this.$emit(play-error, 播放失败请检查网络或设备状态) } })3. 云台控制功能进阶实现3.1 八方向控制面板创建云台控制组件PtzControl.vuetemplate div classptz-panel div classptz-row button clickcontrol(0) classptz-btn ptz-top▲/button /div div classptz-row button clickcontrol(2) classptz-btn ptz-left◀/button button clickstop classptz-btn ptz-stop■/button button clickcontrol(3) classptz-btn ptz-right▶/button /div div classptz-row button clickcontrol(1) classptz-btn ptz-bottom▼/button /div /div /template script export default { props: { player: Object, speed: { type: Number, default: 2, validator: value value 1 value 8 } }, methods: { control(direction) { if (!this.player) return this.player.ptzControl({ command: start, direction: direction, speed: this.speed }) }, stop() { this.player?.ptzControl({ command: stop }) } } } /script style scoped .ptz-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ptz-row { display: flex; gap: 12px; } .ptz-btn { width: 50px; height: 50px; border-radius: 50%; border: none; font-size: 18px; cursor: pointer; transition: all 0.2s; } .ptz-btn:active { transform: scale(0.95); } .ptz-top { background: #f0f0f0; } .ptz-left { background: #f0f0f0; } .ptz-right { background: #f0f0f0; } .ptz-bottom { background: #f0f0f0; } .ptz-stop { background: #ff4d4f; color: white; } /style3.2 高级云台功能通过API实现预设位调用和巡航扫描// 在PtzControl组件中添加 methods: { gotoPreset(index) { this.player.ptzGotoPreset({ index: index // 预设位编号(1-8) }) }, startScan() { this.player.ptzControl({ command: start, operation: scan // 开始水平巡航 }) } }4. 声音控制与全屏功能4.1 声音切换实现创建AudioControl.vue组件template div classaudio-control button clicktoggleAudio :class[audio-btn, { active: isAudioOn }] {{ isAudioOn ? 关闭声音 : 开启声音 }} /button input typerange min0 max100 v-modelvolume changesetVolume classvolume-slider /div /template script export default { props: { player: Object }, data() { return { isAudioOn: false, volume: 50 } }, methods: { toggleAudio() { if (!this.player) return if (this.isAudioOn) { this.player.closeSound() } else { this.player.openSound() this.setVolume() // 应用当前音量 } this.isAudioOn !this.isAudioOn }, setVolume() { if (this.player this.isAudioOn) { this.player.setVolume(parseInt(this.volume)) } } } } /script style scoped .audio-control { display: flex; align-items: center; gap: 12px; } .audio-btn { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; } .audio-btn.active { background: #1890ff; color: white; border-color: #1890ff; } .volume-slider { width: 100px; } /style4.2 全屏功能优化增强全屏体验支持ESC退出检测// 在EzPlayer组件中添加 methods: { toggleFullscreen() { if (!document.fullscreenElement) { this.$refs.playerContainer.requestFullscreen() .catch(err { console.error(全屏错误:, err) // 降级处理 this.player.fullScreen() }) } else { document.exitFullscreen() } } }, mounted() { document.addEventListener(fullscreenchange, () { this.$emit(fullscreen-change, !!document.fullscreenElement) }) }5. 完整示例与性能优化5.1 完整页面集成创建监控页面CameraView.vuetemplate div classcamera-container div classplayer-section EzPlayer refplayer :access-tokenaccessToken :device-serialdeviceSerial play-successonPlaySuccess play-erroronPlayError / div classcontrol-bar AudioControl :playerplayerInstance / button clicktoggleFullscreen classfullscreen-btn {{ isFullscreen ? 退出全屏 : 全屏 }} /button /div /div div classptz-section PtzControl :playerplayerInstance :speedptzSpeed / div classpreset-section h4预设位置/h4 div classpreset-buttons button v-fori in 4 :keyi clickgotoPreset(i) classpreset-btn 位置{{ i }} /button /div /div /div /div /template script import EzPlayer from ./EzPlayer.vue import PtzControl from ./PtzControl.vue import AudioControl from ./AudioControl.vue export default { components: { EzPlayer, PtzControl, AudioControl }, data() { return { accessToken: 您的accessToken, deviceSerial: 设备序列号, ptzSpeed: 3, isFullscreen: false, playerInstance: null } }, methods: { onPlaySuccess() { this.playerInstance this.$refs.player.player console.log(播放成功) }, onPlayError(err) { console.error(播放错误:, err) }, toggleFullscreen() { this.$refs.player.toggleFullscreen() }, gotoPreset(index) { if (this.playerInstance) { this.playerInstance.ptzGotoPreset({ index }) } } } } /script style scoped .camera-container { display: grid; grid-template-columns: 1fr 300px; gap: 20px; max-width: 1200px; margin: 0 auto; } .player-section { position: relative; } .control-bar { display: flex; justify-content: space-between; margin-top: 10px; } .ptz-section { border: 1px solid #f0f0f0; padding: 15px; border-radius: 4px; } .preset-section { margin-top: 20px; } .preset-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; } .preset-btn { padding: 6px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; } .fullscreen-btn { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; } /style5.2 性能优化建议内存管理在组件销毁时确保释放播放器资源断线重连实现自动重连机制自适应布局响应式设计适配不同屏幕尺寸错误边界完善错误处理和用户提示// 在EzPlayer组件中增强错误处理 this.player.on(error, (error) { console.error(播放器错误:, error) this.$emit(error, { type: player-error, message: 播放器发生错误, detail: error }) // 自动重连逻辑 if (this.autoReconnect) { setTimeout(() { this.destroyPlayer() this.initPlayer() }, 3000) } })通过以上实现我们构建了一个功能完善、性能优化的萤石云监控系统前端界面。在实际项目中建议将accessToken等敏感信息通过后端接口获取而非硬编码在前端代码中。
Vue 3 ezuikit-js 7.7.7 深度集成萤石云四大核心功能实战指南在智能安防与远程监控领域萤石云作为行业领先的解决方案其Web端SDK的集成一直是前端开发者的重点关注方向。本文将基于Vue 3框架和ezuikit-js 7.7.7版本带您实现监控播放、云台控制、声音切换和全屏展示四大核心功能的模块化集成。1. 环境准备与SDK集成1.1 项目初始化与依赖安装首先确保已创建Vue 3项目推荐使用Vite脚手架然后安装指定版本的ezuikit-jsnpm install ezuikit-js7.7.7 --save注意经实测ezuikit-js的最新版本(8.x)存在兼容性问题7.7.7版本是最稳定的选择。这是笔者经过多次测试得出的结论避免读者重复踩坑。1.2 全局引入SDK在main.js中全局引入EZUIKitimport { createApp } from vue import App from ./App.vue import EZUIKit from ezuikit-js const app createApp(App) app.config.globalProperties.$EZUIKit EZUIKit app.mount(#app)1.3 获取萤石云认证信息需要提前准备以下参数参数名称获取途径有效期accessToken通过萤石开放平台API获取7天deviceSerial设备背面标签或萤石云APP永久channelNo默认为1多通道设备需确认永久videoUrl格式ezopen://open.ys7.com/[设备序列号]/[通道号].hd.live永久2. 监控播放功能实现2.1 基础播放器组件创建EzPlayer.vue组件实现播放器初始化和销毁template div classezui-container div idezuikit-player refplayerContainer/div /template script export default { props: { accessToken: String, deviceSerial: String, channelNo: { type: Number, default: 1 } }, data() { return { player: null } }, methods: { initPlayer() { this.player new this.$EZUIKit.EZUIKitPlayer({ id: ezuikit-player, accessToken: this.accessToken, url: ezopen://open.ys7.com/${this.deviceSerial}/${this.channelNo}.hd.live, autoplay: true, template: pcLive, // PC端专用模板 width: 100%, height: 100% }) }, destroyPlayer() { if (this.player) { this.player.destroy() this.player null } } }, mounted() { this.initPlayer() }, beforeUnmount() { this.destroyPlayer() } } /script style scoped .ezui-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; /* 16:9宽高比 */ background: #000; } #ezuikit-player { position: absolute; width: 100%; height: 100%; } /style2.2 播放状态管理通过SDK提供的事件系统实现播放状态监听// 在initPlayer方法中添加 this.player.on(log, (log) { console.log(Player Log:, log) if (log.includes(PLAYER_EVENT_PLAY_SUCCESS)) { this.$emit(play-success) } else if (log.includes(PLAYER_EVENT_PLAY_FAIL)) { this.$emit(play-error, 播放失败请检查网络或设备状态) } })3. 云台控制功能进阶实现3.1 八方向控制面板创建云台控制组件PtzControl.vuetemplate div classptz-panel div classptz-row button clickcontrol(0) classptz-btn ptz-top▲/button /div div classptz-row button clickcontrol(2) classptz-btn ptz-left◀/button button clickstop classptz-btn ptz-stop■/button button clickcontrol(3) classptz-btn ptz-right▶/button /div div classptz-row button clickcontrol(1) classptz-btn ptz-bottom▼/button /div /div /template script export default { props: { player: Object, speed: { type: Number, default: 2, validator: value value 1 value 8 } }, methods: { control(direction) { if (!this.player) return this.player.ptzControl({ command: start, direction: direction, speed: this.speed }) }, stop() { this.player?.ptzControl({ command: stop }) } } } /script style scoped .ptz-panel { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ptz-row { display: flex; gap: 12px; } .ptz-btn { width: 50px; height: 50px; border-radius: 50%; border: none; font-size: 18px; cursor: pointer; transition: all 0.2s; } .ptz-btn:active { transform: scale(0.95); } .ptz-top { background: #f0f0f0; } .ptz-left { background: #f0f0f0; } .ptz-right { background: #f0f0f0; } .ptz-bottom { background: #f0f0f0; } .ptz-stop { background: #ff4d4f; color: white; } /style3.2 高级云台功能通过API实现预设位调用和巡航扫描// 在PtzControl组件中添加 methods: { gotoPreset(index) { this.player.ptzGotoPreset({ index: index // 预设位编号(1-8) }) }, startScan() { this.player.ptzControl({ command: start, operation: scan // 开始水平巡航 }) } }4. 声音控制与全屏功能4.1 声音切换实现创建AudioControl.vue组件template div classaudio-control button clicktoggleAudio :class[audio-btn, { active: isAudioOn }] {{ isAudioOn ? 关闭声音 : 开启声音 }} /button input typerange min0 max100 v-modelvolume changesetVolume classvolume-slider /div /template script export default { props: { player: Object }, data() { return { isAudioOn: false, volume: 50 } }, methods: { toggleAudio() { if (!this.player) return if (this.isAudioOn) { this.player.closeSound() } else { this.player.openSound() this.setVolume() // 应用当前音量 } this.isAudioOn !this.isAudioOn }, setVolume() { if (this.player this.isAudioOn) { this.player.setVolume(parseInt(this.volume)) } } } } /script style scoped .audio-control { display: flex; align-items: center; gap: 12px; } .audio-btn { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; } .audio-btn.active { background: #1890ff; color: white; border-color: #1890ff; } .volume-slider { width: 100px; } /style4.2 全屏功能优化增强全屏体验支持ESC退出检测// 在EzPlayer组件中添加 methods: { toggleFullscreen() { if (!document.fullscreenElement) { this.$refs.playerContainer.requestFullscreen() .catch(err { console.error(全屏错误:, err) // 降级处理 this.player.fullScreen() }) } else { document.exitFullscreen() } } }, mounted() { document.addEventListener(fullscreenchange, () { this.$emit(fullscreen-change, !!document.fullscreenElement) }) }5. 完整示例与性能优化5.1 完整页面集成创建监控页面CameraView.vuetemplate div classcamera-container div classplayer-section EzPlayer refplayer :access-tokenaccessToken :device-serialdeviceSerial play-successonPlaySuccess play-erroronPlayError / div classcontrol-bar AudioControl :playerplayerInstance / button clicktoggleFullscreen classfullscreen-btn {{ isFullscreen ? 退出全屏 : 全屏 }} /button /div /div div classptz-section PtzControl :playerplayerInstance :speedptzSpeed / div classpreset-section h4预设位置/h4 div classpreset-buttons button v-fori in 4 :keyi clickgotoPreset(i) classpreset-btn 位置{{ i }} /button /div /div /div /div /template script import EzPlayer from ./EzPlayer.vue import PtzControl from ./PtzControl.vue import AudioControl from ./AudioControl.vue export default { components: { EzPlayer, PtzControl, AudioControl }, data() { return { accessToken: 您的accessToken, deviceSerial: 设备序列号, ptzSpeed: 3, isFullscreen: false, playerInstance: null } }, methods: { onPlaySuccess() { this.playerInstance this.$refs.player.player console.log(播放成功) }, onPlayError(err) { console.error(播放错误:, err) }, toggleFullscreen() { this.$refs.player.toggleFullscreen() }, gotoPreset(index) { if (this.playerInstance) { this.playerInstance.ptzGotoPreset({ index }) } } } } /script style scoped .camera-container { display: grid; grid-template-columns: 1fr 300px; gap: 20px; max-width: 1200px; margin: 0 auto; } .player-section { position: relative; } .control-bar { display: flex; justify-content: space-between; margin-top: 10px; } .ptz-section { border: 1px solid #f0f0f0; padding: 15px; border-radius: 4px; } .preset-section { margin-top: 20px; } .preset-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; } .preset-btn { padding: 6px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; } .fullscreen-btn { padding: 6px 12px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; } /style5.2 性能优化建议内存管理在组件销毁时确保释放播放器资源断线重连实现自动重连机制自适应布局响应式设计适配不同屏幕尺寸错误边界完善错误处理和用户提示// 在EzPlayer组件中增强错误处理 this.player.on(error, (error) { console.error(播放器错误:, error) this.$emit(error, { type: player-error, message: 播放器发生错误, detail: error }) // 自动重连逻辑 if (this.autoReconnect) { setTimeout(() { this.destroyPlayer() this.initPlayer() }, 3000) } })通过以上实现我们构建了一个功能完善、性能优化的萤石云监控系统前端界面。在实际项目中建议将accessToken等敏感信息通过后端接口获取而非硬编码在前端代码中。
