岄. 2024-07-09 12:47 采纳率: 91.7%
浏览 49
已结题

我使用海康web3.2无插件包，我希望页面显示四个摄像界面，每个通道号都不一样从1-4


<!doctype html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
</head>
<style>
.plugin {
    width: 742px;
    height: 310px;
}
</style>
<body>
<div>
    <div id="divPlugin" class="plugin"></div>
</div>
</body>
<script src="../jquery-1.7.1.min.js"></script>
<script src="../codebase/webVideoCtrl.js"></script>
<script src="../codebase/encryption/AES.js"></script>
<script src="../codebase/encryption/cryptico.min.js"></script>
<script src="../codebase/encryption/crypto-3.1.2.min.js"></script>
<script>

$(function () {
    // 检查插件是否已经安装过
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
        alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
        return;
    }

    var oPlugin = {
        iWidth: 742,             // plugin width
        iHeight: 310             // plugin height
    };

    var oLiveView = {
        iProtocol: 1,            // protocol 1：http, 2:https
        szIP: "192.168.1.4",    // protocol ip
        szPort: "80",            // protocol port
        szUsername: "admin",     // device username
        szPassword: "jsrh123456", // device password
        iStreamType: 1,          // stream 1：main stream  2：sub-stream  3：third stream  4：transcode stream
        iChannelID: 1,           // channel no
        bZeroChannel: false      // zero channel
    };
        
    // 初始化插件参数及插入插件
    WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, {
        bWndFull: true,//是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

            // 检查插件是否最新
            if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
                alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
                return;
            }

            // 登录设备
            WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, {
                success: function (xmlDoc) {
                    // 开始预览
                    var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort;
                    setTimeout(function () {
                        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
                            iStreamType: oLiveView.iStreamType,
                            iChannelID: oLiveView.iChannelID,
                            bZeroChannel: oLiveView.bZeroChannel
                        });
                    }, 1000);
                }
            });
        }
    });

    // 关闭浏览器
    $(window).unload(function () {
        WebVideoCtrl.I_Stop();
    });
});

</script>
</html>

我使用海康web3.2无插件包，我希望页面显示四个摄像界面，每个通道号都不一样从1-4

  • 写回答

2条回答 默认 最新

  • 阿里嘎多学长 2024-07-09 12:47
    关注

    以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

    您好！很高兴您想要扩展您的网页来显示四个独立的摄像界面。根据您提供的代码示例，我们可以进行一些修改来实现这个需求。以下是一些步骤和代码示例，帮助您实现这个功能：

    1. 为每个通道创建一个容器：在HTML中，为每个通道创建一个div容器，每个容器都会有一个唯一的ID。

    2. 修改JavaScript代码：在JavaScript中，为每个通道创建一个配置对象，并调用初始化和插入插件的方法。

    3. 调整样式：可能需要调整CSS样式，以确保四个摄像界面在页面上正确布局。

    下面是一个简化的代码示例，展示了如何为四个通道创建独立的插件实例：

    <!doctype html>
<html>
<head>
    <title>四通道摄像界面</title>
    <!-- 其他meta标签 -->
    <style>
        .plugin {
            width: 370px; /* 根据需要调整宽度 */
            height: 310px;
            float: left; /* 使插件并排显示 */
            margin-right: 10px; /* 为插件之间添加间隔 */
        }
    </style>
</head>
<body>
<div id="divPlugin1" class="plugin"></div>
<div id="divPlugin2" class="plugin"></div>
<div id="divPlugin3" class="plugin"></div>
<div id="divPlugin4" class="plugin"></div>

<!-- 其他脚本引用 -->

<script>
$(function () {
    // 检查插件安装等代码保持不变...

    // 为每个通道创建配置对象
    var channelConfigs = [
        { iChannelID: 1 },
        { iChannelID: 2 },
        { iChannelID: 3 },
        { iChannelID: 4 }
    ];

    // 为每个通道初始化插件并插入到页面
    channelConfigs.forEach(function (config, index) {
        var divId = 'divPlugin' + (index + 1);
        var oLiveView = $.extend({}, {
            szIP: "192.168.1.4", // 根据实际情况修改IP地址
            szPort: "80",
            szUsername: "admin",
            szPassword: "jsrh123456",
            iStreamType: 1,
            bZeroChannel: false
        }, config);

        // 调用初始化和插入插件的方法，具体方法根据实际情况可能有所不同
        // 这里需要您根据海康的API文档来实现具体的初始化和插入逻辑
    });

    // 关闭浏览器时停止播放等代码保持不变...
});
</script>
</html>

    请注意，上面的代码只是一个示例，具体的实现可能需要根据海康web3.2无插件包的API文档进行调整。您需要确保每个通道的配置正确，并且调用正确的API方法来初始化和插入插件。

    关于参考链接，由于我无法提供实时的网络搜索结果，我建议您查阅海康web3.2无插件包的官方文档，通常这些文档会提供详细的API说明和示例代码。您可以访问海康威视的官方网站或者联系他们的技术支持获取更多帮助。

    希望这些信息对您有所帮助！如果您有任何其他问题或需要进一步的指导，请随时告诉我。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 7月9日
  • 已采纳回答 7月9日
  • 创建了问题 7月9日

悬赏问题

  • ¥15 spaceclaim模型变灰色
  • ¥15 求一份华为esight平台V300R009C00SPC200这个型号的api接口文档
  • ¥15 就很莫名其妙，本来正常的Excel，突然变成了这种一格一页
  • ¥15 字符串比较代码的漏洞
  • ¥15 欧拉系统opt目录空间使用100%
  • ¥15 ul做导航栏格式不对怎么改？
  • ¥20 用户端如何上传图片到服务器和数据库里
  • ¥15 现在研究生在烦开题，看了一些文献，但不知道自己要做什么，求指导。
  • ¥30 vivado封装时总是显示缺少一个dcp文件
  • ¥100 pxe uefi启动 tinycore