V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
fengyenobug
V2EX  ›  程序员

rtsp 的海康威视的视频流如何在网页上显示,网上找的方法试了好多没一个成功的,前端用的 vue

  •  1
     
  •   fengyenobug · 2 天前 · 2059 次点击
    第 1 条附言  ·  1 天前
    使用 hls 已经解决了,效果还不错,非常感谢各位!
    42 条回复    2025-01-16 13:53:40 +08:00
    mightybruce
        1
    mightybruce  
       2 天前   ❤️ 1
    因为浏览器不支持 rtsp 协议, 并且 rtsp 实时流一旦出现延迟或者掉帧,就会出现花屏。
    一般都是 rtsp 转成 rtmp 或者 hls, dash 协议后,然后播放。因为 hls, dash 就是走 http 的。
    除此以外,要直接播放 rtsp, 需要写一些专门的 rtsp wasm 等处理方法了。
    mxT52CRuqR6o5
        2
    mxT52CRuqR6o5  
       2 天前
    可以内嵌 vlc 播放器,要求用户安装 vlc 和 vlc 浏览器插件(代码被拦截贴不上来)
    flash 已经寄了,web 原生不支持 rtsp 的
    luckyscript
        3
    luckyscript  
       2 天前
    服务端开个 rtsp -> webrtc 的服务转一下。
    perbugwei
        4
    perbugwei  
       2 天前
    我之前做的海康的摄像头用的 isup 的 sdk ,取裸流然后 websocket 推给前端的,前端播放器能播放。
    areless
        5
    areless  
       2 天前
    realplayer 插件年代的东西。flash 还活着的时候,早就都 rtmp 了。现在 H5 都是 hls 。rtsp 需要服务端解码。。。这种中古协议在 web 端早被淘汰了,却仍在监控等传统领域活的很好
    ddch1997
        6
    ddch1997  
       2 天前
    服务端部署 zlmediakit ,转一道,生成的 flv ,webrtc 都可以在网页端中播放
    abcgoodwei
        7
    abcgoodwei  
       2 天前
    大华好像开源了一个无差价播放 rtsp 的播放器,具体可以看看大华官网上的插件。
    abcgoodwei
        8
    abcgoodwei  
       2 天前
    插件
    cat007
        9
    cat007  
       2 天前
    淘宝买个 rtsp 转 rtmp/HLS 的推流器试试
    ![淘宝截图]( https://imgur.com/a/dgHgURD "image")
    coala
        10
    coala  
       2 天前
    监控领域的老古董, 唉 ,浏览器,你应该先搞清楚需求,带宽? 数量(要考虑性能的! 特别是 16 个以上的), 除了 rtsp -> webrtc 剩下的所有方案都有较高的延迟的( 5- 10 秒延迟), 转码方案也牵扯到服务器端的性能,
    这个需求不好做真的..我反正没做的太成功,每个环节都容易掉链子
    ty29022
        11
    ty29022  
       2 天前
    > 网上找得方法试了好多没一个成功的
    我不知道你是怎么找的,又怎么试的

    gooogle 搜 rtsp to webrtc
    排第一的链接点进去,根据 README 的提示,几行命令就能看到 demo
    偏偏帖子还有个 vue 的 tag, 这样很容易让我对 vue 用户产生刻板印象
    PopRain
        12
    PopRain  
       2 天前
    海康的 SDK 里面有 demo 吧, 我记得用 nginx 代理一下,就很简单了
    fengyenobug
        13
    fengyenobug  
    OP
       2 天前
    @PopRain 确实有 demo ,我们需要一页放 18 个,插件版不支持我们的 ui (插件的本质是一个 exe 文件悬浮在浏览器上面,我们需要在视频上定位文字),无插件版需要先登录并实例化,18 个实例和登录没法完成( 18 个实例内存太高,其次海康不允许同设备登录同一服务器,iframe 也试过,性能很不好且有很多问题,不稳定也很卡),目前是使用摄像头的 rtsp 直接播放,但是浏览器不支持直接播放,github 和 gitee 上面找的使用 FFmpeg 转码,使用 jsmpeg 或者 flv.js 播放的也都没成功
    Shatyuka
        14
    Shatyuka  
       2 天前
    gstreamer 或者 ffmpeg 转一下呢
    thinkershare
        15
    thinkershare  
       2 天前
    @fengyenobug rtsp 别想用浏览器直接播放。想其它办法。
    fengyenobug
        16
    fengyenobug  
    OP
       2 天前
    @mxT52CRuqR6o5 安装 vlc 和 vlc 插件的也已经尝试过了,网上说的只有老版 IE 支持,我试了一下老版 ie 也显示不出来
    areless
        17
    areless  
       2 天前
    https://open-icc.dahuatech.com/wsplayer/ 大华集成方案的。他们的 ICC 会把 rtsp 转成 websocket 二进制推过来。播放器 UI 默认能开 25 路,也可以自定义。可以参考参考。但是人家是一套方案。海康未知。
    circleee
        18
    circleee  
       2 天前
    circleee
        19
    circleee  
       2 天前
    @circleee 试下这个 服务端转码
    wanguorui123
        20
    wanguorui123  
       2 天前
    ffmpeg-wasm 转换一下
    urlpha
        21
    urlpha  
       2 天前   ❤️ 1
    没办法,原生不支持。
    所有代码级的解决方案都是围魏救赵,体验都是这样那样的问题,无法在项目上应用:播放失败、卡顿、延迟、cpu 卡死、样式难以控制……
    真正想玩 h5 原生,都是通过中间加一层流媒体服务转成 web 标准支持的方式进行播放。
    tcper
        22
    tcper  
       2 天前   ❤️ 1
    @fengyenobug 18 个视频同时播放,实际上这个问题比较复杂,
    正规办法,你需要有一个视频流合流的 server ,ffmpeg 把 18 个流合成一个,然后输出 hls 什么的浏览器就可以播放了。
    简单办法,找个电脑下载 obs ,创建 18 个虚拟 view ,合并后推送出去。

    感觉你就想随便 github 上下载一个东西解决问题,其实这个问题没那么容易。
    Oldletter
        23
    Oldletter  
       2 天前
    https://yyixx.com/docs/media/rtsp_wasm
    你要想简单的就做到,那我劝你放弃吧,老老实实走转码,做到你还要改很多玩意,假如你想深入研究,可以参考上面写的,这个是在美团无人车时候搞得低延时拉流方案
    fengyenobug
        24
    fengyenobug  
    OP
       2 天前
    @tcper 合流的话,样式就定死了,每一个摄像头的状态和文字是可能会变化的,样式间隔会根据客户端稍许变化,合流做不到这些,只能把 18 个视频合到一起成一个视频。目前有 64 个摄像头在线,不需要 obs 虚拟推流的,解决方案确实找了很多,之前也使用过服务端分段截取转成 MP4 和同 iframe 套官方 sdk 实现过效果都不怎么好
    old9
        25
    old9  
       2 天前 via Android
    https://github.com/bluenviron/mediamtx 用的这个,搞个服务端 rtsp 转 hls low latency ,摄像头一般 h264 不需要重编码,所以服务端就是网络带宽压力。
    客户端同时 18 路全高清压力会比较大,建议 18 路的时候只显示子码率,可以 ISAPI 批量给摄像机配置一个合适的子码率。
    fengyenobug
        26
    fengyenobug  
    OP
       2 天前
    @tcper 而且某个摄像头掉线的话,我们需要显示掉线的图填补当前摄像头的黑屏状态,卡顿加载也要展示加载中的图,合流达不到 leader 的需求
    openmynet
        27
    openmynet  
       2 天前
    要么用 zlmediakit 或者 srs 部署流媒体服务器,要么使用第三方云平台的直播服务(走拉流)。zlmediakit 、srs 支持 flv, 对应的播放器是 flv.js, 延迟要比 hls 好很多, 另外海康自己的 h5 播放器(新版本)也是走 websocket 的。
    hicdn
        28
    hicdn  
       2 天前
    不想写代码就把摄像头的 rtsp 接入 hass ;想写代码就移植 hass 的实现。
    hass 的 rtsp 展示有两种实现方式:
    1. 用 ffmpeg 转 hls
    2. 转成 webrtc
    lovelylain
        29
    lovelylain  
       2 天前 via Android
    go2rtc
    shakoon
        30
    shakoon  
       2 天前
    合并画面直接用 NVR 的零通道去配置,不需要自己拼接每个通道
    VitaminC1989
        32
    VitaminC1989  
       2 天前
    https://jessibuca.com/player-pro.html
    试试看这个 支持 flv h.265 编码的直播流
    capric
        33
    capric  
       2 天前
    不要用 flv 已经淘汰全是魔改没必要用,hls 延迟高,用 mediamtx 或者 ZLMediaKit 将 rtsp 协议转换成 fmp4 over websocket 或者 wetrtc
    andyskaura
        34
    andyskaura  
       2 天前
    转 WebRTC ,如果是做监控,别的切片协议基本就别研究了,万一领导和 rtsp 一对比,发现延迟差那么一点,想优化就很难了。
    SmartTom
        36
    SmartTom  
       2 天前
    搭个 srs ,在海康后台配置 RTMP 推送,这样可以直接得到 flv 或者 hls 的播放地址。
    mightybruce
        37
    mightybruce  
       2 天前
    如果摄像头视频流和展示网页在同一个局域网里面,可以写个 opencv 的后端处理直接一帧一帧展示就好了,这个我以前写过,用 opencv videocapture 读取出来,然后 imencode 成图像格式,发给前端,前端不断接受就可以了。
    https://pyimagesearch.com/2019/09/02/opencv-stream-video-to-web-browser-html-page/

    opencv 官方支持四种语言,c/c++/python/java, opencv.js 我没怎么尝试过,可以试试

    https://medium.com/@amit25173/opencv-with-javascript-ff14a93296ff
    notproblem
        38
    notproblem  
       2 天前
    我们当时是用的海康官方播放插件,去他们官网下载的
    lyxxxh2
        39
    lyxxxh2  
       2 天前
    我看了海康后台,是通过 websocket 来传输的,canvas 播放。
    可能有这方面文档。
    ***
    我推荐你用 gb28181 平台,我公司用的是 easygbs,cpu 消耗贼低。


    但是 easygbs 要收费,500 块永久。
    当然你也可以选择其他平台,比如萤石,如果一直播放,可能更贵。

    如果是自己做转码,不注意的话,就浪费几百倍性能。(别解码再编码那些傻 x 操作就行)
    不过我想这应该很简单,问 ai 打开 rtsp,转为 http_flv 。
    palytoxin
        40
    palytoxin  
       2 天前
    正巧搞过。
    这种项目目都有 NVR 。那么可以用 官方 sdk ,就是调调 API ,流转码海康自己都做了
    基本兼容所有浏览器
    https://partners.hikvision.com/tools/tooldetail?id=599912306030739456

    如果没有那就用 easygbs ,比较稳定,gb28181 支持全。

    下策是自己搞一个 rtsp 转 rtmp/hls 的服务,用开源的搭建。nginx 有反代 rtmp 和 hls 的插件,有的需要编译一下
    效果 hls 好于 rtmp ,rtmp 就不建议用了
    zedcoding
        41
    zedcoding  
       2 天前
    我们最近做了一个项目 也是海康摄像头 前端好像是基于 RTCPeerConnection 这个实现播放的
    zedcoding
        42
    zedcoding  
       2 天前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2979 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 06:51 · PVG 14:51 · LAX 22:51 · JFK 01:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.