用h5video和h5stream实现监控视频的播放--rtsp流

朱雀 2024-04-18 13:18 63阅读 0赞

这几天一直很头疼这个监控视频的问题，研究了很多方案，包括直接用video写，还有vue-video-player插件，最后还是通过h5stream实现了，方法很简单，下面我来简单总结一下。(我是用的vue-cli2)

## 第一步，先在唯一的html文件中引入几个js的文件 ##

jq就不用我多说了，剩下的几个给大家一下源码参考在官网 [h5stream][]

## 第二部，在需要调用的vue单文件组件中调用 ##

首先是template中的内容

注意这里面**poster和src都不用写**，会自动生成  
其次是mounted里面的内容，我还没有整理，大家可以看着思路整理一下

//判断设备
    if (H5siOS() === true
           || H5sSafariBrowser() === true)
          {
           $('#h5sVideo1').prop("controls", true）
    } 
    
    //先加上这段
    var strToken;
    strToken = GetURLParameter("token");
    if (strToken === undefined){
         strToken = 'token1';
      }
    var strStream;
    strStream = GetURLParameter("stream");
    if (strStream === undefined)
    {
         strStream = 'main';
    }
    
    //配备的参数
    var conf1 = {
           videoid:'h5sVideo1',//跟上面video标签的id一致
           protocol: 'http:', //'http:' or 'https:'
           host: '192.168.0.254:8080', //'localhost:8080'自己内部的网址
           rootpath:'/', // '/' or window.location.pathname
           token:'7c8a',//可变参数
           //streamprofile: 'Profile_1', // {string} - stream profile, main/sub or other predefine transcoding profile
           hlsver:'v1', //v1 is for ts, v2 is for fmp4
           session:'29106f52-2c37-41ce-819e-260ee8746a04' //session got from login可变参数
    };
    
    //如果是暂停状态，就让它开始；如果是开始就让他暂停。每次开始之前都先清空参数
    $('#h5sVideo1').parent().click(function () {
       if($(this).children(".h5video1").get(0).paused){
           if(v1 != null)
           {
              v1.disconnect();
              v1 = null;
            }
           v1 =new H5sPlayerWS(conf1);
           v1.connect();
        }else{
          v1.disconnect();
          v1 = null;
          $(this).children(".h5video1").get(0).pause();
        }
    });
    
    if (GetURLParameter("autoplay") != undefined)
      {
          $('#playpause1').fadeOut();
      }
      $('#h5sVideo1').get(0).onplay = function() {
            console.log("The video has started to play");
       };

**其实它的原理其实是这样的 websocket 一直访问这个图片的地址，这些图片都是在服务器里缓存的。咱们看到的是动的画面 其实是一张一张的图片，这个页面会一直刷新，类似局部刷新，达到的这种动态效果，那个src的值会一直变**

## 第三步，最好再引入一下css ##

@import '../../../static/css/h5splayer.css';

这个也在官网能找到，找不到可以联系我

ok，就这样，监控视频就可以出来了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]

[h5stream]: https://www.linkingvision.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xlbW9udHJlZV9mdQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/be0790caaada48658307f7545fe2c8c3.jpg