一、下载视频web插件v1.5.2版本

下载地址:海康开放平台

bin目录下，打开bin文件安装

二、在vue项目的public目录新建文件夹，放入插件js文件

三、引入海康插件，创建div

四、创建WebControl实例

 // 插件对象实例，初始化为null，需要创建多个插件窗口时，需要定义多个插件对象实例变量，各个变量唯一标志对应的插件实例

​    var oWebControl = null;

​    var bIE = !!window.ActiveXObject || "ActiveXObject" in window; // 是否为IE浏览器

​    var pubKey = ""; // demo中未使用加密，可根据需求参照开发指南自行使用加密功能

​    var initCount = 0; // 异常重启计数

 initPlugin();
        // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
        function initPlugin() {
            oWebControl = new WebControl({
                szPluginContainer: "playWnd",
                iServicePortStart: 15900,
                iServicePortEnd: 15900,
                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
                cbConnectSuccess() {
                    console.log('创建WebControl实例成功');
                    oWebControl.JS_StartService('window', {
                        // WebControl实例创建成功后需要启动服务
                        dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
                    })
                        .then(
                            () => {
                                // // 启动插件服务成功
                                oWebControl.JS_SetWindowControlCallback({
                                    // 设置消息回调
                                    cbIntegrationCallBack: cbIntegrationCallBack,
                                });
                                oWebControl.JS_CreateWnd("playWnd").then(() => {
                                    //JS_CreateWnd创建视频播放窗口，宽高可设定

                                    oWebControl.JS_SetDocOffset({
                                        left: 250,
                                        top: 125,
                                    }); // 更新插件窗口位置

                                    oWebControl.JS_Resize(640 * 1, 360 * 1);

                                    initBtnClicked(); // 创建播放实例成功后初始化
                                });
                            },
                            () => {
                                // 启动插件服务失败
                            }
                        )
                        .catch((err) => {
                            console.log(err);
                        });
                },
                cbConnectError: function () {
                    console.log("cbConnectError");
                    oWebControl = null;
                    $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                    WebControl.JS_WakeUp("VideoWebPlugin://");
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(function () {
                            initPlugin();
                        }, 3000);
                    } else {
                        $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                    }
                },
                cbConnectClose: function (bNormalClose) {
                    // 异常断开：bNormalClose = false
                    // JS_Disconnect正常断开：bNormalClose = true
                    if (true == bNormalClose) {
                        console.log("cbConnectClose normal");
                    } else {
                        console.log("cbConnectClose exception");
                    }

                    oWebControl = null;
                    $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                    WebControl.JS_WakeUp("VideoWebPlugin://");
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(function () {
                            initPlugin();
                        }, 3000);
                    } else {
                        $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                    }
                },
            });

五、初始化

 // 获取公钥

​    function getPubKey(callback) {

​      oWebControl

​        .JS_RequestInterface({

​          funcName: "getRSAPubKey",

​          argument: JSON.stringify({

​            keyLength: 1024,

​          }),

​        })

​        .then(function (oData) {

​          console.log(oData);

​          if (oData.responseMsg.data) {

​            pubKey = oData.responseMsg.data;

​            callback();

​          }

​        });

​    }


​    // 设置窗口控制回调

​    function setCallbacks() {

​      oWebControl.JS_SetWindowControlCallback({

​        cbIntegrationCallBack: cbIntegrationCallBack,

​      });

​    }


​    // 推送消息

​    function cbIntegrationCallBack(oData) {

​      showCBInfo(JSON.stringify(oData.responseMsg));

​    }


​    // RSA加密

​    function setEncrypt(value) {

​      var encrypt = new JSEncrypt();

​      encrypt.setPublicKey(pubKey);

​      return encrypt.encrypt(value);

​    }


​    // 显示接口返回的消息及插件回调信息

​    function showCBInfo(szInfo, type) {

​      if (type === "error") {

​        szInfo =

​          "<div style='color: red;'>" +

​          dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +

​          " " +

​          szInfo +

​          "</div>";

​      } else {

​        szInfo =

​          "<div>" +

​          dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +

​          " " +

​          szInfo +

​          "</div>";

​      }

​      $("#cbInfo").html(szInfo + $("#cbInfo").html());

​    }

  // 初始化
​     function requestInterface(value) {

​      oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {

​        // console.log(oData)

​        showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));

​      });

​    }

  function initBtnClicked() {
       var appkey = "XXXXX"; //综合安防管理平台提供的appkey，必填
                var secret = _that.setEncrypt("XXXXXXXXXX"); //综合安防管理平台提供的secret，必填
                var ip = "XXXXXXXX"; //综合安防管理平台IP地址，必填
                var playMode = 0; //初始播放模式：0-预览，1-回放
                var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
                var snapDir = ""; //抓图存储路径
                var videoDir = ""; //紧急录像或录像剪辑存储路径
                var layout = _that.layout; //playMode指定模式的布局
                var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                var encryptedFields = "secret"; //加密字段，默认加密领域为secret
                var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
                var showSmart = 0; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
                var buttonIDs = ""; //自定义工具条按钮
            var params = {
                "argument":
                {
                       appkey: appkey, //API网关提供的appkey
                        secret: secret, //API网关提供的secret
                        ip: ip, //API网关IP地址
                        playMode: playMode, //播放模式（决定显示预览还是回放界面）
                        port: port, //端口
                        snapDir: snapDir, //抓图存储路径
                        videoDir: videoDir, //紧急录像或录像剪辑存储路径
                        layout: layout, //布局
                        enableHTTPS: enableHTTPS, //是否启用HTTPS协议
                        encryptedFields: encryptedFields, //加密字段
                        showToolbar: showToolbar, //是否显示工具栏
                        showSmart: showSmart, //是否显示智能信息
                        buttonIDs: buttonIDs, //自定义工具条按钮
                },
                "funcName": "init"
            }
            var param = JSON.stringify(params);

            //删除字符串中的回车换行
            param = param.replace(/(\s*)/g, "");

            // 执行初始化
            requestInterface(param);
            playFn()
        }

六、视频预览

 function playFn() {
       var cameraIndexCode = Code; //获取输入的监控点编号值，必填
            var streamMode = this.streamMode; //主子码流标识：0-主码流，1-子码流
            var transMode = 1; //传输协议：0-UDP，1-TCP
            var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
            var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
            cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
            cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

​      var params = {

​        "argument": {

​          cameraIndexCode: cameraIndexCode, //监控点编号
                    streamMode: streamMode, //主子码流标识
                    transMode: transMode, //传输协议
                    gpuMode: gpuMode, //是否开启GPU硬解
                    wndId: wndId, //可指定播放窗口

​        },

​        "funcName": "startPreview"

​      }

​      // console.log(code);

​      var param = JSON.stringify(params);

​      //删除字符串中的回车换行

​      param = param.replace(/(\s*)/g, "");

​      // 执行预览

​      requestInterface(param);

​    }

七、完整代码

play.html页面，放在public目录下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    html,
    body {
        padding: 0;
        margin: 0;
    }
</style>

<body>

    <div id="playWnd" class="playWnd"></div>
    <!-- 引入海康插件 -->
    <script src="./static/jquery-2.1.4.js"></script>
    <script src="./static/jsencrypt.min.js"></script>
    <script src="./static/web-control_1.2.5.min.js"></script>
    <script>
        // 插件对象实例，初始化为null，需要创建多个插件窗口时，需要定义多个插件对象实例变量，各个变量唯一标志对应的插件实例
        var oWebControl = null;
        var bIE = !!window.ActiveXObject || "ActiveXObject" in window; // 是否为IE浏览器
        var pubKey = ""; // demo中未使用加密，可根据需求参照开发指南自行使用加密功能
        var initCount = 0; // 异常重启计数
        initPlugin();
        // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口
        function initPlugin() {
            oWebControl = new WebControl({
                szPluginContainer: "playWnd",
                iServicePortStart: 15900,
                iServicePortEnd: 15900,
                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
                cbConnectSuccess() {
                    console.log('创建WebControl实例成功');
                    oWebControl.JS_StartService('window', {
                        // WebControl实例创建成功后需要启动服务
                        dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
                    })
                        .then(
                            () => {
                                // // 启动插件服务成功
                                oWebControl.JS_SetWindowControlCallback({
                                    // 设置消息回调
                                    cbIntegrationCallBack: cbIntegrationCallBack,
                                });
                                oWebControl.JS_CreateWnd("playWnd").then(() => {
                                    //JS_CreateWnd创建视频播放窗口，宽高可设定

                                    oWebControl.JS_SetDocOffset({
                                        left: 250,
                                        top: 125,
                                    }); // 更新插件窗口位置

                                    oWebControl.JS_Resize(640 * 1, 360 * 1);

                                    initBtnClicked(); // 创建播放实例成功后初始化
                                });
                            },
                            () => {
                                // 启动插件服务失败
                            }
                        )
                        .catch((err) => {
                            console.log(err);
                        });
                },
                cbConnectError: function () {
                    console.log("cbConnectError");
                    oWebControl = null;
                    $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                    WebControl.JS_WakeUp("VideoWebPlugin://");
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(function () {
                            initPlugin();
                        }, 3000);
                    } else {
                        $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                    }
                },
                cbConnectClose: function (bNormalClose) {
                    // 异常断开：bNormalClose = false
                    // JS_Disconnect正常断开：bNormalClose = true
                    if (true == bNormalClose) {
                        console.log("cbConnectClose normal");
                    } else {
                        console.log("cbConnectClose exception");
                    }

                    oWebControl = null;
                    $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                    WebControl.JS_WakeUp("VideoWebPlugin://");
                    initCount++;
                    if (initCount < 3) {
                        setTimeout(function () {
                            initPlugin();
                        }, 3000);
                    } else {
                        $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                    }
                },
            });
        }
            // 初始化
            function requestInterface(value) {
                oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
                    // console.log(oData)
                    showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));
                });
            }

            // 获取公钥
            function getPubKey(callback) {
                oWebControl
                    .JS_RequestInterface({
                        funcName: "getRSAPubKey",
                        argument: JSON.stringify({
                            keyLength: 1024,
                        }),
                    })
                    .then(function (oData) {
                        console.log(oData);
                        if (oData.responseMsg.data) {
                            pubKey = oData.responseMsg.data;
                            callback();
                        }
                    });
            }

            // 设置窗口控制回调
            function setCallbacks() {
                oWebControl.JS_SetWindowControlCallback({
                    cbIntegrationCallBack: cbIntegrationCallBack,
                });
            }

            // 推送消息
            function cbIntegrationCallBack(oData) {
                showCBInfo(JSON.stringify(oData.responseMsg));
            }

            // RSA加密
            function setEncrypt(value) {
                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(pubKey);
                return encrypt.encrypt(value);
            }


            // 显示接口返回的消息及插件回调信息
            function showCBInfo(szInfo, type) {
                if (type === "error") {
                    szInfo =
                        "<div style='color: red;'>" +
                        dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +
                        " " +
                        szInfo +
                        "</div>";
                } else {
                    szInfo =
                        "<div>" +
                        dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +
                        " " +
                        szInfo +
                        "</div>";
                }
                $("#cbInfo").html(szInfo + $("#cbInfo").html());
            }

            function initBtnClicked() {
                var appkey = "XXXXX"; //综合安防管理平台提供的appkey，必填
                var secret = setEncrypt("XXXXXXXXXX"); //综合安防管理平台提供的secret，必填
                var ip = "XXXXXXXX"; //综合安防管理平台IP地址，必填
                var playMode = 0; //初始播放模式：0-预览，1-回放
                var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
                var snapDir = ""; //抓图存储路径
                var videoDir = ""; //紧急录像或录像剪辑存储路径
                var layout = layout; //playMode指定模式的布局
                var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                var encryptedFields = "secret"; //加密字段，默认加密领域为secret
                var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
                var showSmart = 0; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
                var buttonIDs = ""; //自定义工具条按钮
                var params = {
                    "argument":
                    {
                        appkey: appkey, //API网关提供的appkey
                        secret: secret, //API网关提供的secret
                        ip: ip, //API网关IP地址
                        playMode: playMode, //播放模式（决定显示预览还是回放界面）
                        port: port, //端口
                        snapDir: snapDir, //抓图存储路径
                        videoDir: videoDir, //紧急录像或录像剪辑存储路径
                        layout: layout, //布局
                        enableHTTPS: enableHTTPS, //是否启用HTTPS协议
                        encryptedFields: encryptedFields, //加密字段
                        showToolbar: showToolbar, //是否显示工具栏
                        showSmart: showSmart, //是否显示智能信息
                        buttonIDs: buttonIDs, //自定义工具条按钮
                    },
                    "funcName": "init"
                }
                var param = JSON.stringify(params);

                //删除字符串中的回车换行
                param = param.replace(/(\s*)/g, "");

                // 执行初始化
                requestInterface(param);
                playFn()
            }

            function playFn() {
                var cameraIndexCode = '1234'; //获取输入的监控点编号值，必填
                var streamMode = this.streamMode; //主子码流标识：0-主码流，1-子码流
                var transMode = 1; //传输协议：0-UDP，1-TCP
                var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
                var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
                cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
                cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

                var params = {
                    "argument": {
                        cameraIndexCode: cameraIndexCode, //监控点编号
                        streamMode: streamMode, //主子码流标识
                        transMode: transMode, //传输协议
                        gpuMode: gpuMode, //是否开启GPU硬解
                        wndId: wndId, //可指定播放窗口

                    },

                    "funcName": "startPreview"
                }

                // console.log(code);
                var param = JSON.stringify(params);

                //删除字符串中的回车换行
                param = param.replace(/(\s*)/g, "");
                // 执行预览
                requestInterface(param);
            }

            // 格式化时间
            function dateFormat(oDate, fmt) {
                var o = {
                    "M+": oDate.getMonth() + 1, //月份
                    "d+": oDate.getDate(), //日
                    "h+": oDate.getHours(), //小时
                    "m+": oDate.getMinutes(), //分
                    "s+": oDate.getSeconds(), //秒
                    "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
                    S: oDate.getMilliseconds(), //毫秒
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(
                        RegExp.$1,
                        (oDate.getFullYear() + "").substr(4 - RegExp.$1.length)
                    );
                }
                for (var k in o) {
                    if (new RegExp("(" + k + ")").test(fmt)) {
                        fmt = fmt.replace(
                            RegExp.$1,
                            RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
                        );
                    }
                }
                return fmt;
            }

</script>
</body>

</html>

vue文件

 <iframe src="play.html" scrolling="no" frameborder="0"></iframe>

# javascript # vue.js # 前端 # 音视频 # css
GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo
GitCode 开源社区

新一代开源开发者平台 GitCode，通过集成代码托管服务、代码仓库以及可信赖的开源组件库，让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

libmd 实现详解：仓颉语言中的哈希算法库开发实践

avatar GitCode 开源社区

librtp 实现详解：仓颉语言中的 RTP和RTCP 协议库开发实践

在实时音视频通信、流媒体传输、网络监控等场景中，RTP/RTCP 协议是确保数据正确传输和实时反馈的关键技术。RTP 负责传输音视频数据，RTCP 负责传输控制信息，两者配合工作，共同保障实时通信的质量。librtp 库旨在为仓颉语言提供一套完整、高效、易用的 RTP/RTCP 协议处理解决方案，支持 RTP 包的创建、读取和序列化，RTCP 包的创建和解析，NTP 时间戳和 RTP 时间戳的转换

avatar GitCode 开源社区
cover

仓颉三方库实战教程：用 color4cj 处理颜色 [特殊字符]

avatar GitCode 开源社区