海康摄像头按需推流：Java + FFmpeg + Nginx-rtmp 浏览器播放

Thu, 15 Mar 2018 00:00:00 +0800

一、为什么浏览器不能直接播 RTSP

海康 / 大华等安防摄像头默认协议是 RTSP（Real Time Streaming Protocol），浏览器原生不支持 RTSP——Chrome / Edge / Firefox 都不行。

两条主流路径让浏览器能播摄像头：

RTSP → RTMP → Flash / HLS（老方案）—— 需 nginx-rtmp-module + video.js / videojs-flash
RTSP → WebRTC / HLS（新方案）—— 用 ZLMediaKit / MediaMTX / go2rtc 媒体网关，浏览器原生 video 标签

本文讲第一种老方案——因为很多 2018-2020 年的项目（GB28181 视频监控平台）仍依赖此架构，且控制粒度细（按需推流 = 节省服务器资源）。

二、整体流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


点击播放按钮
 ↓
1. 判断 ffmpeg 进程是否存在
 ↓ 存在
2. 获取进程 PID
3. 用 taskkill 关闭 ffmpeg（关流）
 ↓ 不存在
 ↓
4. 启动 ffmpeg 进程：rtsp → rtmp
 ↓
5. nginx-rtmp-module 接收 rtmp 流
 ↓
6. 浏览器用 video.js / vue-video-player 播放

关键点：

按需推流 = 不点就不推，ffmpeg 进程按需启动 / 关闭
FFmpeg = RTSP → RTMP 转协议 + 转封装
Nginx-rtmp-module = RTMP 服务端，支持 HLS / DASH 切片
vue-video-player = 浏览器播放器，带 RTMP 播放能力（需 videojs-flash 插件）

三、服务端部署

3.1 安装 Nginx + nginx-rtmp-module

Windows 编译 nginx-rtmp-module 较麻烦，推荐用现成的 Windows 集成版：

项目：nginx-rtmp-win32（GitHub 搜 nginx-rtmp-win32 或 nginx-rtmp-module-win32）
下载后解压到 D:\nginx-ffmpeg\

3.2 nginx.conf 配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


worker_processes 1;
events {
 worker_connections 1024;
}

# RTMP 服务
rtmp {
 server {
 listen 1935;
 chunk_size 4096;

 application live {
 live on;
 record off;

 # 推流后自动 HLS 切片
 hls on;
 hls_path D:/nginx-ffmpeg/hls;
 hls_fragment 5s;
 hls_playlist_length 30s;
 }
 }
}

# HTTP 服务（提供 HLS 播放）
http {
 include mime.types;
 default_type application/octet-stream;
 sendfile on;
 keepalive_timeout 65;

 server {
 listen 8080;
 server_name localhost;

 # 静态 HLS 文件
 location /hls {
 types {
 application/vnd.apple.mpegurl m3u8;
 video/mp2t ts;
 }
 root D:/nginx-ffmpeg/;
 add_header Cache-Control no-cache;
 }
 }
}

启动 nginx：

1
2


cd D:\nginx-ffmpeg
nginx.exe

测试 RTMP 端口：

1

Test-NetConnection localhost -Port 1935

3.3 安装 FFmpeg

官方：https://ffmpeg.org/download.html#build-windows
推荐：gyan.dev 出品的 ffmpeg-release-essentials.zip
解压到 D:\nginx-ffmpeg\ffmpeg\bin\

把 D:\nginx-ffmpeg\ffmpeg\bin\ 加到 PATH。

四、FFmpeg 推流命令

1
2
3


ffmpeg -i "rtsp://USERNAME:PASSWORD@IP:PORT/Streaming/Channels/<通道ID>" ^
 -b 4096k -f flv -r 25 -s 1920x1080 -an ^
 "rtmp://127.0.0.1:1935/live/<自定义名称>"

参数说明：

-i —— 输入 RTSP URL
-b 4096k —— 视频比特率 4 Mbps
-f flv —— 输出格式 FLV（RTMP 走 FLV 封装）
-r 25 —— 帧率 25 fps
-s 1920x1080 —— 分辨率
-an —— 去掉音频（RTMP 推摄像头画面不需要音轨）
最后是 RTMP URL，<自定义名称> 是 stream key

4.1 海康 RTSP URL 格式

1
2
3
4
5
6
7


rtsp://<username>:<password>@<ip>:<port>/Streaming/Channels/<channel_id>

# 主码流（高清）
rtsp://admin:password123@192.168.1.100:554/Streaming/Channels/101

# 子码流（流畅）
rtsp://admin:password123@192.168.1.100:554/Streaming/Channels/102

101 = 通道 1 主码流，102 = 通道 1 子码流。

五、Java 后端：调 FFmpeg 推流

5.1 项目结构

1
2
3
4


src/main/java/com/example/videoplay/
├── VideoPlayService.java # 服务类
├── StreamManager.java # 流管理（启停）
└── ...

5.2 ProcessBuilder 启动 FFmpeg

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52


import java.io.*;
import java.util.*;

public class StreamManager {

 /**
 * 启动 ffmpeg 推流
 * @param rtsp 摄像头 RTSP 地址
 * @param rtmp RTMP 推流地址
 * @param s 分辨率（如 "1920x1080"）
 * @return 启动的进程（用于后续关流）
 */
 public static Process openLiu(String rtsp, String rtmp, String s) {
 if (s == null) s = "1920x1080";

 ProcessBuilder builder = new ProcessBuilder();
 List<String> commend = new ArrayList<>();
 commend.add("D:/nginx-ffmpeg/ffmpeg/bin/ffmpeg.exe");
 commend.add("-i");
 commend.add(rtsp);
 commend.add("-f");
 commend.add("flv");
 commend.add("-r");
 commend.add("25");
 commend.add("-s");
 commend.add(s);
 commend.add("-an");
 commend.add(rtmp);

 builder.command(commend);
 builder.redirectErrorStream(true);

 try {
 return builder.start();
 } catch (IOException e) {
 e.printStackTrace();
 return null;
 }
 }

 /**
 * 关闭 ffmpeg 进程（关流）
 * @param pid ffmpeg 进程 PID
 */
 public static void closeLiu(String pid) {
 try {
 Runtime.getRuntime().exec("taskkill /F /PID " + pid);
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
}

5.3 获取 FFmpeg 进程 PID

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


/**
 * 查 ffmpeg 进程的 PID
 */
public static String getPid() {
 String pid = null;
 try {
 Process process = Runtime.getRuntime().exec(
 "tasklist /fi \"imagename eq ffmpeg.exe\" /fo list"
 );
 InputStream inputStream = process.getInputStream();
 BufferedReader bf = new BufferedReader(
 new InputStreamReader(inputStream, "GBK")
 );
 String line;
 while ((line = bf.readLine()) != null) {
 if (line.startsWith("PID")) {
 String[] array = line.split(":");
 pid = array[1].trim();
 }
 }
 } catch (Exception e) {
 e.printStackTrace();
 }
 return pid;
}

编码必须是 GBK——tasklist.exe 在中文 Windows 上输出是 GBK 编码，UTF-8 会乱码。

5.4 关流流程

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 1. 查进程是否存在
String pid = StreamManager.getPid();

if (pid != null) {
 // 2. 关流
 StreamManager.closeLiu(pid);
 // 3. 短暂等待 ffmpeg 退出
 Thread.sleep(500);
}

// 4. 推新流
Process process = StreamManager.openLiu(rtsp, rtmp, "1920x1080");

六、前端：Vue + vue-video-player

6.1 安装

1
2


npm install --save vue-video-player
npm install --save videojs-flash

6.2 组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60


<template>
 <videoPlayer
 ref="videoPlayer"
 :options="videoOptions"
 class="vjs-custom-skin videoPlayer"
 :playsinline="false"
 @play="onPlayerPlay()"
 />
</template>

<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'

export default {
 components: { videoPlayer },
 data() {
 return {
 videoOptions: {
 playbackRates: [0.7, 1.0, 1.5, 2.0],
 autoplay: false,
 muted: false,
 loop: false,
 preload: 'auto',
 language: 'zh-CN',
 aspectRatio: '16:9',
 techOrder: ['flash', 'html5'], // 兼容顺序
 sources: [{
 type: 'rtmp/hls',
 src: 'rtmp://127.0.0.1:1935/live/cam001' // 你的 RTMP 地址
 }],
 poster: '',
 notSupportedMessage: '此视频暂无法播放，请稍后再试',
 controlBar: {
 timeDivider: true,
 durationDisplay: true,
 remainingTimeDisplay: false,
 fullscreenToggle: true
 }
 }
 }
 },
 methods: {
 onPlayerPlay() {
 // 暂停其他视频
 this.$refs.videoPlayer.player.pause()

 // 调后端 API
 this.$http.get('/api/stream/play', {
 params: {
 rtsp: this.videoRtsp,
 rtmp: this.videoRtmp,
 fenbianlv: '1920x1080'
 }
 })
 }
 }
}
</script>

techOrder: ['flash', 'html5'] —— 优先 Flash（RTMP），回退 HTML5（HLS）。但 Chrome 88+ 已经彻底禁用 Flash，所以生产请直接用 HLS。

七、按需推流：点击播放事件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


onPlayerPlay() {
 this.$refs.videoPlayer.player.pause()

 // 1. 查流进程
 this.$http.get('/api/stream/isLiu').then(res => {
 const liuSta = res.data.result

 if (liuSta) {
 // 2. 进程存在 → 取 PID
 this.$http.get('/api/stream/getFFpid').then(res => {
 const pid = res.data.message

 // 3. 关流
 this.$http.post('/api/stream/closeLiu', { pid }).then(() => {

 // 4. 推新流
 this.$http.post('/api/stream/openLiu', {
 rtsp: this.videoRtsp,
 rtmp: this.videoRtmp,
 fenbianlv: '1920x1080'
 })
 })
 })
 } else {
 // 5. 进程不存在 → 直接推
 this.$http.post('/api/stream/openLiu', {
 rtsp: this.videoRtsp,
 rtmp: this.videoRtmp,
 fenbianlv: '1920x1080'
 })
 }
 })
}

八、生产级方案升级

8.1 RTMP → HLS 切片

nginx-rtmp-module 自动把 RTMP 切成 HLS 切片：

浏览器用 http://server:8080/hls/cam001.m3u8 播放
支持原生 video 标签，不用 Flash
延迟 5-10 秒（HLS 切片固定延迟）

8.2 用 ZLMediaKit 替代 nginx-rtmp

项目：https://github.com/ZLMediaKit/ZLMediaKit
支持 RTSP/RTMP/HLS/HTTP-FLV/WebRTC 全协议
延迟可调到 1 秒级
2018-2023 持续维护，生产首选

8.3 用 go2rtc 做"轻量转协议"

项目：https://github.com/alexxit/go2rtc
几乎零配置，Docker 一行起
支持 RTSP / RTMP / WebRTC / MSE / HLS 多协议转发

8.4 浏览器兼容性

协议	Chrome	Edge	Firefox	Safari
RTMP	❌（Flash 88+ 已删）	❌	❌	❌
HLS	❌	❌	❌	✅
HTTP-FLV	✅（via MSE）	✅	✅	❌
WebRTC	✅	✅	✅	✅

结论：生产请走 HLS（兼容 Safari）或 WebRTC（低延迟）。RTMP 已经是 2010 年代技术。

九、常见 5 个坑

RTSP URL 认证失败——海康 RTSP 默认需要先在摄像头后台开启 RTSP 服务（路径：网络 → 平台接入 → RTSP）
ffmpeg 推流卡顿——-b 4096k 太高，降到 2048k 或 1024k；或者 -c:v copy 不转码（前提是摄像头 H.264）
nginx-rtmp hls 切片生成失败——hls_path 目录nginx 没写权限
videojs-flash 加载失败——Chrome 88+ 不再支持 Flash，改用 videojs-http-streaming (VHS) 播 HLS
ffmpeg 进程关不掉——taskkill /F /PID 仍关不掉时，用 wmic process where "name='ffmpeg.exe'" call terminate

十、总结

老方案 = FFmpeg + nginx-rtmp + video.js / vue-video-player（2018-2020 经典）
新方案 = ZLMediaKit / MediaMTX / go2rtc 直接做 RTSP → HLS/WebRTC（2021+ 推荐）
按需推流 = 不点就不开 ffmpeg，省 CPU 省带宽
Java 调 FFmpeg 用 ProcessBuilder + tasklist /fi "imagename eq ffmpeg.exe" 查 PID + taskkill /F /PID
浏览器兼容：RTMP 已死（Flash 88+ 被删），走 HLS / WebRTC / HTTP-FLV
延迟排序：WebRTC (~500ms) < HTTP-FLV (~1s) < HLS (~5-10s) < RTMP (~1-2s)

RTMP on Liangweidong's blog