海康IPC+ffmpeg+nginx+ckplayer实现网页实时预览监控视频

本文介绍如何通过ffmpeg将支持RTSP协议的IPC摄像头流转换为RTMP格式,并利用nginx发布,最终通过ckplayer实现在网页上的播放。

第一次接触摄像头  捣腾了好几天  现在记录下搭建过程 以免忘掉

实现思路和其他大神的基本一致 :1.通过IPC的rtsp协议获取rtsp流  2.使用ffmpeg转成rtmp协议  3.通过nginx发布rtmp流  4.使用ckplayer播放


一、准备:

1.海康IPC

2.交换机

3.笔记本充当服务器

4.ffmpeg  

下载地址:https://ffmpeg.zeranoe.com/builds/win64/static/ffmpeg-20170321-db7a05d-win64-static.zip

5.已安装过nginx-rtmp-module功能的nginx

由于本人只是个C#小呆而已  因此网上大神们安装nginx-rtmp-module的方法我完全看不懂,经过一天翻遍某度  终于找到了别人已安装好的  

下载地址:https://codeload.github.com/illuspas/nginx-rtmp-win32/zip/master 

这个版本的nginx已经帮我们把rtmp协议配置好了

(感谢csdn博主mengzhengjie的文章http://blog.youkuaiyun.com/mengzhengjie/article/details/50969016)

6.ckplayer

下载地址:百度网盘http://pan.baidu.com/s/1kVsJXJp

7.java或.net或php或dw等web开发工具(用于测试实现效果)

8.vlc

下载地址:http://sw.bos.baidu.com/sw-search-sp/software/c2904cc7121e0/vlc_2.2.4.0.exe

可播放rtsp和rtmp流的播放器  用来测试


二、rtsp流 

海康IPC支持通过rtsp协议进行流传输,因此获取流非常方便,取流地址为:rtsp://admin:12345@192.168.1.102:554/h264/ch1/main/av_stream

其中,admin和12345是登录IPC的用户名和密码,@后面跟IPC的IP地址,端口号默认为554,如果修改过,这里填修改后的端口号。只要是支持rtsp协议的IPC都可以通过类似方式取流,各厂商的格式可能略有不同,请查阅各厂商的相关说明

连接好IPC、电脑、交换机后,打开vlc播放器,选择媒体-->打开网络串流-->填入rtsp协议-->播放,如果连接和参数正确,此时vlc应该可以播放监控画面



三、安装ffmpeg

通过第一步我们确认了rtsp流可以正确获取后,第二步我们安装ffmpeg,用于rtsp流转rtmp流

ffmpeg是一个功能非常强大的视频处理工具,居家旅行学习开发必备,注意,ffmpeg需要区分32位和64位,请根据自己操作系统进行选择

下载解压后得到如下文件夹结构

配置环境变量:将x:/ffmpeg/bin添加到Path中,具体添加方法大家可查看java配置jdk的方法,网上很多

测试ffmpeg:打开cmd(使用管理员身份打开),输入:ffmpeg  获取到如下图所示界面,说明ffmpeg安装成功

四、nginx搭建

nginx我的理解有点类似iis的功能,是个信息管理器(如果不对,请大神斧正),原版的nginx是不带有rtmp发布功能的,需要安装nginx-rtmp-module插件,网上的方法很多,但是由于我看得一脸懵逼,所以花了好久找到已安装好插件的nginx,链接已奉上,这个我们就可以直接用了

将压缩包解压到任意位置,进入conf文件夹,打开nginx.conf文件,找到http{server{listen,将端口号改成10001(只要没有被占用的端口都可以,我习惯1w+),顺便看看有个rtmp{server{listen1935,这个就是发布rtmp流的端口,后面会用到

保存nginx.conf,双击nginx.exe,一闪而过,不知道啥情况,看看任务管理器

发现有两个nginx.exe,说明启动成功,启动失败多半是端口被占用,cmd:netstat -a 查看端口占用情况,如果nginx成功启动,那么10001和1935也会被占用

至此,nginx成功搭建


五、rtsp转rtmp

搭建好nginx,说明通过ffmpeg转换的rtmp流有地方接收了,这一步我们就来转流

打开cmd输入以下指令:

ffmpeg -i "rtsp://admin:12345@192.168.1.102:554/h264/ch1/main/av_stream" -f flv -r 1 -s 1920x1080 -an "rtmp://192.168.1.100:1935/live/stream"

rtsp://是IPC取流的协议地址,rtmp则是刚才搭建nginx的地址,这个1935端口就是刚才配置nginx时看到的rtmp端口,输入后首先会看到关于ffmpeg的一些信息,出现如下界面则说明ffmpeg已成功将rtmp流推送到了nginx

最下面一排就是事实转流和发送的信息,红色的是错误信息,我的有丢包现象

我们再打开vlc播放器,测试下是否可以成功播放rtmp流,方法依然是打开vlc,填入:rtmp://192.168.1.100:1935/live/stream 播放,如果可以看到监控画面说明成功


六、网站播放

前面我们已经拿到rtmp流,最后我们将流通过ckplayer在网页上进行播放,使用ckplayer请移步到:http://www.ckplayer.com/tool/help/100.htm


至此,通过ffmpeg+nginx+ckplayer将支持rtsp协议的IPC在网页上播放的工作基本完成,其实还有很多技术处理需要去细化,如ffmpeg在处理多条rtsp流时,效率如何,丢包情况如何处理,nginx配置多个rtmp流等等,后续有进展再写bk进行补充

<think>我们面对的问题是如何将大华和海康摄像头的RTSP视频流转换为适合在浏览器和移动设备上播放的格式(如RTMP, HLS, FLV等),并实现实时监控和回放功能。根据引用[3]和[4],我们可以采用以下方案: 1. 使用FFmpegRTSP流转换为HLS、FLV或RTMP流。 2. 使用Node.js作为中间层,调用FFmpeg进行转码和推流。 3. 使用一个流媒体服务器(如Node-Media-Server)来接收转码后的流并分发给客户端。 4. 客户端通过HTML5视频标签或相应的播放器播放流。 具体步骤: ### 1. 安装FFmpeg 确保服务器上安装了FFmpeg。可以通过官网下载或使用包管理器安装。 ### 2. 安装Node.js和Node-Media-Server 创建一个Node.js项目,并安装Node-Media-Server: ```bash npm install node-media-server ``` ### 3. 创建Node.js服务器 创建一个`server.js`文件,配置Node-Media-Server: ```javascript const NodeMediaServer = require('node-media-server'); const config = { rtmp: { port: 1935, chunk_size: 60000, gop_cache: true, ping: 30, ping_timeout: 60 }, http: { port: 8000, allow_origin: '*' } }; var nms = new NodeMediaServer(config); nms.run(); ``` ### 4. 使用FFmpeg转码并推流到Node-Media-Server 对于每个摄像头,启动一个FFmpeg进程,将RTSP流转换为RTMP流并推送到本地Node-Media-Server。例如,对于大华摄像头: ```bash ffmpeg -rtsp_transport tcp -i "rtsp://admin:password@192.168.1.101/cam/realmonitor?channel=1&subtype=0" -c:v libx264 -preset ultrafast -tune zerolatency -f flv rtmp://localhost/live/stream1 ``` 这里,我们使用TCP传输(更稳定),输入为RTSP流,输出为RTMP流到本地的`live`应用,流名称为`stream1`。 ### 5. 前端播放 前端可以使用支持RTMP或HTTP-FLV、HLS的播放器。例如,使用video.js播放HLS流: HTML: ```html <video id="player" class="video-js vjs-default-skin" controls> <source src="http://localhost:8000/live/stream1.m3u8" type="application/x-mpegURL"> </video> ``` JavaScript: ```javascript var player = videojs('player'); player.play(); ``` ### 6. 优化与扩展 - 对于多个摄像头,可以动态生成FFmpeg命令和对应的流名称。 - 为了降低延迟,可以调整FFmpeg参数(如使用`-preset ultrafast -tune zerolatency`)和HLS切片大小(如引用[3]中的`-hls_time 4`表示4秒一个切片)。 - 考虑安全性,可以对流进行鉴权。 ### 注意事项 - 海康和大华的RTSP地址格式可能不同,需要根据具体设备调整。 - 确保服务器有足够的性能处理多个视频流的转码。 ### 引用说明 [^1]: 用户需求:将RTSP流转换为浏览器和移动端可播放的格式。 [^2]: 海康威视提供了多种查看方式,包括RTSP等协议取流。 [^3]: 大华摄像头的HLS方案示例。 [^4]: 使用RTSP+FFmpeg+Node.js实现实时监控视频分发播放。 §§相关问题§§ 1. 如何降低HLS视频流的延迟? 2. 如何实现多路摄像头的视频流同时播放? 3. 如何对视频流进行鉴权以增强安全性? 4. 除了HLS,还有哪些低延迟的流媒体协议可以在浏览器中使用?</think>### 如何实现RTSP+FFmpeg+Node.js实时视频监控分发 #### 一、核心架构流程 ```mermaid graph LR A[摄像头] -->|RTSP流| B(FFmpeg转码) B -->|HLS/FLV流| C(Node-Media-Server) C --> D[Web前端播放] C --> E[移动端播放] ``` #### 二、具体实现步骤 1. **环境准备** - 安装FFmpeg:`sudo apt install ffmpeg` - Node.js环境:`npm init -y` - 安装关键依赖: ```bash npm install node-media-server fluent-ffmpeg ``` 2. **流媒体服务器配置 (server.js)** ```javascript const NodeMediaServer = require('node-media-server'); const config = { rtmp: { port: 1935, chunk_size: 60000, gop_cache: true }, http: { port: 8000, allow_origin: '*' } // 允许跨域 }; const nms = new NodeMediaServer(config); nms.run(); ``` 3. **RTSP转码推流脚本 (stream.js)** ```javascript const ffmpeg = require('fluent-ffmpeg'); // 海康摄像头RTSP地址格式 const hikvisionRTSP = 'rtsp://admin:your_password@192.168.1.100/Streaming/Channels/101' // 大华摄像头RTSP地址格式 const dahuaRTSP = 'rtsp://admin:your_password@192.168.1.101/cam/realmonitor?channel=1&subtype=0' const startStream = (rtspUrl, streamName) => { ffmpeg(rtspUrl) .inputOptions('-rtsp_transport', 'tcp') // TCP传输更稳定 .videoCodec('libx264') .audioCodec('aac') .format('flv') // 转FLV格式 .output(`rtmp://localhost/live/${streamName}`) .on('start', () => console.log(`Stream ${streamName} started`)) .run(); } // 启动两个摄像头流 startStream(hikvisionRTSP, 'hik1'); startStream(dahuaRTSP, 'dahua1'); ``` 4. **前端播放器 (HTML)** ```html <video id="player" controls width="640" height="360"></video> <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script> <script> if (flvjs.isSupported()) { const player = flvjs.createPlayer({ type: 'flv', url: 'http://localhost:8000/live/dahua1.flv' }); player.attachMediaElement(document.getElementById('player')); player.load(); player.play(); } </script> ``` #### 三、关键参数说明 1. **RTSP地址规范**: - 海康格式:`rtsp://[用户名]:[密码]@[IP]/Streaming/Channels/[通道号]` - 大华格式:`rtsp://[用户名]:[密码]@[IP]/cam/realmonitor?channel=1&subtype=0` 2. **FFmpeg优化参数**: ```bash -preset ultrafast # 最快编码速度 -tune zerolatency # 零延迟优化 -g 60 # 关键帧间隔 -frag_duration 1000 # HLS切片时长(ms) ``` #### 四、部署运行 1. 启动媒体服务器:`node server.js` 2. 启动转码推流:`node stream.js` 3. 访问前端页面:`http://localhost:8000` #### 五、性能优化建议 1. **硬件加速**: - 使用NVIDIA GPU加速:`-c:v h264_nvenc` - Intel QSV加速:`-c:v h264_qsv` 2. **负载均衡**: ```javascript // 多进程转码 const { fork } = require('child_process'); fork('./stream.js', ['hik1']); fork('./stream.js', ['dahua1']); ``` 3. **安全加固**: - RTSP流添加IP白名单 - 前端播放器集成JWT鉴权 - 使用HTTPS加密传输 > **注意事项**:实际延迟约1-3秒,TCP传输模式比UDP更稳定但增加约30%带宽占用[^3]。建议内网带宽≥摄像头数量×2Mbps[^1]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值