海康威视监控rtsp播放

摘要：

RTSP提供了一个可扩展的框架，以提供实时数据（如音频和视频文件）的可控、按需传输。Rtsp为流媒体提供暂停和快进等控制，但不传输数据。rtsp充当流媒体服务器的远程控制。数据可以通过传输层的tcp和udp协议传输。rtsp还提供了一些基于rtp传输机制的有效方法。DOCTYPEhtml˃˂title=预览演示html，正文｛padding:0；margin:0；｝。playWnd｛margin:30px00400px；width:1000px；/*播放容器的宽度和高度设置*/height:600px；border:1psolid；｝。操作｛margin-top:24px；｝。操作：：在{content:“”之后；显示：块；清除：两者；}。模块｛float:left；宽度：340px；/*最小高度：320px；*/目标左侧：16px；填充：16px8px；框大小：边框框；边框：1pxsolid#e5e5e5；｝。单元项｛margin-bottom:4px；｝。模块输入[type=“text”]｛框大小调整：边框；显示：内联块；垂直对齐：中间；左边距：0；宽度：150px；最小高度：20px；｝。模块.btn｛最小宽度：80px；最小宽度：24px；顶部边距：100px；左侧边距：80px预览界面--˃监视点数：&nbsp；&nbsp；&nbsp；&nbsp；&nbsp；&nbsp；&nbsp；预览nbsp；&nbsp；&nbsp；&nbsp；&nbsp；&nbsp；&nbsp；停止所有预览˃˂！

RTSP简介：
　　Real Time Streaming Protocol或者RTSP（实时流媒体协议），是由Real network 和Netscape共同提出的如何有效地在IP网络上传输流媒体数据的应用层协议。RTSP提供一种可扩展的框架，使能够提供能控制的，按需传输实时数据，比如音频和视频文件。源数据可以包括现场数据的反馈和存贮的文件。rtsp对流媒体提供了诸如暂停，快进等控制，而它本身并不传输数据，rtsp作用相当于流媒体服务器的远程控制。传输数据可以通过传输层的tcp，udp协议，rtsp也提供了基于rtp传输机制的一些有效的方法。

海康威视api官网：https://open.hikvision.com/
一、在官网找到“视频web插件”最新版，下载程序包

海康威视监控rtsp播放第1张

二、解压程序包

　　1.解压文件夹中“doc视频WEB插件V1.4.2开发指南.pdf”文档，这就是视频插件的开发文档

海康威视监控rtsp播放第2张

　　2.开发文档中显示的解压文件夹中各文件的功能作用

　　这里主要使用其中的视频web插件和视频预览demo

海康威视监控rtsp播放第3张

　　3.必须安装视频web插件，海康威视rtsp需要该插件的支持

海康威视监控rtsp播放第4张

　　4.demo_window_simple_preview.html（官网给出的视频预览简化demo）

　　重点：

　　　　包括jquery的话，开发还需要引入三个js文件的支持，引入的js也在程序包demo文件夹内

　　　　不需要请求接口获取rtsp流，插件会通过cameraIndexCode（监控点编号）转化为视频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>preview_demo</title>
</head>
<style>
    html, body {
        padding: 0;
        margin: 0;
    }
    .playWnd {
        margin: 30px 0 0 400px;
        width: 1000px;                  /*播放容器的宽和高设定*/
        height: 600px;
        border: 1px solid red;
    }
    .operate {
           margin-top: 24px;
    }
    .operate::after {
        content: '';
        display: block;
        clear: both;
    }
    .module {
        float: left;
        width: 340px;
        /*min-height: 320px;*/
        margin-left: 16px;
        padding: 16px 8px;
        box-sizing: border-box;
        border: 1px solid #e5e5e5;
    }
    .module .item {
        margin-bottom: 4px;
    }
    .module input[type="text"] {
        box-sizing: border-box;
        display: inline-block;
        vertical-align: middle;
        margin-left: 0;
        width: 150px;
        min-height: 20px;
    }
    .module .btn {
        min-width: 80px;
        min-height: 24px;
        margin-top: 100px;
        margin-left: 80px;
    }
</style>

<body>
    <!--预览界面-->
    <div id="operate" class="operate">
        <div class="module">
            <div class="item"><span class="label">监控点编号：</span><input id="cameraIndexCode" type="text" value=""></div>
            <div class="item" style="margin-top: 20px;margin-left: -20px;">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button style="20px;padding:0;margin:0;" id="startPreview" class="btn">预览</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button style="90px;padding:0;margin:0;" id="stopAllPreview" class="btn">停止全部预览</button>
            </div>
        </div>
    </div>
    <!--视频窗口展示-->
    <div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"></div>
</body>

    <!--三个必要的js文件引入-->
<script src="jquery-1.12.4.min.js"></script>
<script src="jsencrypt.min.js"></script>            <!-- 用于RSA加密 -->
<script src="jsWebControl-1.0.0.min.js"></script>   <!-- 用于前端与插件交互 -->

<script type="text/javascript">

    //页面加载时创建播放实例初始化
    $(window).load(function () {
        initPlugin();
    });

    //声明公用变量
    var initCount = 0;
    var pubKey = '';

    // 创建播放实例
    function initPlugin () {
        oWebControl = new WebControl({
            szPluginContainer: "playWnd",                       // 指定容器id
            iServicePortStart: 15900,                           // 指定起止端口号，建议使用该值
            iServicePortEnd: 15909,                             
            szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
            cbConnectSuccess: function () {                     // 创建WebControl实例成功                                            
                oWebControl.JS_StartService("window", {         // WebControl实例创建成功后需要启动服务
                    dllPath: "./VideoPluginConnect.dll"         // 值"./VideoPluginConnect.dll"写死 
                }).then(function () {                           // 启动插件服务成功
                    oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
                        cbIntegrationCallBack: cbIntegrationCallBack
                    });
                    
                    oWebControl.JS_CreateWnd("playWnd", 1000, 600).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
                        init();  // 创建播放实例成功后初始化
                    });
                }, function () { // 启动插件服务失败
                });
            },
            cbConnectError: function () { // 创建WebControl实例失败
                oWebControl = null;
                $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
                WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
                initCount ++;
                if (initCount < 3) {                             
                    setTimeout(function () {
                        initPlugin();
                    }, 3000)
                } else {
                    $("#playWnd").html("插件启动失败，请检查插件是否安装！");
                }
            },
            cbConnectClose: function (bNormalClose) {            
                // 异常断开：bNormalClose = false
                // JS_Disconnect正常断开：bNormalClose = true    
                console.log("cbConnectClose");
                oWebControl = null;
            }
        });
    }

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

    // 推送消息
    function cbIntegrationCallBack(oData) {
        showCBInfo(JSON.stringify(oData.responseMsg));
    }
    
    //初始化
    function init()
    {
        getPubKey(function () {
            
            ////////////////////////////////// 请自行修改以下变量值    ////////////////////////////////////        
            var appkey = "28730366";                           //综合安防管理平台提供的appkey，必填
            var secret = setEncrypt("HSZkCJpSJ7gSUYrO6wVi");   //综合安防管理平台提供的secret，必填
            var ip = "10.19.132.75";                           //综合安防管理平台IP地址，必填
            var playMode = 0;                                  //初始播放模式：0-预览，1-回放
            var port = 443;                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
            var snapDir = "D:\SnapDir";                       //抓图存储路径
            var videoDir = "D:\VideoDir";                     //紧急录像或录像剪辑存储路径
            var layout = "1x1";                                //playMode指定模式的布局
            var enableHTTPS = 1;                               //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
            var encryptedFields = 'secret';                       //加密字段，默认加密领域为secret
            var showToolbar = 1;                               //是否显示工具栏，0-不显示，非0-显示
            var showSmart = 1;                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
            var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769";  //自定义工具条按钮
            ////////////////////////////////// 请自行修改以上变量值    ////////////////////////////////////

            oWebControl.JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                    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                       //自定义工具条按钮
                })
            }).then(function (oData) {
                oWebControl.JS_Resize(1000, 600);  // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            });
        });
    }

    //获取公钥
    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()
            }
        })
    }

    //RSA加密
    function setEncrypt (value) {
        var encrypt = new JSEncrypt();
        encrypt.setPublicKey(pubKey);
        return encrypt.encrypt(value);
    }
    
    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
     $(window).resize(function () { 
        if (oWebControl != null) {
            oWebControl.JS_Resize(1000, 600);
            setWndCover();
        }
    });
    
    // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
    $(window).scroll(function () {
        if (oWebControl != null) {
            oWebControl.JS_Resize(1000, 600);
            setWndCover();
        }
    });
    
    
    // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
    function setWndCover() {
        var iWidth = $(window).width();
        var iHeight = $(window).height();
        var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

        var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
        var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
        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 > 1000) ? 1000 : iCoverLeft;
        iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
        iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
        iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;

        oWebControl.JS_RepairPartWindow(0, 0, 1001, 600);    // 多1个像素点防止还原后边界缺失一个像素条
        if (iCoverLeft != 0) {
            oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
        }
        if (iCoverTop != 0) {
            oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
        }
        if (iCoverRight != 0) {
            oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
        }
        if (iCoverBottom != 0) {
            oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
        }
    }

    //视频预览功能
    $("#startPreview").click(function () {
        var cameraIndexCode  = $("#cameraIndexCode").val();     //获取输入的监控点编号值，必填
        var streamMode = 0;                                     //主子码流标识：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, "");

        oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
                cameraIndexCode:cameraIndexCode,                //监控点编号
                streamMode: streamMode,                         //主子码流标识
                transMode: transMode,                           //传输协议
                gpuMode: gpuMode,                               //是否开启GPU硬解
                wndId:wndId                                     //可指定播放窗口
            })
        })
    });

    //停止全部预览
    $("#stopAllPreview").click(function () {
        oWebControl.JS_RequestInterface({
            funcName: "stopAllPreview"
        });
    });

    // 标签关闭
    $(window).unload(function () {
        if (oWebControl != null){
            oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 
            oWebControl.JS_Disconnect().then(function(){  // 断开与插件服务连接成功
            }, 
            function() {  // 断开与插件服务连接失败
            });
        }
    });

</script>
 </html>

View Code

　　5.使用vue，改写官网给出的视频预览简化demo，剔除jquery

　　注意点：视频不可超出屏幕，否则视频中会出现白块导致画面显示不完整

<template>
    <div id="playWnd" class="playWnd" ref="playWnd"></div>
</template>

<script>
    // 用于前端与插件交互
    import * as jsWebControl from "@/util/jsWebControl-1.0.0.min";
    // 用于RSA加密
    import * as JsEncrypt from "@/util/jsencrypt.min";
    export default {
        name: "preview",
        props: {
            cameraIndexCode: {
                type: String,
                default: () => ""
            },
        },
        watch: {
            cameraIndexCode: {
                handler(v, o) {
                    if (v) {
                        this.pre_viwe(v);
                    }
                },
                deep: true
            }
        },
        data() {
            return {
                initCount: 0,
                pubKey: "",
                oWebControl: null,
                pre_ 1550, // 播放器的宽度
                pre_height: 900 // 播放器的高度
            };
        },
        mounted() {
            this.$nextTick(() => {
                window.addEventListener("resize", this.listenResize);
                this.initPlugin();
            });
        },
        methods: {
            listenResize() {
                let doc_width = this.$refs.playWnd;
                this.pre_width = doc_width.offsetWidth;
                this.pre_height = doc_width.offsetHeight;
                if (this.oWebControl != null) {
                    this.oWebControl.JS_Resize(this.pre_width, this.pre_height);
                    this.setWndCover();
                }
                if (this.oWebControl != null) {
                    this.oWebControl.JS_Resize(this.pre_width, this.pre_height);
                    this.setWndCover();
                }
            },
            // 创建播放实例
            initPlugin() {
                let this_ = this;
                let WebControl = jsWebControl.WebControl;
                this.oWebControl = new WebControl({
                    szPluginContainer: "playWnd", // 指定容器id
                    iServicePortStart: 15900, // 指定起止端口号，建议使用该值
                    iServicePortEnd: 15909,
                    szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
                    cbConnectSuccess: () => {
                        // 创建WebControl实例成功
                        this_.oWebControl ?.JS_StartService("window", {
                                // WebControl实例创建成功后需要启动服务
                                dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
                            })
                            .then(
                                () => {
                                    // 启动插件服务成功
                                    this_.oWebControl.JS_SetWindowControlCallback({
                                        // 设置消息回调
                                        cbIntegrationCallBack: this_.cbIntegrationCallBack
                                    });
                                    this_.oWebControl
                                        .JS_CreateWnd("playWnd", this_.pre_width, this_.pre_height)
                                        .then(() => {
                                            //JS_CreateWnd创建视频播放窗口，宽高可设定
                                            this_.init(); // 创建播放实例成功后初始化
                                        });
                                },
                                () => {
                                    // 启动插件服务失败
                                }
                            );
                    },
                    cbConnectError: () => {
                        // 创建WebControl实例失败
                        this_.oWebControl = null;
                        console.log("插件未启动，正在尝试启动，请稍候...");
                        WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
                        this_.initCount++;
                        if (initCount < 3) {
                            setTimeout(() => {
                                this_.initPlugin();
                            }, 3000);
                        } else {
                            console.log("插件启动失败，请检查插件是否安装！");
                        }
                    },
                    cbConnectClose: bNormalClose => {
                        // 异常断开：bNormalClose = false
                        // JS_Disconnect正常断开：bNormalClose = true
                        console.log("cbConnectClose");
                        this_.oWebControl = null;
                    }
                });
            },

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

            // 推送消息
            cbIntegrationCallBack(oData) {
                console.log(JSON.stringify(oData.responseMsg));
                //   this.showCBInfo()
            },

            //初始化
            init() {
                let this_ = this;
                this.getPubKey(() => {
                    ////////////////////////////////// 请自行修改以下变量值    ////////////////////////////////////
                    // AK  25907700
                    // SK  F0Y4SPv1AVkEtaUq26Oa
                    // 172.23.252.15
                    var appkey = "23...474"; //综合安防管理平台提供的appkey，必填
                    var secret = this_.setEncrypt(
                        "2NO7Dem....dqVCJQ0dS"
                    ); //综合安防管理平台提供的secret，必填
                    var ip = "17x.xx.xxx.15"; //综合安防管理平台IP地址，必填
                    var playMode = 0; //初始播放模式：0-预览，1-回放
                    var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
                    var snapDir = "D:\SnapDir"; //抓图存储路径
                    var videoDir = "D:\VideoDir"; //紧急录像或录像剪辑存储路径
                    var layout = "1x1"; //playMode指定模式的布局
                    var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                    var encryptedFields = "secret"; //加密字段，默认加密领域为secret
                    var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
                    var showSmart = 0; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
                    var buttonIDs =
                        "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
                    ////////////////////////////////// 请自行修改以上变量值    ////////////////////////////////////

                    this_.oWebControl
                        .JS_RequestInterface({
                            funcName: "init",
                            argument: JSON.stringify({
                                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 //自定义工具条按钮
                            })
                        })
                        .then(oData => {
                            // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                            this_.listenResize()
                            this_.pre_viwe(this_.cameraIndexCode);
                        });
                });
            },

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

            //RSA加密
            setEncrypt(value) {
                let JSEncrypt = JsEncrypt.JSEncrypt;
                var encrypt = new JSEncrypt();
                encrypt.setPublicKey(this.pubKey);
                return encrypt.encrypt(value);
            },
            
            // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
            setWndCover() {
                var iWidth =
                    window.innerWidth ||
                    document.documentElement.clientWidth ||
                    document.body.clientWidth;
                var iHeight =
                    window.innerHeight ||
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;

                var oDivRect = this.$refs.playWnd.getBoundingClientRect();
                var iCoverLeft = oDivRect.left < 0 ? Math.abs(oDivRect.left) : 0;
                var iCoverTop = oDivRect.top < 0 ? Math.abs(oDivRect.top) : 0;
                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 > 1000 ? 1000 : iCoverLeft;
                iCoverTop = iCoverTop > 600 ? 600 : iCoverTop;
                iCoverRight = iCoverRight > 1000 ? 1000 : iCoverRight;
                iCoverBottom = iCoverBottom > 600 ? 600 : iCoverBottom;

                this.oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1个像素点防止还原后边界缺失一个像素条
                if (iCoverLeft != 0) {
                    this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
                }
                if (iCoverTop != 0) {
                    this.oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
                }
                if (iCoverRight != 0) {
                    this.oWebControl.JS_CuttingPartWindow(
                        1000 - iCoverRight,
                        0,
                        iCoverRight,
                        600
                    );
                }
                if (iCoverBottom != 0) {
                    this.oWebControl.JS_CuttingPartWindow(
                        0,
                        600 - iCoverBottom,
                        1000,
                        iCoverBottom
                    );
                }
            },

            //视频预览功能
            pre_viwe(v) {
                var cameraIndexCode = v || "5308020.....10537517"; //获取输入的监控点编号值，必填
                var streamMode = 0; //主子码流标识：0-主码流，1-子码流
                var transMode = 1; //传输协议：0-UDP，1-TCP
                var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
                var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）

                let obj = {
                    cameraIndexCode: cameraIndexCode, //监控点编号
                    streamMode: streamMode, //主子码流标识
                    transMode: transMode, //传输协议
                    gpuMode: gpuMode, //是否开启GPU硬解
                    wndId: wndId, //可指定播放窗口
                    protocol: 'rtsp',
                    expand: 'streamform=rtp',
                };
                this.oWebControl.JS_RequestInterface({
                    funcName: "startPreview",
                    argument: JSON.stringify(obj)
                });
            },
        },
        destroyed() {
            window.removeEventListener("resize", this.listenResize);
            if (this.oWebControl != null) {
                this.oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
                this.oWebControl.JS_Disconnect().then(
                    function () {
                        // 断开与插件服务连接成功
                        console.log("断开成功");
                    },
                    function () {
                        // 断开与插件服务连接失败
                        console.log("断开失败");
                    }
                );
            }
        }
    };
</script>

<style scoped lang="less">
    .playWnd {
        width: 1550px !important;
        height: 900px !important;
        max-width: 100%;
        max-height: 90vh !important;

        img {
            width: 1550px !important;
            height: 900px !important;
            max-width: 100%;
            max-height: 90vh !important;
        }
    }
</style>

海康威视监控rtsp播放

相关文章

博客园样式美化（背景图片、公告栏头像、看板娘、鼠标特效、网易云音乐）

【使用 DOM】使用事件

JS实现“隐藏与显示”功能(多种方法)

layui社区模板主页框架分析

bootstrap模态框，等待遮盖层

CSS对各个浏览器兼容技巧HACK技巧

最新文章

随机推荐

思享工具箱导航

JSON工具

格式化转换

加解密编码

文本数字

网络

站长

计算

其他

对照列表