欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?

程序员文章站 2022-07-05 11:05:45
...

EasyCVR是TSINGSEE青犀视频研发安防视频融合平台,设备端有公网IP,可通过海康SDK、Onvif/RTSP、GB28181、ehome协议接入到EasyCVR中;设备端无公网IP,可通过GB28181、ehome协议接入到EasyCVR中,也可在内网安装EasyNTS设备,与公网建立传输通道,这样即可通过海康SDK、Onvif/RTSP接到EasyCVR中。

视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?

近期我们的前端研发人员在优化EasyCVR播放界面时,发现播放单通道时,界面出现了样式重叠,遮挡了角落镜头,如下图:

视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?

随后研发人员重启了项目,项目在本机显示正常。然后经过排查发现只有在电脑屏幕分辨率为125%和播放H265视频的时候才会出现重叠效果。根据这个前提,我们可以进行以下修正排查:

1>监听设备是否为125%。

const state = {
  pixel: window.devicePixelRatio === 1.25,
  isIE: !!window.ActiveXObject || "ActiveXObject" in window,
  siderlist: [],
  favoriteslist: []
};

2>找到显示播放器的样式添加样式

.sereen-player-box1 {
  padding-bottom: 47%;
}
.sereen-player-box2 {
  padding-bottom: 44%;
}
.sereen-player-box3 {
  padding-bottom: 56%;
}

3>根据监听的屏幕是为125%显示对应的样式

:class="[
      { 'sereen-player-box1': !isPlayer && aspects == 47 },
      { 'sereen-player-box2': !isPlayer && aspects == 44 },
      { 'sereen-player-box3': !isPlayer && aspects == 56 }
]"

修正之后的界面显示如下图:

视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?

EasyCVR安防是云服务支持阿里云、腾讯云、华为云、七牛云等,支持S3和Swift接口的对象存储服务,简单配置,部署更高效;且支持传统网络摄像机、NVR、编码器、SDK等设备,最大程度的提高了硬件设备的兼容性。如果大家有兴趣了解,可至TSINGSEE青犀视频联系我们。

相关标签: EasyCVR