vue+播放rtsp流视频监控

vue+播放rtsp流视频监控-海康摄像头

  • 使用工具vue+jsencrypt+jsWebControl
  • 思路
    • 解决办法1:弹出新页面vue代码
    • 解决办法2:采用组建的方式

使用工具vue+jsencrypt+jsWebControl

注:使用海康demo,下载地址:https://open.hikvision.com/download/5c67f20bb254d61550c2f63e?type=10
需要注册,登录。
在这里插入图片描述

思路

基于海康demo,在vue上实现,剔除了海康demo的jquery。
vue直接引入jsWebControl会报错!!!直接在index.html里面引入js

  <script src="js/videojs-contrib-hls.min.js"></script><script src="js/jsencrypt.min.js"></script>

解决办法1:弹出新页面vue代码

刚开始将视频窗体放在dialog里面,发现无法关闭窗体,也找不到元素。最终选择 window.open方式弹出新窗体,解决的朋友可以留言。

<template><div class="webControl"><!--视频窗口展示--><div id="playWnd" class="playWnd" style="left: 109px; top: 133px;"><span v-if="loading">插件未启动,正在尝试启动,请稍候...</span></div></div>
</template><script>
export default {name: 'webControl',data: function() {return {loading: false,initCount: 0,pubKey: '',oWebControl: null,id: '',message: {ip: '',port: '',appkey: '',secret: '' }}},async mounted() {this.id = this.getQueryString('name')let res = await this.$http.get('’)//从接口请求得到所需要的ip,port,appkey,secretif (res.code == 0) {this.message = res.data} else {this.$message.error('获取数据失败: ' + res.message)}this.initPlugin()},methods: {//获取路由参数getQueryString(name) {var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')var r = window.location.search.substr(1).match(reg)if (r != null) return decodeURI(r[2])return null},//预览handelShow() {let that = thisvar cameraIndexCode = this.id //获取输入的监控点编号值,必填var streamMode = 0 //主子码流标识:0-主码流,1-子码流var transMode = 1 //传输协议:0-UDP,1-TCPvar gpuMode = 0 //是否启用GPU硬解,0-不启用,1-启用var wndId = -1 //播放窗口序号(在2x2以上布局下可指定播放窗口)cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, '')cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, '')that.oWebControl.JS_RequestInterface({funcName: 'startPreview',argument: JSON.stringify({cameraIndexCode: cameraIndexCode, //监控点编号streamMode: streamMode, //主子码流标识transMode: transMode, //传输协议gpuMode: gpuMode, //是否开启GPU硬解wndId: wndId //可指定播放窗口})})},// 创建播放实例initPlugin() {let that = this// eslint-disable-next-line no-undefthat.oWebControl = new WebControl({szPluginContainer: 'playWnd', // 指定容器idiServicePortStart: 15900, // 指定起止端口号,建议使用该值iServicePortEnd: 15909,szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsidcbConnectSuccess: function() {console.log('插件启动成功')this.loading = false// 创建WebControl实例成功that.oWebControl.JS_StartService('window', {// WebControl实例创建成功后需要启动服务dllPath: './VideoPluginConnect.dll' // 值"./VideoPluginConnect.dll"写死}).then(function() {// 启动插件服务成功that.oWebControl.JS_SetWindowControlCallback({// 设置消息回调cbIntegrationCallBack: that.cbIntegrationCallBack})that.oWebControl.JS_CreateWnd('playWnd', 1000, 600).then(function() {//JS_CreateWnd创建视频播放窗口,宽高可设定that.init() // 创建播放实例成功后初始化})},function() {// 启动插件服务失败})},cbConnectError: function() {// 创建WebControl实例失败that.oWebControl = nullthis.loading = true// eslint-disable-next-line no-undefWebControl.JS_WakeUp('VideoWebPlugin://') // 程序未启动时执行error函数,采用wakeup来启动程序that.initCount++if (that.initCount < 3) {setTimeout(function() {that.initPlugin()}, 3000)} else {that.$confirm('插件启动失败,请检查插件是否安装!', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {location.href = `插件没有安装,则从接口下载VideoWebPlugin.exe插件`}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})}},cbConnectClose: function() {// 异常断开:bNormalClose = false// JS_Disconnect正常断开:bNormalClose = truethat.oWebControl = null}})},// 推送消息cbIntegrationCallBack() {// showCBInfo(JSON.stringify(oData.responseMsg))},//初始化init() {let that = thisthis.getPubKey(function() {// 请自行修改以下变量值	var appkey = that.message.appkey//综合安防管理平台提供的appkey,必填var secret = that.setEncrypt(that.message.secret) //综合安防管理平台提供的secret,必填var ip = that.message.ip //综合安防管理平台IP地址,必填var playMode = 0 //初始播放模式:0-预览,1-回放var port = that.message.port //综合安防管理平台端口,若启用HTTPS协议,默认443var snapDir = 'D:\\SnapDir' //抓图存储路径var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径var layout = '1x1' //playMode指定模式的布局var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1var encryptedFields = 'secret' //加密字段,默认加密领域为secretvar 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' //自定义工具条按钮// 请自行修改以上变量值	that.oWebControl.JS_RequestInterface({funcName: 'init',argument: JSON.stringify({appkey: appkey, //API网关提供的appkeysecret: secret, //API网关提供的secretip: 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() {that.oWebControl.JS_Resize(1000, 600) // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题that.handelShow()})})},//获取公钥getPubKey(callback) {let that = thisthat.oWebControl.JS_RequestInterface({funcName: 'getRSAPubKey',argument: JSON.stringify({keyLength: 1024})}).then(function(oData) {if (oData.responseMsg.data) {that.pubKey = oData.responseMsg.datacallback()}})},//RSA加密setEncrypt(value) {let that = this// eslint-disable-next-line no-undefvar encrypt = new JSEncrypt()encrypt.setPublicKey(that.pubKey)return encrypt.encrypt(value)}}
}
</script><style scoped>
.playWnd {margin: 30px 0 0 400px;width: 1000px;/*播放容器的宽和高设定*/height: 600px;
}
</style>

解决办法2:采用组建的方式

采用组件引用方式,惊喜的发现这种方式初始化时不需要过setWndCover修改定位,销毁组件使用JS_DestroyWnd,切换视频时先通过stopAllPreview停止所有预览,再次startPreview预览

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/553233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器播放rtmp

rtmp播放 文章目录rtmp播放1、rtmp测试路径地址2、video.js播放rtmp3、ezuikit播放rtmp1、rtmp测试路径地址 https://www.cnblogs.com/yeminglong/p/14704789.html 2、video.js播放rtmp 注意&#xff1a; 1.如果写在html本地运行&#xff0c;请使用http-server启动&#xff…

网页打开微信公众号关注界面

代码 <a href"https://mp.weixin.qq.com/mp/profile_ext?actionhome&__biz微信公众号biz号码&scene110#wechat_redirect">进入公众号</a>例如&#xff1a;<a href"https://mp.weixin.qq.com/mp/profile_ext?actionhome&__bizMjgz…

海康、大华网络摄像机RTSP URL格式组成及参数配置

经常有开发者咨询我们关于海康、大华网络摄像机RTSP url拼接规则和相关参数配置&#xff0c;虽然很简单&#xff0c;考虑到资料不全&#xff0c;写个博客记录下&#xff1a; 1. 海康摄像机&#xff1a; 在IE浏览器输入网络摄像机的IP地址&#xff0c;输入配置的用户名、密码&…

直播系统中使用SEI传输用户自定义数据方案讨论

在直播系统中&#xff0c;除了直播音视频之外&#xff0c;有时候还想从主播端发布文本信息等&#xff0c;这些信息可以不通过视频传输通道发送给用户播放端&#xff0c;但如果传输的数据想和视频保持精准同步&#xff0c;那最好的办法就是这些信息和视频数据打包在一起传输, 通…

安卓端/iOS端如何播放4K分辨率的RTMP/RTSP流

关于4K分辨率 4K分辨率即40962160的像素分辨率&#xff0c;它是2K投影机和高清电视分辨率的4倍&#xff0c;属于超高清分辨率。在此分辨率下&#xff0c;观众将可以看清画面中的每一个细节&#xff0c;每一个特写。影院如果采用惊人的40962160像素&#xff0c;无论在影院的哪个…

干货:如何实现RTSP推送H.264、RTSP推送H.265(hevc)

rtsp推送相关的资料和测试软件比较少&#xff0c;本文介绍rtsp推送相关信令和测试效果&#xff1a; 1. rtsp推送流程. 主要分两部分&#xff1a;第一部分先发送信令&#xff1b;第二部分发送rtp包。 信令流程: 1.1 先发送OPTIONS, OPTIONS比较常用&#xff0c;就不做详细说明…

如何支持RTSP播放H.265(HEVC)流

随着H.265的普及&#xff0c;越来越多的开发者希望大牛直播SDK能支持低延迟的RTSP H.265播放&#xff0c;并分享相关经验&#xff1a; 实现思路&#xff1a; 对rtsp来说&#xff0c;要播放h265只要正确解析sdp和rtp包即可. 下面对这些相关内容做一些介绍. 1. H265 Nal Unit …

直播协议的选择:RTMP vs. HLS

前言 随着直播业务的兴起&#xff0c;越来越多的直播平台开始涌现&#xff0c;这火热的程度好像一个应用不带上直播业务出来都不好意思跟人打招呼。想要做一个直播业务&#xff0c;主要包括三个部分&#xff1a;采集推流端、流媒体服务端、播放端。这里不多说&#xff0c;就主…

Flutter下实现低延迟的跨平台RTSP/RTMP播放

为什么要用Flutter&#xff1f; Flutter是谷歌的移动UI框架&#xff0c;可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界&#xff0c;Flutter正在被越来越多的开发者和组织使用&#xff0c;并且Flutter是完全免费、开源的。 …

如何推送和播放RTMP H265流 (RTMP HEVC)

rtmp 播放h265 首先要扩展flv协议&#xff0c;国内常用扩展方式是给flv的videotag.codecid增加一个新类型(12)来表示h265(hevc),其他和h264规则差不多&#xff0c;另外和h264不同的地方是要解析HEVCDecoderConfigurationRecord&#xff0c;从HEVCDecoderConfigurationRecord中解…

5张图看懂如何实现Windows RTMP实时导播功能

一直以来&#xff0c;好多开发者苦于如何实现RTMP导播数据源实时切换&#xff0c;以下是大牛直播SDK导播切换说明&#xff0c;支持只切换数据源模式&#xff0c;或音视频混音合成输出模式&#xff1a; 数据源&#xff1a; 1. rtmp/rtsp音视频流&#xff1b; 2. 本地屏幕/摄像…

如何实现rtsp h265 转 rtmp (rtsp hevc 转 rtmp)并转发到CDN或自建服务器

rtsp h265 转 rtmp&#xff0c;首先要对rtmp协议做扩展&#xff0c;目前国内已有相应扩展标准&#xff0c;国内开发者基本上都按这个扩展协议做的。协议层问题已解决。剩下关键问题是要实现rtmp h265推送模块&#xff0c; 支持rtmp h265 的server, rtmp h265播放模块。 rtmp h…

如何优雅的实现一个靠谱的RTSP播放器?

二话不说&#xff0c;NO 图 NO BB&#xff08;以大牛直播SDK播放海康摄像机RTSP H.265流为例&#xff09;&#xff1a; 行业的浮躁&#xff0c;好多开发者甚至连rtsp、rtp细节不了解&#xff0c;依葫芦画瓢调用了ffmpeg的一些接口&#xff0c;就实现了个简单版的播放器&#xf…

如何对RTSP播放器做功能和性能评估

好多开发者在做产品竞品分析的时候&#xff0c;不知道如何界定一个RTSP播放器&#xff0c;大牛直播SDK认为&#xff0c;一个RTSP播放器&#xff0c;不是说有几个类似于Open/Close接口就够了&#xff0c;好的RTSP播放器需要具备以下功能和性能属性&#xff1a; 1. 低延迟&#…

如何实现RTSP/RTMP流接入到RTSP网关

好多企业或开发者给我们反映&#xff0c;他们期望能把外网的rtsp或rtmp流&#xff0c;直接拉取注入到内网流媒体服务器&#xff0c;保证内网用户&#xff0c;无需访问&#xff0c;直接链接到内网服务器就可以观看到公网rtmp/rtsp流。 优势如下&#xff1a; 1. 内网用户无需访…

如何在IE浏览器播放RTSP或RTMP流

好多开发者一直苦恼于如何在IE浏览器环境下&#xff0c;构建低延迟的RTSP或RTMP播放&#xff0c;对于RTSP流来说&#xff0c;好多公司通常的做法是把RTSP转RTMP&#xff0c;然后分发到RTMP服务器&#xff0c;然后服务器转http-flv出来&#xff0c;浏览器直接播放http-flv流&…

跨平台RTSP/RTMP转RTMP转发SDK

一个好的转发模块&#xff0c;首先要低延迟&#xff01;其次足够稳定、灵活、有状态反馈机制、资源占用低&#xff0c;如果可以跨平台&#xff0c;还能以SDK形式提供&#xff0c;会给开发者提供更大的便利&#xff01; 大牛直播SDK(Github: https://github.com/daniulive/Smar…

GitHub上排名前100的Android开源库介绍

GitHub上排名前100的Android开源库介绍 文章来源&#xff1a; http://www.open-open.com/news/view/1587067#6734290-qzone-1-31660-bf8335a56eb142042e6dc893bd988125 摘要&#xff1a; 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍&#xff0c…

一张图了解大牛直播SDK

来源&#xff1a;https://github.com/daniulive/SmarterStreaming

轻量级RTSP服务SDK

为满足内网无纸化/电子教室等内网超低延迟需求&#xff0c;避免让用户配置单独的服务器&#xff0c;大牛直播SDK在推送端发布了轻量级RTSP服务SDK&#xff1a; 简单来说&#xff0c;之前推送端SDK支持的功能&#xff0c;内置轻量级RTSP服务SDK后&#xff0c;功能继续支持。 一…