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

EasyCVR是TSINGSEE青犀视频研发安防视频融合平台，设备端有公网IP，可通过海康SDK、Onvif/RTSP、GB28181、ehome协议接入到EasyCVR中；设备端无公网IP，可通过GB28181、ehome协议接入到EasyCVR中，也可在内网安装EasyNTS设备，与公网建立传输通道，这样即可通过海康SDK、Onvif/RTSP接到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安防是云服务支持阿里云、腾讯云、华为云、七牛云等，支持S3和Swift接口的对象存储服务，简单配置，部署更高效；且支持传统网络摄像机、NVR、编码器、SDK等设备，最大程度的提高了硬件设备的兼容性。如果大家有兴趣了解，可至TSINGSEE青犀视频联系我们。