java 如何调用本机摄像头结合 Vue-CFANZ编程社区

整体思路

Java 部分使用 JavaCV 库来调用本机摄像头并捕获视频流，同时将视频流以某种形式（如通过 HTTP 服务）提供给前端。Vue 部分则通过 HTTP 请求获取视频流并在页面上进行展示。

Java 部分

1. 添加依赖

首先，你需要在 Java 项目中添加 JavaCV 相关依赖。如果你使用的是 Maven 项目，可以在 pom.xml 中添加以下依赖：

<dependencies>
    <dependency>
        <groupId>org.bytedeco</groupId>
        <artifactId>javacv-platform</artifactId>
        <version>1.5.6</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <version>2.7.5</version>
    </dependency>
</dependencies>

2. 编写 Java 代码

以下是一个简单的 Java 示例，使用 Spring Boot 创建一个 HTTP 服务，通过 JavaCV 调用本机摄像头并将视频帧以 MJPEG 流的形式返回给客户端：

import org.bytedeco.javacv.*;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.ByteArrayOutputStream;
import java.io.IOException;

@SpringBootApplication
@RestController
public class CameraApplication {

    public static void main(String[] args) {
        SpringApplication.run(CameraApplication.class, args);
    }

    @GetMapping("/video-stream")
    public ResponseEntity<byte[]> videoStream() throws IOException, FrameGrabber.Exception {
        OpenCVFrameGrabber grabber = new OpenCVFrameGrabber(0);
        grabber.start();

        FFmpegFrameRecorder recorder = new FFmpegFrameRecorder(new ByteArrayOutputStream(), grabber.getImageWidth(), grabber.getImageHeight());
        recorder.setVideoCodec(avcodec.AV_CODEC_ID_MJPEG);
        recorder.setFormat("mjpeg");
        recorder.setFrameRate(grabber.getFrameRate());
        recorder.start();

        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        Frame frame;
        while ((frame = grabber.grab()) != null) {
            recorder.record(frame);
            byte[] data = ((FFmpegFrameRecorder.FFmpegFrameOutputStream) recorder.getOutput()).toByteArray();
            outputStream.write(data);
            outputStream.reset();
        }

        grabber.stop();
        recorder.stop();

        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.parseMediaType("multipart/x-mixed-replace; boundary=frame"));
        return new ResponseEntity<>(outputStream.toByteArray(), headers, HttpStatus.OK);
    }
}

这段代码创建了一个 Spring Boot 应用，其中 /video-stream 接口用于返回摄像头的视频流。

Vue 部分

1. 创建 Vue 项目

如果你还没有 Vue 项目，可以使用 Vue CLI 创建一个新的项目：

vue create camera-app
cd camera-app

2. 编写 Vue 代码

在 src/components 目录下创建一个 Camera.vue 组件：

<template>
  <div>
    <img :src="videoStreamUrl" alt="Camera Stream">
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoStreamUrl: 'http://localhost:8080/video-stream'
    };
  }
};
</script>

<style scoped>
img {
  width: 100%;
  height: auto;
}
</style>

然后在 src/App.vue 中引入并使用该组件：

<template>
  <div id="app">
    <Camera />
  </div>
</template>

<script>
import Camera from './components/Camera.vue';

export default {
  name: 'App',
  components: {
    Camera
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行项目

1. 运行 Java 项目

在 IDE 中运行 CameraApplication 类的 main 方法，启动 Spring Boot 应用。

2. 运行 Vue 项目

在终端中进入 Vue 项目目录，运行以下命令启动开发服务器：

npm run serve

注意事项

权限问题：在某些操作系统中，Java 程序调用摄像头可能需要相应的权限。确保你的程序具有访问摄像头的权限。
性能问题：通过 MJPEG 流传输视频可能会消耗较多的带宽和资源，在实际应用中可以考虑使用更高效的视频编码格式。
跨域问题：如果 Java 服务和 Vue 应用运行在不同的端口或域名下，可能会遇到跨域问题。可以在 Spring Boot 中配置 CORS 来解决这个问题。