2.1 大屏改造

This commit is contained in:
jl-zhoujl2
2023-02-01 16:56:28 +08:00
parent ae53c3977e
commit 3b2f680472
15 changed files with 1223 additions and 106 deletions

View File

@ -15,6 +15,7 @@ const ScreenVideoPlay: React.FC<ScreenVideoPlayProps> = (props) => {
const { videoRef, cameraParams, status } = props;
const playWnd = useRef<any>(null);
let oWebControl: any = null;
let scale = window.innerHeight / 1080;
let initCount = 0;
let pubKey = '';
@ -42,7 +43,7 @@ const ScreenVideoPlay: React.FC<ScreenVideoPlayProps> = (props) => {
// cbIntegrationCallBack: cbIntegrationCallBack
// });
oWebControl.JS_CreateWnd("playWnd", playWnd.current.clientWidth, playWnd.current.clientHeight).then(function () { //JS_CreateWnd创建视频播放窗口宽高可设定
oWebControl.JS_CreateWnd("playWnd", playWnd.current.clientWidth * scale, playWnd.current.clientHeight * scale).then(function () { //JS_CreateWnd创建视频播放窗口宽高可设定
init(); // 创建播放实例成功后初始化
});
}, function () { // 启动插件服务失败
@ -108,7 +109,7 @@ const ScreenVideoPlay: React.FC<ScreenVideoPlayProps> = (props) => {
buttonIDs: buttonIDs //自定义工具条按钮
})
}).then(function (oData: any) {
oWebControl.JS_Resize(playWnd.current.clientWidth, playWnd.current.clientHeight); // 初始化后resize一次规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
oWebControl.JS_Resize(playWnd.current.clientWidth * scale, playWnd.current.clientHeight * scale); // 初始化后resize一次规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
});
});
}
@ -147,23 +148,23 @@ const ScreenVideoPlay: React.FC<ScreenVideoPlayProps> = (props) => {
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
iCoverLeft = (iCoverLeft > playWnd.current.clientWidth) ? playWnd.current.clientWidth : iCoverLeft;
iCoverTop = (iCoverTop > playWnd.current.clientHeight) ? playWnd.current.clientHeight : iCoverTop;
iCoverRight = (iCoverRight > playWnd.current.clientWidth) ? playWnd.current.clientWidth : iCoverRight;
iCoverBottom = (iCoverBottom > playWnd.current.clientHeight) ? playWnd.current.clientHeight : iCoverBottom;
iCoverLeft = (iCoverLeft > playWnd.current.clientWidth * scale) ? playWnd.current.clientWidth * scale : iCoverLeft;
iCoverTop = (iCoverTop > playWnd.current.clientHeight * scale) ? playWnd.current.clientHeight * scale : iCoverTop;
iCoverRight = (iCoverRight > playWnd.current.clientWidth * scale) ? playWnd.current.clientWidth * scale : iCoverRight;
iCoverBottom = (iCoverBottom > playWnd.current.clientHeight * scale) ? playWnd.current.clientHeight * scale : iCoverBottom;
oWebControl.JS_RepairPartWindow(0, 0, playWnd.current.clientWidth + 1, playWnd.current.clientHeight); // 多1个像素点防止还原后边界缺失一个像素条
oWebControl.JS_RepairPartWindow(0, 0, playWnd.current.clientWidth * scale + 1, playWnd.current.clientHeight * scale); // 多1个像素点防止还原后边界缺失一个像素条
if (iCoverLeft != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, playWnd.current.clientHeight);
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, playWnd.current.clientHeight * scale);
}
if (iCoverTop != 0) {
oWebControl.JS_CuttingPartWindow(0, 0, playWnd.current.clientWidth + 1, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
oWebControl.JS_CuttingPartWindow(0, 0, playWnd.current.clientWidth * scale + 1, iCoverTop); // 多剪掉一个像素条,防止出现剪掉一部分窗口后出现一个像素条
}
if (iCoverRight != 0) {
oWebControl.JS_CuttingPartWindow(playWnd.current.clientWidth - iCoverRight, 0, iCoverRight, playWnd.current.clientHeight);
oWebControl.JS_CuttingPartWindow(playWnd.current.clientWidth * scale - iCoverRight, 0, iCoverRight, playWnd.current.clientHeight * scale);
}
if (iCoverBottom != 0) {
oWebControl.JS_CuttingPartWindow(0, playWnd.current.clientHeight - iCoverBottom, playWnd.current.clientWidth, iCoverBottom);
oWebControl.JS_CuttingPartWindow(0, playWnd.current.clientHeight * scale - iCoverBottom, playWnd.current.clientWidth * scale, iCoverBottom);
}
}
@ -175,8 +176,8 @@ const ScreenVideoPlay: React.FC<ScreenVideoPlayProps> = (props) => {
var gpuMode = 0; //是否启用GPU硬解0-不启用1-启用
var wndId = -1; //播放窗口序号在2x2以上布局下可指定播放窗口
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
cameraIndexCode = cameraIndexCode?.replace(/(^\s*)/g, "");
cameraIndexCode = cameraIndexCode?.replace(/(\s*$)/g, "");
if (oWebControl != null) {
oWebControl?.JS_RequestInterface({
funcName: "startPreview",
@ -221,7 +222,7 @@ const ScreenVideoPlay: React.FC<ScreenVideoPlayProps> = (props) => {
// 监听滚动条scroll事件使插件窗口跟随浏览器滚动而移动
const resize = () => {
if (oWebControl != null) {
oWebControl.JS_Resize(playWnd.current.clientWidth, playWnd.current.clientHeight);
oWebControl.JS_Resize(playWnd.current.clientWidth * scale, playWnd.current.clientHeight * scale);
setWndCover();
}
};