在web页面实时播放监控视频

背景

因为项目需求,需要在web页面播放实时监控视频,而且是同时播放多个视频,还支持切换页面播放。监控是大华和海康 厂家的,并没有做流服务器,还是rtsp的流媒体格式,所以不能用H5的video来播放。

方案一

后端把rtsp转成web支持的rtmp格式,然后使用video.js(使用方法看文档)来包装处理rtmp流媒体。

遇到的坑

  1. 同时加载多个视频会占用大量内存,而且丢包严重,导致页面雪花,容易崩溃。
  2. V5以上版本不支持播放rtmp流,因为不再支持flash
  3. Vue build过后视频不能播放

解决办法

  1. 按需加载

    a. 按照需要加载的dom大小,加载不同分辨率的视频(这一点需要后台提供处理视频的参数)。分辨率决定的占用的内存

    b. 只播放当前需要播放的视频,把其他的视频stop并且删除

  2. 下载使用videojs5.x.x版本。(5.20.1 亲测可以)

  3. 因为我使用使用npm安装的videojs,然后在build的时候会videojs.swf文件的路径指向会出错。

    a. 下载videojs离线包,然后放在static文件夹使用

    b. 或者在引用videojs的地方,

    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

    **总结**

    不管怎么处理,丢包还是有的,播放多个视频始终达不到需要的效果,有的时候播放一个视频都会丢包严重。也可能是后台处理的问题。没办法,只能换一种实现方案


    ### 方案二

    > 采用[大华SDK](https://www.dahuatech.com/service/downloadlists/836.html)二次开发

    **流程**

    1. Java、C#等语言二次开发大华SDK,打包成ocx包。网上有相关教程
    2. 解压OCX包。单击文件中的reg.bat注册dll(注册好dll就行了)
    3. 前端代码
    ```html
    <!-- 这里的clsid 是打包成ocx的ID -->
    <object classid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2" codebase="" standby="Waiting..." id="playOcx" width="1280" height="720" name="playOcx" align="center" >
    <embed width="618" height="360" align="center"></embed>
    </object>

    <script>
    var SSOcx = document.getElementById("playOcx");
    // 下面就可以通过 SSOcx.xxx 来调用dll包中的方法了
    // 比如 SSOcx.SetDeviceInfo("192.168.1.108",37777,0,"admin","admin");
    </script>

总结

开发麻烦。

功能简单,不支持音频。

基本上只支持IE。需要ActiveX(Chrome45 关闭了默认支持ActiveX,需要手动打开;Chrome49就完全不支持ActiveX, 新版Firefox也不支持ActiveX)的支持才能直接调用dll。

方案三

使用webplugin.exe。如果你的电脑设备上已经和大华摄像头连通,可以直接用IE访问摄像头IP,会提示你下载webplugin.exe。当然网上也有资源下载。

使用方法

  1. 安装webplugin.exe
  2. 获取webplugin.exe的clsid。 (注意:每个.exe文件的id可能都不一样。。如果你的电脑设备上已经和大华摄像头连通,可以直接用IE访问摄像头IP,进入监控页面,然后查看元素,获取clsid)
  3. 可以把上面审查元素的object对象复制出来。(和下面不一定一样)

    1
    2
    3
    4
    <object id="player" width="100%" height="100%"
    classid="clsid:7F9063B6-E081-49DB-9FEC-D72422F2727F"
    codebase="">
    </object>
  4. 相关的js方法。(也不一定一样。也可审查元素获取调用方法)

    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
    var g_ocx = document.getElementById('player');
    var bRet = g_ocx.LoginDeviceEx('192.168.0.102', '554' 'admin', 'admin', 0);
    if (bRet == 0) {
    //设置窗口数量
    g_ocx.SetWinBindedChannel(1, 0, 63, 64);
    //设置截图保存地址
    g_ocx.SetConfigPath(1,"C:\\视频监控\\images");
    //设置录制视频保存地址
    g_ocx.SetConfigPath(2,"C:\\视频监控\\vidos");
    //设置画质 0 高 1 低
    // g_ocx.SetPicQuality(0);
    //设置视频实时性 0-10 实时登记依次降低
    g_ocx.SetAdjustFluency(0);
    //监视模式
    g_ocx.SetModuleMode(1);
    //连接视频
    g_ocx.ConnectRealVideo(0, 1);
    // 播放声音
    g_ocx.PlayOpenSound();
    // 停止声音
    g_ocx.PlayStopSound();
    } else {
    alert("网络连接错误!");
    return false;
    }

    function reqFullScreen(element) {
    var ocx = element;
    if (Sys.ie) {
    //ie浏览器
    ocx.SwitchToFullScreen();
    } else {
    //其他浏览器
    ocx.OnFullScreenClk();
    }
    }

总结

功能相对较多。

基本上只支持IE。需要ActiveX(Chrome45 关闭了默认支持ActiveX,需要手动打开;Chrome49就完全不支持ActiveX, 新版Firefox也不支持ActiveX)的支持才能直接调用dll。

方案三

使用H5Stream,支持Chrome。文档地址。有后台管理界面,方便操作,配置丰富,功能齐全。

具体的使用方法请按照使用文档操作,操作比较简单,需要单独开启端口来启动服务。

总结

操作简单

功能齐全,播放清晰

支持大部分浏览器

底层好像是使用websocket来做的流媒体播放,也是用videojs基础框架。

待解决的问题

  1. 105个监控配置进去就就开始传输,不知道怎么按需加载。
  2. 也因为上面的原因,导致后台服务容易down掉,页面在一定时间后也会崩溃。
  3. 不知道怎么动态设置分辨率。不同场景下加载同样分辨率的视频流,总感觉在浪费资源。
坚持原创技术分享,您的支持将鼓励我继续创作!