专业编程基础技术教程

网站首页 > 基础教程 正文

vue项目里对接海康rtsp

ccvgpt 2024-11-24 12:22:23 基础教程 1 ℃

尽管提前知道做关于摄像头的项目,也提前学习了相关的知识,可是到了正在需要动手的时候,才发现一步一个坑(可能是自己操作问题)。不过好在最后借助海康提供的插件,勉强实现了需求。做完成就感满满,一定要记录下,省的下次用到忘了,而且发现网上大多数要不就是太复杂,以我目前的知识储备,看不懂,要不就是已经不能使用了。

一、准备方案

因为最开始我准备的是用flv.js来实现所需要的需求。借助的是这位大佬的笔记:使用flv.js实现flv格式的监控视频流播放

vue项目里对接海康rtsp

html:

<video   muted autoplay id="=flvBlock"></video>

js:

<script>
import flvjs from '@/assets/static/flv.js'";
export default {
    data(){
        return{
            url:""//有可能不止一个所以方便切换
        }
    },
    mouted(){
        this.beginVideo()
    },
    methods:{
        beginVideo(){
            // 获取video节点
            const videoElement = document.getElementById('flvBlock');
            if (flvjs.isSupported()) {
                flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    url: this.url,//flv格式流地址
                    cors:true//跨域设置,不过不知道有没有用,因为最后flv不行。
                },{
                    enableWorker: false, //不启用分离线程
                    enableStashBuffer: false, //关闭IO隐藏缓冲区
                    reuseRedirectedURL: true, //重用301/302重定向url,用于随后的请求,如查找、重新连接等。
                    autoCleanupSourceBuffer: true //自动清除缓存
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load(); //加载
                flvPlayer.play();//播放
            }
        }
    }
}
</script>

后端同事给我返回的是一个rtsp视频流链接,本打算让后端转成flv格式的,不过因为一些原因不可行,就想又想了其他方案,看了海康平台的介绍,发现不光可以返回rtsp,还可以返回rtmp和hls格式的,但又听领导说另外两种格式有些什么限制。就依旧想怎么播放rtsp流,

二、最终实现:

最后只能借助于海康平台提供的插件来实现。用到的是视频web插件 地址:open.hikvision.com/download/5c… 最后实现的效果图:

找到上图这个,立即下载会得到一个压缩包,解压后得到一些dom案例。开发指南也可以下载下来。里面有详细的教程。不过刚刚下载的包里也有,在doc文件夹下。

准备:

1.首先要安装bin下的插件:安装完需要重启电脑。

2.安装完之后把我们所需有的文件给放到vue项目里,所需要的文件在demo文件夹下面,在public文件夹里创建一个static文件夹,然后把下面红框里文件给复制进去。jquery可以直接用npm来下载。

在piblic文件夹下的index.html引入:

相关学习资料推荐,点击下方链接免费报名,先码住不迷路~】

音视频免费学习地址:https://xxetb.xet.tech/s/2cGd0

【免费分享】音视频学习资料包、大厂面试题、技术视频和学习路线图,资料包括(C/C++,Linux,FFmpeg webRTC rtmp hls rtsp ffplay srs 等等)有需要的可以点击788280672加群免费领取~

vue页面就可以开始使用了。

html:

<<el-button @click="begin"></el-button>
<video v-resize="DomResize" id="playWnd" autoplay></video> 
<!--v-resize="DomResize" 是用来播放器窗口自适应的,如果不需要可以不添加,下面会介绍到-->

js:

<script>
import $ from "jquery";//我这里jquery就是用npm下载的。----npm i jquery -S
export derfault {
    data(){
        return(){
            initCount: 0,
            pubKey: '',
            oWebControl2: '',
            //变量名随便命名的,不太会命名
        }
    },
    created(){
        // this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新
        this.$nextTick(() => {
            this.initCharts();
	});
    },
    methods:{
        // 创建播放实例
        initPlugin() {
            let _that = this;
            const oWebControl = new window.WebControl({
                szPluginContainer: 'playWnd', // 指定容器id
                iServicePortStart: 15900, // 指定起止端口号,建议使用该值
                iServicePortEnd: 15909,
                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: _that.cbIntegrationCallBack,
                            });
                            oWebControl.JS_CreateWnd('playWnd').then(() => {
                                //JS_CreateWnd创建视频播放窗口,宽高可设定
                                _that.init(); // 创建播放实例成功后初始化
                            });
                        },
                        () => {
                            // 启动插件服务失败
                        }
                    )
                    .catch((err) => {
                        console.log(err);
                    });
                },
		cbConnectError() {
                    // 创建WebControl实例失败
                    console.log('xxx');
                    oWebControl = null;
                    $('#playWnd').html('插件未启动,正在尝试启动,请稍候...');
                    window.WebControl.JS_WakeUp('VideoWebPlugin://'); // 程序未启动时执行error函数,采用wakeup来启动程序
                    this.initCount++;
                    if (this.initCount < 3) {
                        setTimeout(function() {
                            this.initPlugin();
                        }, 3000);
                    } else {
                        $('#playWnd').html('插件启动失败,请检查插件是否安装!');
                    }
                },
                cbConnectClose(bNormalClose) {
                    // 异常断开:bNormalClose = false
                    // JS_Disconnect正常断开:bNormalClose = true
                    console.log('cbConnectClose');
                    oWebControl = null;
                },
            });
            this.oWebControl2 = oWebControl;
        },
        //初始化
	init() {
            let _that = this;
            this.getPubKey(function() {
                // 请自行修改以下变量值
                var appkey = "XXXXX"; //综合安防管理平台提供的appkey,必填
                var secret = _that.setEncrypt("XXXXX"); //综合安防管理平台提供的secret,必填
                var ip = "XXXXX"; //综合安防管理平台IP地址,必填
                var playMode = 0; //初始播放模式:0-预览,1-回放
                var port = XXXXX; //综合安防管理平台端口,若启用HTTPS协议,默认443
                var 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 = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
                var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
                // 请自行修改以上变量值
                _that.oWebControl2.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) => {
                    let width = document.querySelector("#playWnd").offsetWidth;
                    let height = document.querySelector("#playWnd").offsetHeight;
                    _that.oWebControl2.JS_Resize(width, height); // 初始化后resize一次,能和盒子大小一致。
                });
            });
        },
        // 设置窗口控制回调
	setCallbacks() {
            this.oWebControl.JS_SetWindowControlCallback({
                cbIntegrationCallBack: this.cbIntegrationCallBack,
            });
	},
	// 推送消息
	cbIntegrationCallBack(oData) {
            //操作抓图录像时可以打印信息
            console.log(oData);
	},
        //获取公钥
	getPubKey(callback) {
            this.oWebControl2.JS_RequestInterface({
                funcName: "getRSAPubKey",
                argument: JSON.stringify({
                    keyLength: 1024,
                }),
            })
            .then((oData) => {
                if (oData.responseMsg.data) {
                    this.pubKey = oData.responseMsg.data;
                    callback();
                }
            });
	},
	//RSA加密
	setEncrypt(value) {
            var encrypt = new window.JSEncrypt();
            encrypt.setPublicKey(this.pubKey);
            return encrypt.encrypt(value);
	},
	//视频预览功能
	getVideoFun(Code) {
            //因为我这里有很多监控点编号需要来回切换,所以用参数传递进来
            var cameraIndexCode = Code; //获取输入的监控点编号值,必填
            var streamMode = 0; //主子码流标识:0-主码流,1-子码流
            var transMode = 1; //传输协议:0-UDP,1-TCP
            var gpuMode = 1; //是否启用GPU硬解,0-不启用,1-启用
            var wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
            cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
            cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
            this.oWebControl2 .JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                    cameraIndexCode: cameraIndexCode, //监控点编号
                    streamMode: streamMode, //主子码流标识
                    transMode: transMode, //传输协议
                    gpuMode: gpuMode, //是否开启GPU硬解
                    wndId: wndId, //可指定播放窗口
                }),
            })
            .then((res) => {
                console.log(res, "res");
            });
	},
	//停止全部预览
	stopVideoFun() {
            this.oWebControl2.JS_RequestInterface({
		funcName: "stopAllPreview",
            });
	},
	// 销毁播放窗口---这个很重要,因为插件所生成的播放窗口不受html控制,
        // 我是弹窗形式展示的播放,即使我关闭弹窗播放器也会一直存在,无法销毁,
        // 甚至路由跳转都无法销毁,所以我看了指南找到了销毁窗口方法。
	destroyVideoDiv() {
            this.oWebControl2.JS_DestroyWnd()
                .then((data) => {
                    console.log("销毁窗口成功");
            })
            .catch((err) => {
                console.log("销毁窗口失败");
            });
	},
	// 抓图按钮---播放器有工具栏,不需要另外写抓图方法了,所以这个可有可无。
	zhuaPicFun() {
            this.oWebControl2.JS_RequestInterface({
                funcName: "snapShot",
                argument: {
                    name: "D:\test.jpg", // 窗口布局
                },
            });
	},
    }
}
</script>

像转入这种可以自己写方法的,指南里写的都有:


zhuaPicFun() {
    // 基本上功能都只需要借助JS_RequestInterface这个方法
    this.oWebControl2.JS_RequestInterface({ 
        funcName: "snapShot",
        argument: {
            name: "D:\test.jpg", // 窗口布局
        },
    });
},

bug:

还有一个就是播放器里自带的录像功能录完之后文件是损坏的,也没有发现怎么解决。因为要开发新的模块就暂时先放着了。

附加:播放器自适应

打开控制台的时候才发现,播放器大小只会固定成第一次渲染时的大小,无论你怎么调整浏览器窗口大小,播放器大小不会变化,不过开发的时候发现有一个播放器初始化大小的方法.JS_Resize(width, height);

想着应该可以根据浏览器大小变化而改变。查了一下才知道原来vue没有监听页面某个元素变化的方法,不过好在有位大佬写过。也就是上面写到的方法v-resize="DomResize"js:

<script>
export default {
    data(){
        return(){}
    },
    mouted:{},
    //该方法是与methods和mouted同级的。
    directives: {
        resize: {
            // 指令的名称
            bind(el, binding) {
                // el为绑定的元素,binding为绑定给指令的对象
                console.log(el, "绑定", binding);
                let width = "",
                height = "";
                function isReize() {
                    const style = document.defaultView.getComputedStyle(el);
                    if (width !== style.width || height !== style.height) {
                        binding.value({ width: style.width, height: style.height }); // 关键(这传入的是函数,所以执行此函数)
                    }
                    width = style.width;
                    height = style.height;
                }
                el.__vueSetInterval__ = setInterval(isReize, 300);
            },
            unbind(el) {
                console.log(el, "解绑");
                clearInterval(el.__vueSetInterval__);
            },
        },
    },
    mouted:{
        DomResize(data) {
            let { width, height } = data;
            // console.log('width:', width, 'height:', height, '   dom尺寸方式改变');
            this.init();
	},
    }
}
</script>

尽管最后还是没有rtsp播放方法,但是能实现了海康摄像头的播放,跳过了生成rtsp地址,直接播放。因为是刚刚开始记录不久,所以文笔比较差,写的乱七八糟的,看不懂的可以留言,看到会回复,如果我会的话(滑稽)。目前再做echarts地图,等做完也会记一下,好记性不如烂笔头。

本次遇到的问题:

  1. 把播放器弹窗单独写在一个vue文件里,在父组件里引入时,用ref来触发播放器初始化方法时,无法触发。conole.log(this.$refs)打印能打印出childVue来,但是调用就是找不到,最开始怀疑是弹窗还未渲染,为了先把功能做出来,就把单独的vue组件给合在一起了,显得代码十分臃肿。
在父组件里调用播放器初始化方法
this.$refs.childVue.initPlugin()

2.就是上述衍化出来的问题,父组件和子组件中间具体的沟通方式。有时间了慢慢优化。

原文 vue项目里对接海康rtsp - 掘金

Tags:

最近发表
标签列表