国标GB28181协议视频智能告警分析平台EasyGBS视频调阅播放界面快照设定介绍

原创于 2020-12-23 10:00:29 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

EasyGBS 专栏收录该内容

844 篇文章

订阅专栏

为提升用户体验，TSINGSEE青犀视频针对EasyGBS的视频调阅功能进行了优化，通过引入EasyWasmPlayer播放器实现视频快照功能，解决高通道获取流接口问题导致的黑屏现象。

TSINGSEE青犀视频的新用户应该知道，我们现有的EasyGBS内有了视频调阅功能，该功能是今年版本更新后才新增的，用户可以在视频调阅界面调阅至少4分屏的视频进行预览。

但是该界面目前有一点需要优化，就是如果高通道的获取流接口有问题，或者请求时间过长时，就会导致该分屏一直处于黑屏状态，用户无法立即看到该视频流，就可能与未调阅的视频通道混淆。因此我们可以效仿EasyNVR的EasyWasmPlayer播放器来做一个视频快照。（EasyWasmPlayer播放器如何优化起播时的快照功能）

当我们在EasyGBS内点击某通道发送请求流地址的数据接口时，先创建EasyWasmPlayer播放器实例，同时调用该通道快照的接口，并利用播放器快照展示的函数将数据返回给播放器，将照片展示给用户，提示用户该通道正在获取流请等待。当请求流地址接口返回数据时，将快照隐藏。开始播放视频流，参考代码如下：

    // 获取通道快照
    getChannelSnap() {
      $.get("/api/v1/device/channelsnap", {
        serial: this.DeviceID,
        code: this.ID,
        encode: true,
      }).then((res) => {
        let _this = this;
        this.channelSnap = res;
        this.getNewVideoUrl();
        console.log("到这里2");
        $.get("/api/v1/stream/start", {
          serial: _this.DeviceID,
          code: _this.ID,
        }).then((res) => {
          //获取cookie
          this.MediaTypeDate = this.MediaType(
            this.baseconfig.PlayMediaTypeDefault
          );
          _this.videoUrl = res[this.MediaTypeDate];
          if (_this.baseconfig.DefaultPlayer == "auto") {
            if (res.VideoCode == "H264") {
              console.log("到这里3");
              _this.getOldVideoUrl();
              _this.NewPlay = false;
              _this.oldplay = true;
            } else {
              _this.oldplay = false;
              _this.NewPlay = true;
              // 获取到地址之后初始化播放器
              _this.new265play.play(this.videoUrl, 1);
            }
          } else if (_this.baseconfig.DefaultPlayer == "EP") {
            if (res.VideoCode != "H264") {
              _this.$message({
                type: "error",
                message: "H265流请切换EasyWasmPlayer播放器",
              });
            }
            _this.NewPlay = false;
            _this.oldplay = true;
            _this.getOldVideoUrl();
          } else {
            _this.NewPlay = true;
            _this.oldplay = false;
            _this.new265play.play(this.videoUrl, 1);
          }
        });
        _this.touch();
      });
    },

EasyGBS的视频调阅也就相当于分屏功能，如果大家想实际测试使用，也可以联系我们获取测试版本，TSINGSEE青犀视频欢迎大家的咨询和交流。更多视频相关解决方案，可关注我们或直接访问TSINGSEE青犀视频官方网站。