vue项目里对接海康rtsp

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

一、准备方案

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

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引入：

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. 就是上述衍化出来的问题，父组件和子组件中间具体的沟通方式。有时间了慢慢优化。