在现代的安防监控系统中，海康威视摄像头因其高性能和高稳定性被广泛应用。通过使用 ISUP（原 EHOME 协议），我们可以在 Spring Boot 后端实现摄像头的实时预览，并通过 Vue 前端展示。本文将介绍如何实现这一功能，提供相关的代码示例。
一、项目结构
首先，我们需要搭建一个 Spring Boot 项目，并在项目中集成相关依赖。一般的项目结构如下：
my-camera-preview
├── src
│ ├── main
│ │ ├── java
│ │ │ └── com
│ │ │ └── example
│ │ │ └── camerapreview
│ │ │ ├── CameraController.java
│ │ │ └── CameraService.java
│ │ └── resources
│ │ └── application.yml
└── frontend
└── vue-camera-app
├── src
├── public
└── package.json
二、Spring Boot 后端实现
1. Maven 依赖
在 pom.xml 中添加以下依赖：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
</dependencies>
2. 摄像头服务
在 CameraService.java 中实现与摄像头的连接和流传输逻辑：
package com.example.camerapreview;
import org.springframework.stereotype.Service;
@Service
public class CameraService {
private final String cameraIP = "your_camera_ip";
private final String username = "admin";
private final String password = "password";
public String getStreamUrl() {
// 根据具体的 ISUP 协议实现获取流的地址，此为示例：
return "rtsp://" + username + ":" + password + "@" + cameraIP + "/stream";
}
}
3. 控制器
在 CameraController.java 中创建一个 API 接口，返回摄像头的流地址：
package com.example.camerapreview;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class CameraController {
@Autowired
private CameraService cameraService;
@GetMapping("/stream")
public String getStream() {
return cameraService.getStreamUrl();
}
}
4. 配置文件
在 application.yml 中可以配置摄像头的相关信息：
spring:
application:
name: camera-preview
三、Vue 前端实现
在 Vue 前端中，我们将使用 <video> 标签来展示摄像头的实时预览流。
1. 安装 Axios
在 vue-camera-app 目录下，安装 Axios 以便进行 HTTP 请求：
npm install axios
2. 实现前端逻辑
在 src/components/CameraPreview.vue 中创建一个组件，并使用 Axios 获取摄像头的流 URL：
<template>
<div>
<h1>摄像头实时预览</h1>
<video ref="videoElement" controls autoplay></video>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
streamUrl: ''
};
},
mounted() {
this.getCameraStream();
},
methods: {
async getCameraStream() {
try {
const response = await axios.get('http://localhost:8080/stream');
this.streamUrl = response.data;
this.$refs.videoElement.src = this.streamUrl;
} catch (error) {
console.error('获取摄像头流失败', error);
}
}
}
}
</script>
<style scoped>
video {
width: 100%;
height: auto;
}
</style>
四、总结
本文介绍了如何通过 Spring Boot 后端实现海康威视摄像头的实时预览，并在 Vue 前端展示流。代码示例涵盖了后端的服务层和控制器，以及前端的组件及其逻辑。通过这种方式，我们可以方便地访问摄像头的实时视频流，为用户提供更好的监控体验。希望这篇文章对你的项目有所帮助！
