一招解决SpringBoot+Vue监控视频RTSP播放

前端

2023-04-19 10:57:08

利用 SpringBoot + Vue 轻松实现监控视频 RTSP 播放

背景

在实际项目中，网页上播放监控视频的需求十分常见，而这些视频往往采用 RTSP 格式。传统开发方式需要借助复杂的组件或框架，但随着 SpringBoot 和 Vue 的兴起，我们有了更简便的解决方案。

解决方案

SpringBoot + Vue 监控视频 RTSP 播放解决方案如下：

后端服务： 使用 SpringBoot 搭建后端服务，处理来自前端的播放请求。
视频转换： 使用 ffmpeg 将 RTSP 视频流转换为 FLV 格式。
视频推流： 利用 Nginx 将 FLV 视频流推送到前端。
前端播放： 使用 flv.js 在前端播放 FLV 视频流。

具体步骤

1. 搭建 SpringBoot 后端服务

@RestController
public class VideoController {

    @GetMapping("/play")
    public void play(@RequestParam String url) {
        // 将 RTSP 视频流转换为 FLV 格式
        String command = "ffmpeg -i " + url + " -f flv -c:v libx264 -c:a aac -strict -2 " + "/tmp/video.flv";
        Process process = Runtime.getRuntime().exec(command);

        // 将 FLV 视频流推送到前端
        String nginxCommand = "nginx -c /usr/local/nginx/conf/nginx.conf";
        Process nginxProcess = Runtime.getRuntime().exec(nginxCommand);

        // 等待 ffmpeg 和 nginx 进程结束
        try {
            process.waitFor();
            nginxProcess.waitFor();
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

2. RTSP 视频流转换为 FLV 格式

ffmpeg -i rtsp://192.168.1.100/live/ch01 -f flv -c:v libx264 -c:a aac -strict -2 /tmp/video.flv

3. Nginx 视频推流配置

server {
    listen 80;
    server_name localhost;

    location /video {
        flv {
            video_buffer_size 1024k;
            max_connections 1024;
        }
    }
}

4. 前端 FLV 视频流播放

var video = document.getElementById('video');
var flvPlayer = flvjs.createPlayer({
    type: 'flv',
    url: 'http://localhost/video'
});
flvPlayer.attachMediaElement(video);
flvPlayer.load();
flvPlayer.play();