一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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…
最后实现的效果图:

vue项目里对接海康rtsp

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

vue项目里对接海康rtsp

准备:

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

vue项目里对接海康rtsp

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

vue项目里对接海康rtsp

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

vue项目里对接海康rtsp

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>

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

vue项目里对接海康rtsp

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

原文链接:https://juejin.cn/post/7217082232937939005 作者:小麟

(0)
上一篇 2023年4月2日 下午4:05
下一篇 2023年4月2日 下午4:15

相关推荐

发表评论

登录后才能评论