美文网首页
uniapp海康监控视频

uniapp海康监控视频

作者: 甜甜082054 | 来源:发表于2023-05-05 15:32 被阅读0次

在 uniapp 项目的static文件夹下创建文件目录,这里命名为hik, 将开发包中 demo 的以下文件目录放到 static 文件夹下

static文件夹

在static文件夹里新建一个 webplayer.html 用于 uniapp 中的页面通过 web-view 方式引入,完整代码如下

<!doctype html>

<html>

<head>

<script src="./h5player.min.js"></script> //这里注意路径不要写错

<meta charset="utf-8">

<style type="text/css">

html,

body {

/* width: 100%; */

/* height: 100%; */

margin: auto;

overflow: hidden;

background-color: #000;

-webkit-user-select: none;

user-select: none;

}

.myplayer {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<div id="play_window" class="myplayer"></div>

<script>

//取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;

}

// 初始化插件

var myPlugin = new JSPlugin({

szId: 'play_window', //需要英文字母开头 必填

szBasePath: './', // 必填,引用H5player.min.js的js相对路径

})

// 获取视频播放流

var playURL = GetQueryString("cameraUrl")

// console.log('获取视频播放流')

// console.log("playURL", playURL);

// console.log("myPlugin", myPlugin.JS_Play);

// 有视频流地址以后,才进行播放

if (playURL) {

// 窗口下标

var curIndex = 0;

// 获取监控点唯一标识,方便作为抓图存储的key

var cameraIndexCode = GetQueryString("cameraIndexCode")

// 视频预览

myPlugin.JS_Play(playURL, {

playURL,

mode: 1

}, curIndex).then(() => {

// console.info('JS_Play success 播放成功');

// do you want...

// 抓图

var fileName = 'img';

var fileType = 'JPEG';

//不进行下载,数据回调

myPlugin.JS_CapturePicture(curIndex, fileName, fileType, imageData => {

// console.info('JS_CapturePicture success 抓图成功'); //2.1.0开始全是base64,之前的版本存在blob或者是base64

// do you want...

plus.storage.setItem(cameraIndexCode, imageData);

})

}, (err) => {

console.info('JS_Play failed:', err);

// do you want...

});

}

</script>

</body>

</html>

然后在 uniapp项目中新建需要加载海康视频的页面

video-control.vue

通过 web-view 方式引入

video-control.vue

调用公司自有接口接口获取一个key值,这里定义为cameraIndexCode,下面拼接webURL地址时会用到 this.cameraIndexCode = res.data.result[0].key

调用接口获取海康视频播放流,这里只是做测试所以 cameraIndexCode 先写死

video-control.vue

接口调用成功返回的视频播放流格式为

将该地址与上述获取到的cameraIndexCode拼接到this.webURL

this.webURL = "../../../static/hik/webplayer.html?cameraIndexCode=" + this

.cameraIndexCode + "&cameraUrl=" + this.cameraUrl

页面就可以正常显示啦

相关文章

  • Qt音视频开发17-海康sdk解码

    一、前言 在视频监控行业领域,海康当之无愧是老大,稳坐第一的宝座很多年了,近期需要将视频监控系统改成采用海康sdk...

  • 海康8700视频监控平台

    登陆界面: 登陆以后的首页 分组管理 录像回放 下载窗口 客流分析 人脸对比 热力分析 门禁控制 对讲 对讲通话 ...

  • 海康isc平台flutter版视频播放插件

    背景介绍: 前端时间基于公司项目需求,需要在flutter中播放海康的 iSecure Center 平台视频监控...

  • Java 调用 wsdl 形式的 webservice

    项目背景 一个B/S结构的java项目,需要集成海康的视频监控系统。 github地址 https://githu...

  • ffmpeg + RED5 RTSP转换RTMP

    前言 在实际的项目开发中,需要网站平台接入实时视频流,实现远程监控。使用海康的摄像机器;传送的是rtsp格式的视频...

  • iOS连接摄像头实时预览

    功能简介 在接入硬件海康监控时,监控预览实现方式主要有两种:接入萤石(海康)平台sdk和直接通过Rtsp协议url...

  • 使用rtsp协议访问海康IP摄像头

    问题背景 前段时间做3S比赛的时候涉及到在安卓端调用实验室海康威视摄像头进行实时的视频监控,苦于海康官网没有提供安...

  • 海康视频流获取技术总结

    海康监控设备在国内相关领域占有很大的份额,至少目前我接触到的项目或公司都是使用海康设备进行监控的。所以本文主要针对...

  • 海康播放监控

    播放h265流解决方案 文中代码:https://github.com/moxiefxj/video_vue[ht...

  • Qt音视频开发47-通用视频控件

    一、前言 自从视频监控系统的内核不断增加,从最初的vlc到ffmpeg然后到mpv,后面还陆续增加了海康sdk等,...

网友评论

      本文标题:uniapp海康监控视频

      本文链接:https://www.haomeiwen.com/subject/diafsdtx.html