pc、uni-app接入海康监控 使用海康H5player播放器插件，支持app打包
1、首先到海康开放平台下载播放器开发包，并解压
2、在static下新建monitor，复制bin文件夹中所有文件到monitor目录中。（txt文件可以删除）
3、在monitor/bin目录下创建player.html文件
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="./h5player.min.js"></script> <style type="text/css"> .myplayer { width: 90vw; height: 28vh; border-radius: 2vh; overflow: hidden; /* background: #000; */ } </style> </head> <body> <div id="play_window" class="myplayer"></div> <script> // 初始化插件 var myPlugin = new JSPlugin({ szId: 'play_window', //需要英文字母开头 必填 szBasePath: './', // 必填,引用H5player.min.js的js相对路径 }) play() // myPlugin.JS_FullScreenDisplay(true) // myPlugin.JS_FullScreenSingle(0) function play() { // 视频流流 var playURL = GetQueryString("cameraUrl") console.log('视频流地址：', playURL) // 窗口下标 var curIndex = 0; // 获取监控点唯一标识，方便作为抓图存储的key // var cameraIndexCode = GetQueryString("cameraIndexCode") // 视频预览 myPlugin.JS_Play(playURL, { playURL, mode: 1 // 0 普通模式 / 1 高级模式 }, curIndex).then(() => { console.info('JS_Play success '); // 设置取流连接超时时间 let nTime = 300000 myPlugin.JS_SetConnectTimeOut(curIndex, nTime).then( () => { console.info('JS_SetConnectTimeOut success'); // do you want... myPlugin.JS_OpenSound(curIndex).then( () => { console.info('JS_OpenSound success'); // do you want... }, (err) => { console.info('JS_OpenSound failed'); // do you want... } ); }, (err) => { console.info('JS_SetConnectTimeOut failed', err); // do you want... } ); }, (err) => { console.info('JS_Play failed:', err); // do you want... }); myPlugin.JS_FullScreenDisplay(true) // myPlugin.JS_FullScreenSingle(curIndex) //开启声音 } // 截图 function onScreenshot() { console.log('点击截屏'); // 窗口下标 var curIndex = 0; // 获取监控点唯一标识，方便作为抓图存储的key // var cameraIndexCode = GetQueryString("cameraIndexCode") // 文件名称 var fileName = 'img'; // 文件类型 var fileType = 'JPEG'; //下载到本地 myPlugin.JS_CapturePicture(curIndex, fileName, fileType).then( (res) => { console.info('JS_CapturePicture success'); // do you want... }, (err) => { console.info('JS_CapturePicture failed', err); // do you want... } ); } //取url中的参数值 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } </script> </body> </html>
4、项目中的海康监控播放页面使用web-view控件，通过传入的动态src【插件播放器页面地址+监控通道urld地址】向页面传入参数等即可实现监控播放器播放
<template> <view class="video"> <web-view :src="webURL"></web-view> </view> </template> <script> import { getJkUrl } from '@/api/field_management/sqxx' export default { data() { return { webURL: '', // web-view要引入的页面url cameraIndexCode: '', // 监控设备编号 url:'',//接口回调的url播放地址 } }, onLoad(option) { this.getJkUrl(option.cameraIndexCode) }, methods: { getJkUrl(id){ getJkUrl(id).then(res=>{ if(res.code == 200){ this.url = res.data this.previewURLs() } }) }, // 获取视频流 previewURLs() { // 视频流需要根据监控设备编号获取 接口请求这里省略 // cameraUrl 走后台接口获取到监控的视频流 this.webURL = '/static/monitor/bin/player.html?cameraUrl=' + this.url } } } </script>
注意事项：
监控通道url一段时间后会失效，无法打开，可以让后端返回一个长久有效的url
二、pc端使用海康监控插件
1、全局引入海康插件（如：public/index.html中）
2、在要使用海康插件的页面进行初始化插件等...
