springboot+vue+ ffmpeg实现视频的拉流播放详解

ffmpeg -rtsp_transport tcp \
  -i "rtsp://admin:密码@192.168.1.100:554/stream1" \
  -c:v libx264 -preset ultrafast -tune zerolatency \
  -c:a aac \
  -f hls \
  -hls_time 2 \
  -hls_list_size 5 \
  -hls_flags delete_segments \
  -hls_segment_filename "/opt/hls/stream_%03d.ts" \
  /opt/hls/stream.m3u8

@Service
public class FfmpegService {

    private Process ffmpegProcess;
    private static final String HLS_DIR = "/opt/hls/";
    // Windows 改成 "C:\\ffmpeg\\bin\\ffmpeg.exe"

    public synchronized void startStream(String rtspUrl) throws IOException {
        stopStream(); // 先停旧进程

        new File(HLS_DIR).mkdirs();

        List<String> cmd = new ArrayList<>();
        cmd.add("ffmpeg");
        cmd.addAll(List.of("-rtsp_transport", "tcp"));
        cmd.addAll(List.of("-i", rtspUrl));
        cmd.addAll(List.of("-c:v", "libx264", "-preset", "ultrafast", "-tune", "zerolatency"));
        cmd.addAll(List.of("-c:a", "aac"));
        cmd.addAll(List.of("-f", "hls", "-hls_time", "2", "-hls_list_size", "5"));
        cmd.addAll(List.of("-hls_flags", "delete_segments"));
        cmd.addAll(List.of("-hls_segment_filename", HLS_DIR + "stream_%03d.ts"));
        cmd.add(HLS_DIR + "stream.m3u8");

        ProcessBuilder pb = new ProcessBuilder(cmd);
        pb.redirectErrorStream(true);
        ffmpegProcess = pb.start();

        // 异步消费 FFmpeg 输出，防止阻塞
        new Thread(() -> {
            try (BufferedReader br = new BufferedReader(
                    new InputStreamReader(ffmpegProcess.getInputStream()))) {
                while (br.readLine() != null) {}
            } catch (IOException ignored) {}
        }).start();
    }

    public synchronized void stopStream() {
        if (ffmpegProcess != null && ffmpegProcess.isAlive()) {
            ffmpegProcess.destroyForcibly();
        }
    }
}

@RestController
@RequestMapping("/api/stream")
public class StreamController {
    @Autowired
    private FfmpegService ffmpegService;

    @PostMapping("/start")
    public String start(@RequestParam String rtsp) throws IOException {
        ffmpegService.startStream(rtsp);
        return "started";
    }

    @PostMapping("/stop")
    public String stop() {
        ffmpegService.stopStream();
        return "stopped";
    }
}

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 访问 http://ip:8080/hls/stream.m3u8
        registry.addResourceHandler("/hls/**")
                .addResourceLocations("file:/opt/hls/");
    }
}

npm install video.js hls.js

<template>
  <div>
    <video ref="videoEl" id="my-video" class="video-js vjs-default-skin"
           controls width="800" height="450">
    </video>
    <button @click="play">开始播放</button>
  </div>
</template>
<script setup>
import { ref, onBeforeUnmount } from 'vue'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
const videoEl = ref(null)
let player = null
const play = () => {
  if (player) player.dispose()
  player = videojs(videoEl.value, {
    sources: [{
      src: 'http://localhost:8080/hls/stream.m3u8',
      type: 'application/x-mpegURL'
    }]
  })
}
onBeforeUnmount(() => {
  player?.dispose()
})
</script>