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

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

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

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

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


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

    如果是自己做转码,不注意的话,就浪费几百倍性能。(别解码再编码那些傻 x 操作就行)
    不过我想这应该很简单,问 ai 打开 rtsp,转为 http_flv 。
    palytoxin
        40
    palytoxin  
       9 天前
    正巧搞过。
    这种项目目都有 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  
       9 天前
    我们最近做了一个项目 也是海康摄像头 前端好像是基于 RTCPeerConnection 这个实现播放的
    zedcoding
        42
    zedcoding  
       9 天前
    myleszzZ
        43
    myleszzZ  
       3 天前
    @ddch1997 +1 前端我们买的 Jessibuca 组件播放. 直播、回放都走 flv
    myleszzZ
        44
    myleszzZ  
       3 天前
    @areless 2 个平台集成方案我们都是用过,售后服务贼懒,海康有提供插件模式播放 rtsp 协议
    ddch1997
        45
    ddch1997  
       2 天前
    @myleszzZ Jessibuca pro 的源码版本还是编译版本,用起来稳定吗,延迟如何呢,我们最近可能也要采购一个这个了
    myleszzZ
        46
    myleszzZ  
       2 天前
    签合同给源码,线上跑了一年多,基本没出现什么问题,有教程可以自己编译,wasm 的编译挺麻烦,也可以用它编译好的。延迟主要看你转码服务器,播放基本 ok ,支持 h265 主要是这个挺好。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2366 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:22 · PVG 22:22 · LAX 06:22 · JFK 09:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.