尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

大华摄像头网页播放Demo:RTSP取流到HLS播放的完整实践

发布时间:2026/9/29 21:09:28

资讯中心
01
ARTICLE

大华摄像头网页播放Demo:RTSP取流到HLS播放的完整实践

大华摄像头网页播放Demo:RTSP取流到HLS播放的完整实践
简介面向安防监控与物联网开发者这份基于大华NetSDK的Demo演示了Java后端如何获取IPC网络摄像头视频流经过必要的码流处理与转发最终实现在前端界面中的实时播放并衔接NVR录像机的常见应用场景。资源为完整可运行的工程解压后共1852个文件核心由1810个Java源文件构成辅以Vue前端组件、XML/Properties配置、JS/CSS静态资源及Maven包装器mvnw、jar等整体约1.74MB目录结构按后端、前端、配置划分便于定位与复用。目前已有1993人参与学习。通过该Demo可掌握大华设备SDK的接口调用流程、视频码流的拉取与推送机制、前端播放协议如WebSocket、RTSP的集成方式还能参考其安全认证与性能优化思路。涵盖H.264/H.265码流解码与转推等常见处理环节。对于需要快速搭建网络摄像头播放功能、或理解IPC/NVR联动逻辑的Java工程师这是一份高价值的入门实践资料。1. 大华网络摄像头视频播放Demo从RTSP取流到网页播放的完整链路做监控项目的人应该都经历过这一幕摄像头装好了、NVR也配好了领导要你在网页上看画面结果浏览器一片黑。大华网络摄像头视频播放Demo解决的就是这件事——它把大华IPC/NVR的RTSP流取出来、转成浏览器能吃的协议、再通过播放器拉出来覆盖了从取流地址拼写到前端播放的完整链路。适合做安防集成、智慧工地、连锁门店监控这类项目的开发也适合刚接触IPC取流、想搞明白主码流和子码流到底怎么用的人。下文所有命令和代码我在大华IPC和NVR上都跑过坑先写在前面。2. 大华的流地址不是玄学主码流、子码流与RTSP参数拆解2.1 大华RTSP地址的标准格式与channel/subtype含义大华网络摄像头IPC和网络录像机NVR取流最常用的是RTSP协议。大华的RTSP地址格式是固定的rtsp://用户名:密码IP地址:端口/cam/realmonitor?channel通道号subtype码流类型一个实际能跑的地址长这样rtsp://admin:Admin123192.168.1.108:554/cam/realmonitor?channel1subtype0几个参数逐个说。用户名和密码是摄像头或NVR的登录账号不是设备序列号密码里有、:这类特殊字符时需要做URL编码比如要写成%40不然整条地址会被解析错。IP地址是设备的IP跨网段时确保路由通如果用NVR取流IP填NVR的IP通道由channel参数决定。端口默认554做公网映射时这里填映射后的端口。channel是通道号大华从1开始算单IPC只有1NVR接多路摄像头就是1、2、3……没有channel0这种写法。subtype是码流类型0是主码流1是子码流这是大华格式里最容易被忽略的参数拼地址时写错一个数字画面效果天差地别。提示部分老设备也支持ONVIF标准取流地址rtsp://IP:554/onvif1但大华自家摄像头用realmonitor格式最稳ONVIF格式在部分固件上会丢帧。主机名后面的路径是区分品牌的关键。海康威视是/Streaming/Channels/101101表示通道1主码流、102表示通道1子码流大华是/cam/realmonitor加query参数。项目里同时接两家设备时第一件事就是把每个品牌的地址模板各存一份直接拼容易混。2.2 主码流和子码流预览、录像、回放各自该用哪一路主码流与子码流的本质区别可以看这张表项主码流subtype0子码流subtype1典型分辨率400万下2560×1440或1080P640×360 / 704×576典型码率2~8 Mbps0.2~1 Mbps主要用途录像、回放、单路大画面多路预览、移动端省流解码开销高低延迟表现取决于设备编码参数普遍更流畅这张表不是随便列的它直接决定了Demo怎么设计。做单路播放Demo很多人图省事直接上主码流看着清晰但一到多路网格预览就翻车——4路主码流同时解码普通i5机器CPU就飙到90%了。正确的习惯应该是多路预览全部拉子码流点击某一路放大时再切换主码流回放录像用主码流保清晰度。另外要留意帧率和I帧间隔。大华设备后台一般默认25fpsPAL制式I帧间隔建议设成50也就是两秒一个关键帧。这个值影响的是播放器起播速度和断流恢复速度——I帧间隔越大视频越省码率但切换通道或网络抖动后要等下一个I帧才能出画面体感就是黑屏了2秒。2.3 端口、用户名与权限取流前必须确认的三件事取流失败时先别怀疑代码先把设备侧这三件事确认了90%的问题能原地解决。第一端口是否可达。本地测试用ping和telnet IP 554确认RTSP端口通不通。公网环境如果做了端口映射注意有些路由器会把554映射到某个高位端口。我之前接过一个项目客户只映射了80端口画面自然是黑的加一条554映射立刻就好。第二用户名权限。大华设备默认的admin账号有完整权限如果是后来添加的子账号务必确认“允许通过RTSP取流”这一项被勾上。部分固件里子账号默认连实时预览权限都没有流都拉不到更别提播放。第三码流是否开启。有些摄像头为省资源子码流默认是关闭的。你拉子码流黑屏切主码流反而正常先进设备Web后台确认子码流编码开关不要上来就改代码。确认完这三项可以用VLC临时验一下地址。VLC能放说明设备侧没问题问题在你自己代码里VLC也黑屏那先回去查网络和权限。3. 播放方案选型大华网页插件、HLS转流还是WebRTC3.1 大华网页插件老项目最稳但浏览器受限大华官方有网页播放插件本质是一个ActiveX控件或浏览器插件。在IE浏览器、或者Edge的IE兼容模式下通过插件可以直连启用了安全登录的设备不需要自己拉流转码。这个方案最大的优势是直接插件内部封装了取流、解码、渲染页面里几行代码就能出画面。但它的问题也很明显——只能跑Windows IE/Edge兼容模式Chrome和Firefox要么装扩展要么直接不支持而且ActiveX控件在64位浏览器里常出问题得强制用32位IE。现状是老安防项目尤其是早期政府、园区项目大量还在用这种插件但新项目基本没人主动选它了。我的建议是你可以在Demo里预留插件模式但不要把项目押在插件上。如果客户明确要求“网页打开直接看不装任何东西”直接走下面两种方案。3.2 HLS转流实现成本最低的浏览器兼容方案HLSHTTP Live Streaming是苹果推的协议把视频切片成一个个ts小文件通过HTTP传输浏览器原生video标签或hls.js就能播放。实现方式很常规用FFmpeg把大华的RTSP流拉进来切成ts切片输出成m3u8索引前端用hls.js拉m3u8。链路是大华IPC/NVR RTSP流 → FFmpeg转HLS → Web服务器/流媒体服务 → 浏览器hls.js播放优点一句话总结不用装插件、不用折腾WebSocket、手机上也能看适配成本最低。缺点是切片天然带来延迟hls_time设得再小端到端延迟也在3~10秒量级。这个延迟对监控预览可以接受但对遥控云台这种交互场景就明显“跟手”跟不上。3.3 WebRTC与流媒体服务器低延迟多路场景的正解如果你要的是“点开就出画面、延迟2秒内、同时放9路”HLS撑不住插件又太老那就得走WebRTC或HTTP-FLV这类低延迟方案。业界常见做法是用ZLMediaKit或SRS这类流媒体服务器一端接入RTSP另一端分发WebRTC或HTTP-FLV。前端拉流用现成的播放器库Chrome、Safari都能跑延迟能压到1秒以内。这个方案技术栈多了一层服务器实施成本比HLS高但换来的是延迟和并发能力的本质提升。要注意流媒体服务器的部署不是“解压即用”需要调端口、鉴权、并发上限首次搭环境建议给足半天时间。3.4 三个方案对比与决策依据把三个方案放一起看方案浏览器兼容端到端延迟实施成本多路并发适用场景大华网页插件仅IE/Edge兼容模式低低中老项目维护、单机DemoFFmpeg HLS全兼容含移动端3~10秒低中PC/大屏监控、多路预览流媒体服务器 WebRTC现代浏览器0.5~2秒高高云台控制、低延迟对讲、高并发决策依据就三条客户给什么浏览器、延迟能不能大于3秒、同时看几路。浏览器是IE就老实插件或HLS延迟敏感就WebRTC预算有限且能容忍几秒延迟HLS是性价比之王。下面第4章的Demo就是按“RTSP取流验证 FFmpeg转HLS hls.js播放”这条最通用的链路来写的实测一路1080P主码流单台4核8G的服务器转4路没问题。4. Demo落地取流验证、转流与播放代码一步步跑通4.1 用ffprobe和OpenCV验证RTSP是否可取、参数是否对写任何播放代码之前我强烈建议先用ffprobe裸验一次地址把设备和网络问题隔离掉。ffprobe -rtsp_transport tcp -timeout 5000000 \ -i rtsp://admin:Admin123192.168.1.108:554/cam/realmonitor?channel1subtype1 \ -show_streams -show_format 21 | grep -E codec_name|width|height|bit_rate这条命令要表达的意思是强制走TCP传输-rtsp_transport tcp避免UDP丢包导致探测失败-timeout 5000000单位是微秒也就是5秒超时-show_streams输出编码器、分辨率信息。如果走到这里能正常列出h264、resolution等信息说明地址、账号、端口全通可以直接进入播放环节。如果卡住或报401先回第2章复查权限。接着用Python OpenCV做一个最短的取流验证逻辑上等价于VLC打开一次import cv2 rtsp_url rtsp://admin:Admin123192.168.1.108:554/cam/realmonitor?channel1subtype1 # CAP_FFMPEG 指定走FFmpeg后端避免不同编译版本的OpenCV行为不一致 cap cv2.VideoCapture(rtsp_url, cv2.CAP_FFMPEG) if not cap.isOpened(): raise SystemExit(取流失败先检查IP/端口/账号密码/通道号) # 把缓冲区压到1帧降低解码带来的延迟累积 cap.set(cv2.CAP_PROP_BUFFERSIZE, 1) for i in range(30): ret, frame cap.read() if not ret: print(f第{i1}帧读取失败连接可能被断开) break if i 0: h, w frame.shape[:2] print(f首帧 OK分辨率 {w}x{h}) cap.release()这里有两处值得展开。第一cv2.CAP_PROP_BUFFERSIZE这个参数很关键。OpenCV默认会缓存几帧本地文件无所谓但实时流一旦缓存累积画面就会越来越滞后把缓冲区设成1是实时播放的基本操作。第二取流成功不代表播放不卡这里只拉30帧是为了验证“流是通的、编码是H.264、分辨率正确”真正的播放能力要看后面的转流环节。如果OpenCV这个脚本能打出分辨率、但画面偶尔花屏大概率是网络丢包把传输方式改成TCP再试。OpenCV里加传输参数不方便时就直接用下面4.2的FFmpeg方式验证。4.2 FFmpeg把RTSP转成HLS命令参数与含义设备侧验证通过后开始真正的转流。先明确职责FFmpeg负责从大华设备拉流并切片Web服务器负责给浏览器提供m3u8和ts文件。开发测试阶段最简单直接让FFmpeg把切片输出到Nginx的html目录或本地目录即可。转HLS的常用命令如下ffmpeg -rtsp_transport tcp -stimeout 5000000 \ -i rtsp://admin:Admin123192.168.1.108:554/cam/realmonitor?channel1subtype1 \ -c:v copy -c:a aac -f hls \ -hls_time 2 -hls_list_size 3 -hls_flags delete_segments \ -hls_segment_filename live_%03d.ts \ live.m3u8逐项说明参数含义-rtsp_transport tcp指定走TCP拉流。UDP延迟稍低但公网丢包率高转流服务器最好固定用TCP丢包后FFmpeg会自己重传。-stimeout 5000000网络超时5秒设备异常时FFmpeg能快速退出而不是一直挂死。-c:v copy视频流直接拷贝不重新编码CPU占用极低。前提是摄像头输出H.264且切片能兼容如果是H.265部分浏览器播不了就得加-c:v libx264重新编码。-c:a aac把音频转成AAC因为ts切片里放原始音频兼容性差。带宽不足或只要画面时可以加-an直接把音频去掉。-hls_time 2每2秒一个切片切片越小起播越快、延迟越低但ts文件数量多磁盘碎片也多。监控场景建议2~4秒。-hls_list_size 3m3u8索引文件只保留最近3个切片这是直播和录像的关键区别——直播不需要保留全量切片列表。-hls_flags delete_segments播放过的切片随即删除不然跑一天磁盘就满了。如果之后要接回放功能把这个flag去掉另存切片。注意CtrlC退出FFmpeg会生成一个带EXT-X-ENDLIST的m3u8前端hls.js会认为直播结束下次再启动服务时记得删掉旧m3u8再拉。这段命令跑起来后目录下会出现live.m3u8和一连串live_000.ts文件说明转流成功下一步接前端。4.3 前端用hls.js播放最小可运行代码浏览器端用hls.js拉m3u8是因为原生video标签对HLS的支持只在Safari上Chrome/Edge需要hls.js这个库。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title大华摄像头直播Demo/title /head body video idplayer controls autoplay muted stylewidth: 100%; max-width: 1280px;/video script srchttps://cdn.jsdelivr.net/npm/hls.js1/dist/hls.min.js/script script const video document.getElementById(player); // m3u8由FFmpeg或流媒体服务器生成域名换成你自己的 const sourceUrl http://your-server.com/live/live.m3u8; if (Hls.isSupported()) { const hls new Hls({ lowLatencyMode: true, liveSyncDuration: 2, // 距直播边缘的秒数越小延迟越低但越容易卡 liveMaxLatencyDurationCount: 5 }); hls.loadSource(sourceUrl); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED, function() { video.play(); }); } else if (video.canPlayType(application/vnd.apple.mpegurl)) { // Safari走原生HLS不用hls.js video.src sourceUrl; video.play(); } /script /body /html代码里有三个点要解释。muted属性是自动播放政策要求的浏览器不允许有声视频自动播放监控页面做成默认静音、用户点开后出声音是常规做法。lowLatencyMode开启后hls.js会尽量靠近直播边缘拉片延迟更低但网络抖动时更容易转菊花所以要在延迟和稳定性之间取平衡。liveSyncDuration如果设成1画面基本实时但极容易缓冲设成5以上稳定但延迟大我一般在2左右开始调。把FFmpeg输出的目录配到Nginx静态目录浏览器访问这个HTML出现画面就说明整条链路已经通了。4.4 大华NetSDK播放接口桌面端Demo的另一种形态如果你的需求不是网页而是桌面工具大华官方提供的是NetSDKWindows/Linux都有C接口。跟RTSP完全两条技术路线NetSDK走的是大华私有协议默认37777端口直接连设备登录后按通道拉流。用NetSDK做播放Demo的核心步骤就三步登录、取流、渲染。// 登录设备 NET_DEVICEINFO_Ex stDevInfo {0}; LLONG lLoginID CLIENT_LoginWithHighLevelSecurity( 192.168.1.108, 37777, admin, Admin123, stDevInfo, nError); if (lLoginID 0) { printf(login failed, error code: %d\n, nError); return -1; } // 配置实时播放参数并创建播放句柄 NET_IN_REALPLAY_INFO stPlayInfo {0}; stPlayInfo.nChannelID 0; // 注意SDK里通道从0开始和RTSP地址里channel1不是一回事 NET_OUT_REALPLAY_INFO stOutInfo {0}; LLONG lPlayID CLIENT_RealPlay(lLoginID, stPlayInfo, stOutInfo); if (lPlayID 0) { printf(realplay failed, error code: %d\n, CLIENT_GetLastError()); CLIENT_Logout(lLoginID); return -1; } // 渲染由dhplay.dll的播放显示接口负责窗口句柄传入后出画面这块要注意的是通道号换算。NetSDK的nChannelID从0开始RTSP地址里的channel1从1开始同一个通道两端写法的数值差1。这是我见过最多的低级翻车点第一遍做Demo的人几乎都会在这里卡一下。NetSDK的优势是功能全对讲、云台、报警都能调桌面客户端常用缺点是要装SDK环境、带一堆dll。做网页项目的话前面RTSP HLS的方案就够用了没必要上NetSDK。5. 播放Demo避坑指南黑屏、延迟与断流的排查顺序5.1 黑屏不出画面先分是鉴权错还是通道错现象VLC或ffplay打开RTSP地址直接黑屏或者报401 Unauthorized。原因只有两类一是账号密码错、账号没权限二是通道号不对。很多人第一反应是改代码其实问题根本不在代码里。解决先用ffprobe对同一地址做探测。报401看账号权限报404或一直卡住看通道号和subtype。通道号从1开始试subtype从0、1各试一次。设备后台确认账号勾选了实时预览权限。黑屏问题按这个顺序排查基本5分钟内定位。我见过有人在代码里改了一天最后发现是密码里的没做URL编码。5.2 延迟越拉越大播放器缓冲与传输模式在作怪现象刚开播时画面接近实时放着放着延迟从1秒涨到10秒停下来重开又好了。原因播放器尤其是OpenCV和VLC默认会累积缓冲帧加上RTSP默认UDP传输在丢包时等待重传双重叠加延迟就越滚越大。解决传输模式统一拉TCP播放器缓冲压到最低。FFmpeg拉流加-rtsp_transport tcpOpenCV设CAP_PROP_BUFFERSIZE1hls.js设liveSyncDuration2。另外检查设备的I帧间隔太大比如10秒一个I帧会导致重连后等关键帧时间过长体感就是黑了几秒然后突然跳帧。I帧间隔设成帧率的2倍最稳。5.3 多路同放卡顿子码流铺底、主码流精确放大现象单路播放流畅同时开4路以上CPU直接满画面PPT。原因每路都拉主码流2K分辨率2Mbps码率4路同时解码对机器是实打实的考验加上浏览器多个video标签叠加渲染负载也不小。解决预览铺底全用子码流subtype1点击放大某一路时才切主码流subtype0。如果切流有感知可以先起一个隐藏video拉主码流预加载1秒后再切换显示。带宽计算也按这个来一路子码流约0.5Mbps4路预览就是2Mbps远比4路主码流的8Mbps稳妥。5.4 浏览器播放RTSP失败这是协议边界不是代码锅现象video标签直接塞RTSP地址Chrome报错不支持Safari也黑屏。原因浏览器只吃HTTP协议的视频RTSP是独立流媒体协议浏览器内核没实现这个客户端。这不是播放器写错了而是方案选型问题。解决按第3章的选型表走——HLS转流用hls.js低延迟用WebRTC或HTTP-FLV老浏览器用大华插件。不要尝试在纯前端上解决RTSP协议问题该转流就转流这是安防Web播放的底线认知。5.5 插件提示未安装或一直加载失败现象用大华网页插件模式IE打开页面提示插件未安装或安装后刷新还是提示。原因ActiveX控件被IE的安全策略拦了或被64位浏览器拒绝加载。新装的Windows 10/11上IE默认禁用了ActiveX运行权限还要手动放行。解决以管理员身份运行IE把站点加入“可信站点”在“ActiveX控件和插件”里把“对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本”改为启用浏览器架构切到32位。做完这一套还不行就要放弃插件模式转HLS或WebRTC方案。做新项目我一律不推荐起点就在插件上后面的浏览器升级问题很难收场。6. 进阶多路预览与低延迟播放的一组可复用参数6.1 多路预览的工程习惯子码流铺底、主码流放大多路播放的工程化做法我在5.3节说了原则这里补充一套可落地的参数习惯。前端九宫格预览时九路全部请求子码流每路限制分辨率不超过704×576点击九宫格某一路时该路切到主码流并同时停掉其余八路的解码渲染而不是停拉流——保留连接、只停渲染切换回来的速度会快很多。这样一套组合拳下来4核8G的机器带9路预览基本无压力码率开销也控制在5Mbps以内。6.2 低延迟调优我每次都会先跑一遍的检查清单做低延迟播放我养成了一个习惯任何一路流接入都先按这张表逐项过检查项目标值验证方式传输模式TCPffprobe加-rtsp_transport tcpI帧间隔帧率×225fps设50设备后台查看子码流分辨率不高于1280×720ffprobe看heightHLS切片时长2~4秒看m3u8切片时长前端liveSyncDuration2秒播放器配置这套清单不是拍脑袋定的每条都对应一个真实踩过的坑。比如I帧间隔之前我接过一个项目现场设备I帧间隔被设成了250等于10秒才一个关键帧换路黑屏时间长达10秒用户直接炸毛。从那以后我每次接入新设备都强制先跑一遍这份检查清单把编码参数钉死再交付。希望帮到你。本文还有配套的精品资源点击获取
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

◈

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

◐

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

▲

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。