在 uniapp 項(xiàng)目的static文件夾下創(chuàng)建文件目錄，這里命名為hik，?將開(kāi)發(fā)包中?demo 的以下文件目錄放到 static 文件夾下
在static文件夾里新建一個(gè) webplayer.html 用于 uniapp 中的頁(yè)面通過(guò) web-view 方式引入，完整代碼如下
<!doctype html>
<html>
<head>
<script src="./h5player.min.js"></script> //這里注意路徑不要寫(xiě)錯(cuò)
<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中的參數(shù)值
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', //需要英文字母開(kāi)頭 必填
szBasePath: './', // 必填,引用H5player.min.js的js相對(duì)路徑
})
// 獲取視頻播放流
var playURL = GetQueryString("cameraUrl")
// console.log('獲取視頻播放流')
// console.log("playURL", playURL);
// console.log("myPlugin", myPlugin.JS_Play);
// 有視頻流地址以后，才進(jìn)行播放
if (playURL) {
// 窗口下標(biāo)
var curIndex = 0;
// 獲取監(jiān)控點(diǎn)唯一標(biāo)識(shí)，方便作為抓圖存儲(chǔ)的key
var cameraIndexCode = GetQueryString("cameraIndexCode")
// 視頻預(yù)覽
myPlugin.JS_Play(playURL, {
playURL,
mode: 1
}, curIndex).then(() => {
// console.info('JS_Play success 播放成功');
// do you want...
// 抓圖
var fileName = 'img';
var fileType = 'JPEG';
//不進(jìn)行下載，數(shù)據(jù)回調(diào)
myPlugin.JS_CapturePicture(curIndex, fileName, fileType, imageData => {
// console.info('JS_CapturePicture success 抓圖成功'); //2.1.0開(kāi)始全是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項(xiàng)目中新建需要加載?？狄曨l的頁(yè)面
通過(guò) web-view 方式引入
調(diào)用公司自有接口接口獲取一個(gè)key值，這里定義為cameraIndexCode，下面拼接webURL地址時(shí)會(huì)用到 this.cameraIndexCode =?res.data.result[0].key
調(diào)用接口獲取海康視頻播放流，這里只是做測(cè)試所以?cameraIndexCode 先寫(xiě)死
接口調(diào)用成功返回的視頻播放流格式為
將該地址與上述獲取到的cameraIndexCode拼接到this.webURL
this.webURL = "../../../static/hik/webplayer.html?cameraIndexCode=" + this
.cameraIndexCode + "&cameraUrl=" + this.cameraUrl
頁(yè)面就可以正常顯示啦
