精华内容
下载资源
问答
  • 获取摄像机品牌的RTSP地址 比如海康的是: rtsp://user:pwd@ip:port/MPEG-4/ch1/main/av_stream 遗憾的是前端不支持rtsp,但...我这边是请后端开发利用ffmpeg+nginx 实现的,后端推流实现参考链接: https://www...

    获取摄像机品牌的RTSP地址

    比如海康的是: rtsp://user:pwd@ip:port/MPEG-4/ch1/main/av_stream

    遗憾的是前端不支持rtsp,但支持rtmp,我们就要想办法将rtsp转为rtmp。网络摄像头想要在前端播放需要启动流媒体服务器推rtmp流。

    我这边是请后端开发利用 ffmpeg+nginx 实现的,后端推流实现参考链接:

    https://www.e-learn.cn/content/nginx/247481


    接下来就等后端的rtmp流媒体服务器成功启动了,rtmp流大概长这样:rtmp://192.168.1.100:3000/mylive/test2sss

    前端想要播放rtmp需要依赖插件,目前比较主流和常用的是videojs,但是它无法实现拍照截图功能,无奈只能想办法或者重新找。搜遍全网发现了一个自带拍照截图的插件:EasyPlayer

    https://github.com/tsingsee/EasyPlayer.js

    其实此作者已经写了api 告诉我们在vue上的用法了。

    我按照上面的配置调试了很久始终无法实现直播,一直是黑的,不成功也不报错,一度不知道该怎么排查...... 眼看项目就要上线了,只能想其它办法(有大佬能看懂vue集成配置的欢迎评论指出啊)。

    vue实现:

    首先下载源码到本地:https://github.com/tsingsee/EasyPlayer.js

    我们只需要找到以下三个文件:

    注意:EasyPlayer.swf 和 EasyPlayer-element.min.js 两个文件一定要放在同一个目录下!!!不要问我为什么!

     

    先将html文件改成这样(另外两个文件不用改):

    <!DOCTYPE HTML>
    <html>
    <head>
        <title>EasyPlayer</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit" />
        <meta name="force-rendering" content="webkit" />
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <style>
            body{
                margin:0
            }
        </style>
    </head>
    <body>
    <!--参数请参考上面github链接中的配置属性-->
    <easy-player isresolution="fhd" video-url="你的rtmp流"
                 fluent="false"
                 auto-play="true"
                 live="true"
                 stretch="true">
    </easy-player>
    </body>
    <script type="text/javascript" src="./EasyPlayer-element.min.js"></script>
    </html>

    将这三个文件放在vue里的static目录中:

    最后在项目中需要用到的vue文件中使用 iframe 标签引入:

    <iframe name="video_frame" id="video" src="/static/EasyPlayer/index.html" width="1663" height="930" frameborder="0" scrolling="no"></iframe>

    运行项目:

    拍照功能(不需要拍照功能可以直接跳过):

    视频中自带这个功能,鼠标移入监控视图下方找到一个相机小图标,会直接将图片下载到本地,但我们的需求是外接拍照按钮。这么一来就需要改源码:

    打开 EasyPlayer-element.min.js 文件,刚打开应该是压缩的,网上找个工具先格式化代码

    然后 ctrl+f 找到这行代码:

    d.toDataURL("image/" + u)

    或者直接格式化后找到第50027行附近,找到了之后在这里插入两行代码:

     最后在拍照按钮的点击事件添加如下代码:

    // 点击拍照
    btn_camera(){
        var self = this;
        const childWindow = document.getElementById('video').contentWindow;
        const btn = childWindow.document.querySelector('button[title="快照"]');
        btn.click();
        setTimeout(function () {
            self.base64 = childWindow.window.l;// 获取到的base64截图数据
        },500);
    },

     

    demo版:

    本地运行需要使用 apache 本地服务器(下载地址):http://www.wampserver.com/,安装好并可以用的的apache长这样 

    这三个文件直接放在apache中的www目录下:

    修改html文件:

    <!DOCTYPE HTML>
    <html>
    <head>
        <title>EasyPlayer</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit" />
        <meta name="force-rendering" content="webkit" />
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <style>
            body{
                margin:0
            }
        </style>
    </head>
    <body>
    <!--参数请参考上面github链接中的配置属性-->
    <easy-player isresolution="fhd" video-url="你的rtmp流"
                 fluent="false"
                 auto-play="true"
                 live="true"
                 stretch="true">
    </easy-player>
    </body>
    <script type="text/javascript" src="./EasyPlayer-element.min.js"></script>
    </html>

    浏览器直接访问:http://localhost/   可以直接看到demo效果,如果不行的话,可以百度开一下apache服务器的跨域。

    完。

    各位看官有问题可以评论区或发邮件一起探讨,个人邮箱:dingjie0730mi@163.com

    展开全文
  • vue中使用海康插件实现视频实时监控(海康插件)

    万次阅读 多人点赞 2019-10-17 09:30:30
    vue中使用海康插件实现视频实时监控(海康插件) 首先 下载并安装海康插件 webcontrol.exe 然后 直接就写代码把,所有方法都是海康他们直接封装好的demo 初始化之后,后台把密钥和一些配置的东西返回给你 然后只需要...

    在vue中使用海康插件实现视频实时监控(海康插件)

    首先

    下载并安装海康插件 webcontrol.exe

    然后

    直接就写代码把,所有方法都是海康他们直接封装好的demo

    初始化之后,后台把密钥和一些配置的东西返回给你

    然后只需要把监控点编号给你就可以了。实现之后几乎你想要的操作都有

    各种黑科技,而你只需处理这个插件的兼容问题和一些bug,底层他们时用C写得,但是最终实现播放呢,又是webscoket实现的。

    代码

    在index.html中引入下面这三个js

    <script src="./static/hkjs/jquery-1.12.4.min.js"></script>
    <script src="./static/hkjs/jsencrypt.min.js"></script>
    <script src="./static/hkjs/jsWebControl-1.0.0.min.js"></script>
    

    html:

    采用了动态获取容器的宽和高

    <div id="playWnd" class="playWnd" :style="{width:swfWidth+'px',height:swfHeight+'px'}"></div>
    

    data:

         swfHeight: "",
         swfWidth: "",
        //初始化参数
          initparam: {
            appKey: "xxxxx",
            secret: "xxxxxxx",
            apiIp: "xxx.xxx.xxx",
            apiPort: 8099,
            layout: "1x1"//这里是来控制你一开始初始化之后的分屏的
          },
          //监控点编号
          pointCode: "xxxxxxx",
          pubKey: "",
          oWebControl: null,
          WebControl: null
    

    methods:

    //海康插件页面渲染方法
        //Html:<div id="playWnd" class="playWnd"></div> 就是放插件的盒子,id不要改,改了的话下面的方法里面也要改
        //css:自己写一个盒子,让上面这个盒子100%就好
        //js:data,methods,生命周期函数里面也要去看下
        //想要用海康视频直接把从onSearch以下的所以方法复制过去
        // 前面三个接口是我们自己要写的
        //查询videoList,密钥getInitParam,执行就是videoPreview
        onSearch() {
          this.oWebControl.JS_ShowWnd();
          this.videoList = [];
            videoList(
             接口参数
            ).then(res => {
              if (res.statusCode == 200) {
                this.videoList = res.result.rows;
              } else {
                this.$message({
                  message: res.message,
                  type: "warning"
                });
              }
            });
          
        },
        //获取海康密钥
        getInitParam() {
          getInitParam('xxx').then(res => {
            this.initparam = res;
            this.init()
          });
        },
        //执行每监控点预览的操作 //获取监控点编号
        videoPreview(val, index) {
          this.position = index;
          this.oWebControl.JS_ShowWnd();
          this.pointCode = val.pointCode;
          this.startpreview();
        },
        // 创建播放实例
        initPlugin() {
          this.oWebControl = new WebControl({
            szPluginContainer: "playWnd", // 指定容器id
            iServicePortStart: 15900, // 指定起止端口号,建议使用该值
            iServicePortEnd: 15909,
            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
            // 创建WebControl实例成功
            cbConnectSuccess: () => {
              this.oWebControl
                .JS_StartService("window", {
                  // WebControl实例创建成功后需要启动服务
                  dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
                })
                .then(
                  () => {
                    // 启动插件服务成功
                    this.oWebControl.JS_SetWindowControlCallback({
                      // 设置消息回调
                      cbIntegrationCallBack: this.cbIntegrationCallBack
                    });
    
                    this.oWebControl
                      .JS_CreateWnd("playWnd", this.swfWidth, this.swfHeight)
                      .then(() => {
                        //JS_CreateWnd创建视频播放窗口,宽高可设定
                       this.getInitParam(); // 创建播放实例成功后初始化
                      });
                  },
                  () => {
                    // 启动插件服务失败
                  }
                );
            },
            // 创建WebControl实例失败
            cbConnectError: () => {
              this.oWebControl = null;
              $("#playWnd").html("插件未启动,正在尝试启动,请稍候...");
              this.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数,采用wakeup来启动程序
              this.initCount++;
              if (this.initCount < 3) {
                setTimeout(() => {
                  this.initPlugin();
                }, 3000);
              } else {
                console.log("插件启动失败,请检查插件是否安装!");
              }
            },
            // 异常断开:bNormalClose = false
            cbConnectClose: bNormalClose => {
              // JS_Disconnect正常断开:bNormalClose = true
              console.log("cbConnectClose");
              this.oWebControl = null;
            }
          });
        },
        // 设置窗口控制回调
        setCallbacks() {
          this.oWebControl.JS_SetWindowControlCallback({
            cbIntegrationCallBack: this.cbIntegrationCallBack
          });
        },
        // 推送消息
        cbIntegrationCallBack(oData) {
          console.log(oData.responseMsg);
          /* showCBInfo(JSON.stringify(oData.responseMsg)); */
        },
        //初始化
        init() {
          this.getPubKey(() => {
            // 请自行修改以下变量值	
            let appkey = this.initparam.appKey; //综合安防管理平台提供的appkey,必填
            let secret = this.setEncrypt(this.initparam.secret); //综合安防管理平台提供的secret,必填
            let ip = this.initparam.apiIp; //综合安防管理平台IP地址,必填
            let port = this.initparam.apiPort; //综合安防管理平台端口,若启用HTTPS协议,默认443
            port = parseInt(port);
            let layout = this.initparam.layout;
            let playMode = 0; //初始播放模式:0-预览,1-回放
            let snapDir = "D:\\SnapDir"; //抓图存储路径
            let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
            let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,是为1,否为0
            let encryptedFields = "secret"; //加密字段,默认加密领域为secret
            let showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示
            let showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
            let buttonIDs =
              "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
            // 请自行修改以上变量值	
            this.oWebControl
              .JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                  appkey: appkey, //API网关提供的appkey
                  secret: secret, //API网关提供的secret
                  ip: ip, //API网关IP地址
                  playMode: playMode, //播放模式(决定显示预览还是回放界面)
                  port: port, //端口
                  snapDir: snapDir, //抓图存储路径
                  videoDir: videoDir, //紧急录像或录像剪辑存储路径
                  layout: layout, //布局
                  enableHTTPS: enableHTTPS, //是否启用HTTPS协议
                  encryptedFields: encryptedFields, //加密字段
                  showToolbar: showToolbar, //是否显示工具栏
                  showSmart: showSmart, //是否显示智能信息
                  buttonIDs: buttonIDs //自定义工具条按钮
                })
              })
              .then(oData => {
                this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                //startpreview();  //初始化之后开启预览
              });
          });
        },
        //获取公钥
        getPubKey(callback) {
          this.oWebControl
            .JS_RequestInterface({
              funcName: "getRSAPubKey",
              argument: JSON.stringify({
                keyLength: 1024
              })
            })
            .then(oData => {
              console.log(oData);
              if (oData.responseMsg.data) {
                this.pubKey = oData.responseMsg.data;
                callback();
              }
            });
        },
        //RSA加密
        setEncrypt(value) {
          let encrypt = new JSEncrypt();
          encrypt.setPublicKey(this.pubKey);
          return encrypt.encrypt(value);
        },
        // 设置窗口裁剪,当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
        setWndCover() {
          let iWidth = $(window).width();
          let iHeight = $(window).height();
          let oDivRect = $("#playWnd")
            .get(0)
            .getBoundingClientRect();
          let iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
          let iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
          let iCoverRight =
            oDivRect.right - iWidth > 0 ? Math.round(oDivRect.right - iWidth) : 0;
          let iCoverBottom =
            oDivRect.bottom - iHeight > 0
              ? Math.round(oDivRect.bottom - iHeight)
              : 0;
    
          iCoverLeft = iCoverLeft > this.swfWidth ? this.swfWidth : iCoverLeft;
          iCoverTop = iCoverTop > this.swfHeight ? this.swfHeight : iCoverTop;
          iCoverRight = iCoverRight > this.swfWidth ? this.swfWidth : iCoverRight;
          iCoverBottom =
            iCoverBottom > this.swfHeight ? this.swfHeight : iCoverBottom;
          this.oWebControl.JS_RepairPartWindow(0, 0, this.swfWidth+1, this.swfHeight); // 多1个像素点防止还原后边界缺失一个像素条
          if (iCoverLeft != 0) {
            this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, this.swfHeight);
          }
          if (iCoverTop != 0) {
            this.oWebControl.JS_CuttingPartWindow(0, 0, this.swfWidth+1, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
          }
          if (iCoverRight != 0) {
            this.oWebControl.JS_CuttingPartWindow(
              this.swfWidth - iCoverRight,
              0,
              iCoverRight,
              this.swfHeight
            );
          }
          if (iCoverBottom != 0) {
            this.oWebControl.JS_CuttingPartWindow(
              0,
              this.swfHeight - iCoverBottom,
              this.swfWidth,
              iCoverBottom
            );
          }
        },
        //视频“预览”功能
        startpreview() {
          let pointCode = this.pointCode;
          let cameraIndexCode = pointCode; //获取输入的监控点编号值,必填
          let streamMode = 0; //主子码流标识:0-主码流,1-子码流
          let transMode = 1; //传输协议:0-UDP,1-TCP
          let gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
          let wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
          cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
          cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
          this.oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
              cameraIndexCode: cameraIndexCode, //监控点编号
              streamMode: streamMode, //主子码流标识
              transMode: transMode, //传输协议
              gpuMode: gpuMode, //是否开启GPU硬解
              wndId: wndId //可指定播放窗口
            })
          });
        },
    
        //停止全部预览功能
        stopAllPreview() {
          this.oWebControl.JS_RequestInterface({
            funcName: "stopAllPreview"
          });
        },
        //关闭视频窗口
        closeWindow() {
          if (this.oWebControl != null) {
            this.oWebControl.JS_HideWnd(); // 先让窗口隐藏,规避可能的插件窗口滞后于浏览器消失问题
            this.oWebControl.JS_Disconnect().then(
              () => {
                // 断开与插件服务连接成功
              },
              () => {
                // 断开与插件服务连接失败
              }
            );
          }
        }
      },
      created() {
        this.getInitParam();//获取初始话所需的参数
      },
      beforeMount() {this.WebControl = WebControl;},//调用电脑中的插件
      mounted() {
        this.swfHeight = document.getElementById("videoMaincontent1").offsetHeight;
        this.swfWidth = document.getElementById("videoMaincontent1").offsetWidth;
        //页面加载时创建播放实例初始化
        this.initPlugin();
        // 监听resize事件,使插件窗口尺寸跟随DIV窗口变化
        $(window).resize(() => {
          if (this.oWebControl != null) {
            this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
            this.setWndCover();
          }
        });
        // 监听滚动条scroll事件,使插件窗口跟随浏览器滚动而移动
        $(window).scroll(() => {
          if (this.oWebControl != null) {
            this.oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
            this.setWndCover();
          }
        });
      },
      beforeDestroy() {
        this.closeWindow();//关闭插件
      }
    
    展开全文
  • 安装dplayer npm install dplayer --save 安装flv.js npm install flv.js --save 在页面中引入dplayer index.html <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>... liv.
    1. 安装dplayer
      npm install dplayer --save
    2. 安装flv.js
      npm install flv.js --save
    3. 在页面中引入dplayer
    index.html
    <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
    
     <div id="dplayer"></div>
     import DPlayer from 'dplayer
     live() {
          let _that = this
          this.$nextTick(() => {
            _that.dp = new DPlayer({
              live: true,
              preload: 'auto',
              container: document.getElementById('dplayer'),
              video: {
                url: _that.url, // url地址
                type: 'customFlv',
                customType: {
                  customFlv: function(video, player) {
                    _that.flvPlayer = flvjs.createPlayer({
                      type: 'flv',
                      url: _that.url,
                      hasAudio: false,
                      isLive: true
                    })
                    _that.flvPlayer.attachMediaElement(video)
                    // 这里根据项目实际来 我这里是因为推流有延迟
                    _that.timer = setTimeout(() => {
                      _that.flvPlayer.load()
                      _that.flvPlayer.play()
                    }, 6000)
                    _that.flvPlayer.on('error', e => {
                      // 这里是视频加载失败
                    })
                  }
                }
              }
            })
          })
        },
    
    展开全文
  • 基于百度地图api+vue实时监控项目

    千次阅读 2018-11-02 18:13:31
    基于百度地图api+vue实时监控项目 websocke实时监控,基于百度地图api,vue(axios+mock.js) GITHUB: https://github.com/yuhangweihaha/map.

    基于百度地图api+vue实时监控项目


    websocke实时监控,基于百度地图api,vue(axios+mock.js)
    GITHUB: https://github.com/yuhangweihaha/map.

    展开全文
  • vue实时监控输入框输入字符的长度 先看下效果图: 这个真的简单不能再简单了,不过还是得记录一下,以免后续忘得一干二净 上代码吧! <van-popup v-model="show" position="bottom" :style="{ height: '50%' }"&...
  • 主要介绍了vue-video-player实现实时视频播放方式(监控设备-rtmp流),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • sentry + vue实现错误日志监控

    千次阅读 2019-06-20 15:33:30
    项目采用vue全家桶开发,现在拟嵌入sentry,实现对于线上网站进行错误日志记录。其实上传日志很简单,基本配置就可以了,但是上传配套的sourcemap则颇为费劲。这里记录一下使用心得。 实施步骤 上传日志 sentry使用...
  • 最近在做一个Vue项目,其中一个需求,就是在页面中展示出海康威视的监控图像,并进行云台控制。 技术攻关的过程还是有点儿痛苦的,因为这方面的技术文章有点儿少,很多作者的代码让我看的云里雾里的(是我自身水平...
  • vue + echarts 实现监控大屏

    千次阅读 2019-11-27 14:29:12
    主要用vue,这个真的不太懂前端的同学也能够很快上手,文档什么的也很清楚, echarts 也是文档非常清楚,两个加起来做监控大屏,是很好上手的。 方案如下 该大屏采用半自动化形式,两侧自动,中间固定内容。 ...
  • vue-video-player实现实时视频播放(监控设备-rtmp流)

    万次阅读 热门讨论 2018-11-13 11:05:24
    监控设备播放效果如下   1、vue项目安装vue-video-player npm install vue-video-player --save   2、编写视频播放组件(放上完整的组件例子,父组件调用时给videoSrc和playerOptions.sources[0].src...
  • 1、上一篇文章Vue 中使用vue2-highcharts实现曲线数据展示示例主要是使用vue2-highcharts实现历史曲线,将一连串(多个数据点)以曲线的方式显示出来。实时曲线,每隔一分钟,增加一个点,实时的将多个点连接起来绘制...
  • vue中使用海康插件实现视频监控逻辑优化 播放流程:this.initPlugin()//创建播放实例==>this.getInitParam(); // 创建播放实例成功后初始化==>this.init()==>this.startpreview(); //初始化之后开启预览 ...
  • 使用H5s技术实现查看实时视频和回放视频(基于VUE框架) 一、上图 实时???? 回放???? 实时视频支持:(四、九分屏、双击方法、双击缩小、关闭、自动播放等功能、并且能够根据摄像头切换指定画面、) 回放视频:...
  • Vue实现动态显示textarea剩余字数监控

    千次阅读 2019-04-03 16:29:43
    <el-input type="textarea" v-model="form.suggest" :maxlength="1000" @input="suggestRemnant"></el-input> <span style="float:right;color:#999;">{{remarksRemnant}}/1000<...
  • 今天小编就为大家分享一篇Vue2实时监听表单变化的示例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 在春节期间,针对疫情的发展变化集合在我们的专门的网页,实现一个可视化统计分析大屏前端,基于Vue技术实现,基于此项目可以做一些调整和二次开发,实现技术的实景应用,也可当做一个学习案例,了解Vue技术和可视化...
  • word counter:后面是单词的数量,并在20个单词以后改数字变红
  • Vue中如何监控某个属性值的变化?

    千次阅读 2020-03-31 09:33:15
    Vue中如何监控某个属性值的变化? 比如现在需要监控data中,obj.a 的变化。Vue监控对象属性的变化你可以这样: watch: { obj: { handler (newValue, oldValue) { console.log('obj changed') }, deep: true ...
  • vue+flv.js+SpringBoot+websocket实现视频监控与回放 需求:vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之前项目里是纯前端实现视频监控和回放功能.但是有局限...
  • vue之使用vue-video-player实现实时视频流播放

    万次阅读 热门讨论 2019-01-24 10:19:55
    由于这几天项目需要实时显示监控的视频,所以网上翻阅了很多资料,这里写下我从0到1的过程。 本篇博客参考了 :https://blog.csdn.net/liona_koukou/article/details/84025449博客,也非常感谢此博主对我一些问题...
  • Vue 中快速实现div滚动监控

    千次阅读 2018-07-31 10:09:41
    Vue中有时候,我们只需要知道页面开始滚动,并不想知道是往哪个方向滚动,可以使用以下代码: < script > data(){ return {scrolling: false } }, mounted() { this .$refs.scrollDiv.addEventListener...
  • vue实现日历效果

    2020-09-04 13:39:27
    Vue+moment.js+ant-design-vue实现日历效果 实现原理 日常的日历实现均为7*6=42格,42格中会加载当月时间和上月下月的部分信息。如果我们知道当前时间的第一天为星期几,那么我们就能推断出42个格子中第一个格子的...
  • 深入解析vue 1实现原理,并实现vue双向数据绑定模型vueImitate,此模型(vueImitate)只适用于学习和了解vue实现原理;无法作为项目中使用,没有进行任何异常错误处理及各种使用场景的兼容;但通过此项目,可以让你: ...
  • vue实现 .flv 视频流播放 一、安装 flv.js npm install flv.js -S 二、引入项目 import flvjs from 'flv.js/dist/flv.js' 三、使用 var self; export default { data() { return { flvPlayer: null, }; ...
  • Spring Boot集成websocket服务VUE调用socket服务Spring Boot集成websocket服务 VUE调用socket服务1.示例截图2.socketDemo.vue页面代码 Spring Boot集成websocket服务 VUE调用socket服务 1.示例截图 2.socketDemo....
  • vue.js 监控 视频播放

    千次阅读 2017-12-21 19:02:26
    可以实现当用户暂停时执行我们想要的操作,比如记录用户的播放时长等 Multi Source var video1=document.getElementById("audio"); var bofang=document.getElementById(...
  • 本篇文章主要介绍了Vue 动态响应数据变化,通过绑定数据即可以实时改变视图显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,406
精华内容 5,762
关键字:

vue实现实时监控

vue 订阅