This commit is contained in:
刘龙龙
commit
7573d0127d
|
|
@ -1,5 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
"presets": [
|
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
],
|
|
||||||
"plugins": [
|
|
||||||
["component", {
|
|
||||||
"libraryName": "element-ui",
|
|
||||||
"styleLibraryName": "theme-chalk"
|
|
||||||
}]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
"presets": [["es2015", { "modules": false }]],
|
|
||||||
"plugins": [
|
|
||||||
[
|
|
||||||
"component",
|
|
||||||
{
|
|
||||||
"libraryName": "element-ui",
|
|
||||||
"styleLibraryName": "theme-chalk"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
"presets": [["es2015", { "modules": false }]],
|
|
||||||
"plugins": [
|
|
||||||
[
|
|
||||||
"component",
|
|
||||||
{
|
|
||||||
"libraryName": "element-ui",
|
|
||||||
"styleLibraryName": "theme-chalk"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
"presets": [["es2015", { "modules": false }]],
|
|
||||||
"plugins": [
|
|
||||||
[
|
|
||||||
"component",
|
|
||||||
{
|
|
||||||
"libraryName": "element-ui",
|
|
||||||
"styleLibraryName": "theme-chalk"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,11 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
"presets": [
|
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
],
|
|
||||||
"plugins": [
|
|
||||||
["component", {
|
|
||||||
"libraryName": "element-ui",
|
|
||||||
"styleLibraryName": "theme-chalk"
|
|
||||||
}]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
"presets": [["es2015", { "modules": false }]],
|
|
||||||
"plugins": [
|
|
||||||
[
|
|
||||||
"component",
|
|
||||||
{
|
|
||||||
"libraryName": "element-ui",
|
|
||||||
"styleLibraryName": "theme-chalk"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@vue/cli-plugin-babel/preset',
|
|
||||||
["@babel/preset-env", { "modules": false }],
|
|
||||||
],
|
|
||||||
plugins:[
|
|
||||||
[
|
|
||||||
"component",
|
|
||||||
{
|
|
||||||
"libraryName": "element-ui",
|
|
||||||
"styleLibraryName": "theme-chalk"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es5",
|
|
||||||
"module": "esnext",
|
|
||||||
"baseUrl": "./",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"paths": {
|
|
||||||
"@/*": [
|
|
||||||
"src/*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"lib": [
|
|
||||||
"esnext",
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"scripthost"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es5",
|
|
||||||
"module": "esnext",
|
|
||||||
"baseUrl": "./",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"paths": {
|
|
||||||
"@/*": [
|
|
||||||
"src/*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"lib": [
|
|
||||||
"esnext",
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"scripthost"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "es5",
|
|
||||||
"module": "esnext",
|
|
||||||
"baseUrl": "./",
|
|
||||||
"moduleResolution": "node",
|
|
||||||
"paths": {
|
|
||||||
"@/*": [
|
|
||||||
"src/*"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
"lib": [
|
|
||||||
"esnext",
|
|
||||||
"dom",
|
|
||||||
"dom.iterable",
|
|
||||||
"scripthost"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -1,42 +0,0 @@
|
||||||
{
|
|
||||||
"name": "shuinichang",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"serve": "vue-cli-service serve",
|
|
||||||
"build": "vue-cli-service build"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"core-js": "^3.8.3",
|
|
||||||
"echarts": "^5.4.3",
|
|
||||||
<<<<<<< HEAD
|
|
||||||
=======
|
|
||||||
"element": "^0.1.4",
|
|
||||||
"element-ui": "^2.15.14",
|
|
||||||
>>>>>>> 6638ddac2f99c4f1174e2e313a3fe7b80719f62c
|
|
||||||
"postcss-pxtorem": "^6.0.0",
|
|
||||||
"register-service-worker": "^1.7.2",
|
|
||||||
"ui": "^0.2.4",
|
|
||||||
"vue": "^2.6.14",
|
|
||||||
"vue-router": "^3.5.1",
|
|
||||||
"vuex": "^3.6.2"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@vue/cli-plugin-babel": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-pwa": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-router": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
|
||||||
"@vue/cli-service": "~5.0.0",
|
|
||||||
"less": "^4.2.0",
|
|
||||||
"less-loader": "^8.0.0",
|
|
||||||
"lib-flexible": "^0.3.2",
|
|
||||||
"postcss": "^8.4.31",
|
|
||||||
"postcss-preset-env": "^9.3.0",
|
|
||||||
"vue-template-compiler": "^2.6.14"
|
|
||||||
},
|
|
||||||
"browserslist": [
|
|
||||||
"> 1%",
|
|
||||||
"last 2 versions",
|
|
||||||
"not dead"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
{
|
|
||||||
"name": "shuinichang",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"private": true,
|
|
||||||
"scripts": {
|
|
||||||
"serve": "vue-cli-service serve",
|
|
||||||
"build": "vue-cli-service build"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"core-js": "^3.8.3",
|
|
||||||
"echarts": "^5.4.3",
|
|
||||||
"element": "^0.1.4",
|
|
||||||
"element-ui": "^2.15.14",
|
|
||||||
"postcss-pxtorem": "^6.0.0",
|
|
||||||
"register-service-worker": "^1.7.2",
|
|
||||||
"ui": "^0.2.4",
|
|
||||||
"vue": "^2.6.14",
|
|
||||||
"vue-router": "^3.5.1",
|
|
||||||
"vuex": "^3.6.2"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@vue/cli-plugin-babel": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-pwa": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-router": "~5.0.0",
|
|
||||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
|
||||||
"@vue/cli-service": "~5.0.0",
|
|
||||||
"less": "^4.2.0",
|
|
||||||
"less-loader": "^8.0.0",
|
|
||||||
"lib-flexible": "^0.3.2",
|
|
||||||
"postcss": "^8.4.31",
|
|
||||||
"postcss-preset-env": "^9.3.0",
|
|
||||||
"vue-template-compiler": "^2.6.14"
|
|
||||||
},
|
|
||||||
"browserslist": [
|
|
||||||
"> 1%",
|
|
||||||
"last 2 versions",
|
|
||||||
"not dead"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
||||||
<title>
|
|
||||||
<%= htmlWebpackPlugin.options.title %>
|
|
||||||
</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
|
||||||
Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
||||||
<title>
|
|
||||||
<%= htmlWebpackPlugin.options.title %>
|
|
||||||
</title>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
|
||||||
Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Version = 2.2.9
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
Version = 2.2.9
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,304 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;border:1px solid rgb(125,125,125)"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
let channel = window.location.href.split("?")[1];
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onStopPreview();
|
|
||||||
var player = null;
|
|
||||||
let options = {
|
|
||||||
wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
"221.214.127.18" +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
`/cam/realmonitor?channel=${channel}` +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,304 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
let channel = window.location.href.split("?")[1];
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onStopPreview();
|
|
||||||
var player = null;
|
|
||||||
let options = {
|
|
||||||
wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
"221.214.127.18" +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
`/cam/realmonitor?channel=${channel}` +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="../webs/module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,213 +0,0 @@
|
||||||
@charset "utf-8";
|
|
||||||
* {
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
font-size:12px;
|
|
||||||
font-family:Arial, Helvetica, sans-serif;
|
|
||||||
-webkit-text-size-adjust:none;
|
|
||||||
background:#FFFFFF;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
padding:10px;
|
|
||||||
min-width: 1280px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
.h5-left,
|
|
||||||
.h5-right {
|
|
||||||
float: left;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
.fn-padl10 {
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
.fn-marl10 {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
.fn-clear {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.fn-overflow {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.fn-width100 {
|
|
||||||
width: 100px;
|
|
||||||
}
|
|
||||||
.fn-marl10 {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
.fn-marl150 {
|
|
||||||
margin-left: 150px;
|
|
||||||
}
|
|
||||||
.fn-mart10 {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.fn-fontBlue {
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
.fn-fontRed {
|
|
||||||
color: red !important;
|
|
||||||
}
|
|
||||||
.fn-lightBorder {
|
|
||||||
border: 1px solid rgb(255, 204, 0) !important;
|
|
||||||
}
|
|
||||||
.fn-normalBorder {
|
|
||||||
border: 1px solid rgb(125, 125, 125) !important;
|
|
||||||
}
|
|
||||||
fieldset {
|
|
||||||
display:block;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
fieldset legend{
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.h5-play-wrap {
|
|
||||||
width: 500px;
|
|
||||||
height: 300px;
|
|
||||||
background-color: #000;
|
|
||||||
border: 1px solid #333;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.h5-fieldset-wrap {
|
|
||||||
width: 520px;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #333;
|
|
||||||
}
|
|
||||||
.h5-form-item {
|
|
||||||
float: left;
|
|
||||||
height: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
.h5-form-item label {
|
|
||||||
width: 80px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.h5-form-item input {
|
|
||||||
width: 130px;
|
|
||||||
}
|
|
||||||
.h5-form-item select {
|
|
||||||
width: 134px;
|
|
||||||
}
|
|
||||||
.h5-form-item span {
|
|
||||||
width: 60px;
|
|
||||||
}
|
|
||||||
.h5-form-item .h5-button {
|
|
||||||
width: 80px;
|
|
||||||
height: 30px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.h5-ptz-wrap {
|
|
||||||
width: 210px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.h5-step-wrap {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.h5-zoomfocus-wrap {
|
|
||||||
width: 200px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.h5-preset-wrap {
|
|
||||||
float: left;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
.h5-ptz-wrap .h5-button {
|
|
||||||
width: 60px;
|
|
||||||
height: 30px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
.h5-zoomfocus-wrap .h5-button {
|
|
||||||
width: 80px;
|
|
||||||
height: 30px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
.h5-preset-wrap .h5-button {
|
|
||||||
width: 60px;
|
|
||||||
height: 30px;
|
|
||||||
margin-bottom: 3px;
|
|
||||||
}
|
|
||||||
.h5-preset-wrap input {
|
|
||||||
width: 130px;
|
|
||||||
}
|
|
||||||
.h5-table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
background: #ddd;
|
|
||||||
width: 600px;
|
|
||||||
float: left;
|
|
||||||
height: 300px;
|
|
||||||
display: block;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
.h5-table tbody tr:nth-child(odd) {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h5-table tr td{
|
|
||||||
text-align: center;
|
|
||||||
padding: 5px 0;
|
|
||||||
border: 1px solid #999;
|
|
||||||
}
|
|
||||||
.h5-table tr:hover{
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
a.i-download {
|
|
||||||
display: block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
margin: 0 auto;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #cccccc;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
a.i-download:hover {
|
|
||||||
background: #999;
|
|
||||||
}
|
|
||||||
.h5-page {
|
|
||||||
text-align: right;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-right: 18px;
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.h5-ul {
|
|
||||||
float: left;
|
|
||||||
background: #ccc;
|
|
||||||
list-style: none;
|
|
||||||
max-height: 250px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
.h5-ul li {
|
|
||||||
cursor: pointer;
|
|
||||||
height: 20px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.h5-ul li:hover {
|
|
||||||
background-color: #eee;
|
|
||||||
}
|
|
||||||
.video_loading{
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.h5-menu-list {
|
|
||||||
margin-top: 40px;
|
|
||||||
background-color: #ccc;
|
|
||||||
}
|
|
||||||
.h5-menu-list li {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
font-size: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.h5-menu-list li:hover {
|
|
||||||
background-color: #eee;
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
@charset "utf-8";
|
|
||||||
* {
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
font-size:12px;
|
|
||||||
font-family:Arial, Helvetica, sans-serif;
|
|
||||||
-webkit-text-size-adjust:none;
|
|
||||||
background:#FFFFFF;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.h5-left {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h5-play-wrap {
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
background-color: #000;
|
|
||||||
border: 1px solid #333;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
@charset "utf-8";
|
|
||||||
* {
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
font-size:12px;
|
|
||||||
font-family:Arial, Helvetica, sans-serif;
|
|
||||||
-webkit-text-size-adjust:none;
|
|
||||||
background:#FFFFFF;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.h5-left {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h5-play-wrap {
|
|
||||||
width: auto;
|
|
||||||
height: auto;
|
|
||||||
background-color: #000;
|
|
||||||
border: 1px solid #333;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
@charset "utf-8";
|
|
||||||
* {
|
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
}
|
|
||||||
html {
|
|
||||||
width:100%;
|
|
||||||
height:100%;
|
|
||||||
font-size:12px;
|
|
||||||
font-family:Arial, Helvetica, sans-serif;
|
|
||||||
-webkit-text-size-adjust:none;
|
|
||||||
background:#FFFFFF;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.h5-left {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h5-play-wrap {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script><script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,305 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onStopPreview();
|
|
||||||
var player = null;
|
|
||||||
let options = {
|
|
||||||
wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
"221.214.127.18" +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
"/cam/realmonitor?channel=10" +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
// if(curWndType !== 1) {
|
|
||||||
// clickNextWnd();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,305 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
// let channel = window.location.href.split("?")[1];
|
|
||||||
// let ip = window.location.href.split("?")[2];
|
|
||||||
let ip = '221.214.127.18'
|
|
||||||
let channel = '1'
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onStopPreview();
|
|
||||||
var player = null;
|
|
||||||
let options = {
|
|
||||||
wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
ip +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
`/cam/realmonitor?channel=${channel}` +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script><script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,306 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onStopPreview();
|
|
||||||
var player = null
|
|
||||||
let options = {
|
|
||||||
|
|
||||||
wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
"221.214.127.18" +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
"/cam/realmonitor?channel=10" +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
// if(curWndType !== 1) {
|
|
||||||
// clickNextWnd();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,306 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onStopPreview();
|
|
||||||
var player = null
|
|
||||||
let options = {
|
|
||||||
|
|
||||||
wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
"221.214.127.18" +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
"/cam/realmonitor?channel=10" +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
// if(curWndType !== 1) {
|
|
||||||
// clickNextWnd();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="webs/module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="webs/module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="webs/module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css"></head>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
<script src="module/PlayerControl.js"></script>
|
|
||||||
<script src="index.js"></script>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,306 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onStopPreview();
|
|
||||||
var player = null
|
|
||||||
let options = {
|
|
||||||
|
|
||||||
wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
"221.214.127.18" +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
"/cam/realmonitor?channel=10" +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
// if(curWndType !== 1) {
|
|
||||||
// clickNextWnd();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta http-equiv="Pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
|
|
||||||
<meta http-equiv="Expires" content="0" />
|
|
||||||
<link rel="stylesheet" href="css/style.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="h5-left">
|
|
||||||
<div class="h5-play-wrap">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="module/PlayerControl.js"></script><script src="index.js"></script></body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,306 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
onStopPreview();
|
|
||||||
var player = null
|
|
||||||
let options = {
|
|
||||||
|
|
||||||
wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
"221.214.127.18" +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
"/cam/realmonitor?channel=10" +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
// if(curWndType !== 1) {
|
|
||||||
// clickNextWnd();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,307 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let ip = window.location.href.split("?")[2];
|
|
||||||
let channel = window.location.href.split("?")[1];
|
|
||||||
onStopPreview();
|
|
||||||
var player = null;
|
|
||||||
let options = {
|
|
||||||
wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
ip +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
`/cam/realmonitor?channel=${channel}` +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
// if(curWndType !== 1) {
|
|
||||||
// clickNextWnd();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,307 +0,0 @@
|
||||||
let $ip,
|
|
||||||
$port,
|
|
||||||
$user,
|
|
||||||
$password,
|
|
||||||
$loginState,
|
|
||||||
$stream,
|
|
||||||
$volume,
|
|
||||||
$canvas, //canvas播放视频DOM
|
|
||||||
$video, //video播放视频DOM
|
|
||||||
$canvas_ivs, //canvas绘图DOM
|
|
||||||
$video_wrap, //视频外层Wrap
|
|
||||||
$videoLoading, //“加载中...”提示
|
|
||||||
WndIndex = 0, //宫格窗口Id
|
|
||||||
WebCaps = null; //webCapsConfig文件转存变量
|
|
||||||
let isLogin = false; //是否登录
|
|
||||||
let channel = 0; //当前通道
|
|
||||||
let curPage = 1; //视频下载列表的当前页
|
|
||||||
let totalPage = 1; //视频下载列表的总页数
|
|
||||||
let recordArr = []; //视频文件数组
|
|
||||||
let canvasSon = null; //canvas绘图实例
|
|
||||||
let playerInstance = []; //播放|回放实例数组
|
|
||||||
let recordInstance = []; //录像下载实例数组
|
|
||||||
let talkInstance = []; //对讲实例数组
|
|
||||||
let ivsInstance = []; //canvas绘图实例数组
|
|
||||||
let cutInstance = []; //视频裁剪实例数组
|
|
||||||
let onlineChannel = []; //当前成功拉流的视频通道数组
|
|
||||||
let isCuting = false; //是否正在进行视频裁剪
|
|
||||||
let downList = []; //勾选的视频下载列表
|
|
||||||
let downItemIndex = 0; //视频下载索引
|
|
||||||
let canvasParam = {
|
|
||||||
//canvas绘图默认传参
|
|
||||||
strokeColor: "#FF0000",
|
|
||||||
title: "",
|
|
||||||
resizeEnable: false,
|
|
||||||
moveEnable: false,
|
|
||||||
closeEnable: true,
|
|
||||||
array: true,
|
|
||||||
showSize: false,
|
|
||||||
selectType: "inSide",
|
|
||||||
disappear: true,
|
|
||||||
selected: false,
|
|
||||||
};
|
|
||||||
const lINENUMBER = 16; //回放列表每页显示录像条数
|
|
||||||
let curEnlargeWnd = 0;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 初始化
|
|
||||||
*/
|
|
||||||
const init = () => {
|
|
||||||
let videoStr = "";
|
|
||||||
for (var i = 0; i < 16; i++) {
|
|
||||||
videoStr +=
|
|
||||||
'<div wnd-index="' +
|
|
||||||
i +
|
|
||||||
'" style="float: left; background-color: #000; position: relative; width: 100%; height: 100%;overflow:hidden;"><canvas id="h5_canvas_' +
|
|
||||||
i +
|
|
||||||
'" style="width:100%;height:100%;"></canvas><p id="h5_loading_' +
|
|
||||||
i +
|
|
||||||
'" class="video_loading" style="display:none">加载中...</p><video id="h5_video_' +
|
|
||||||
i +
|
|
||||||
'" style="display: none;width:100%;height:100%;position:absolute;top:0;left:0"></video><canvas id="h5_ivs_' +
|
|
||||||
i +
|
|
||||||
'" style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;" width="500" height="300"></canvas></div>';
|
|
||||||
}
|
|
||||||
document.querySelector(".h5-play-wrap").innerHTML = videoStr;
|
|
||||||
document.querySelectorAll(".h5-play-wrap div").forEach((item, index) => {
|
|
||||||
item.addEventListener("click", function (event) {
|
|
||||||
let _wndIndex = event.target.parentNode.getAttribute("wnd-index") - 0;
|
|
||||||
if (
|
|
||||||
!(playerInstance[_wndIndex] && playerInstance[_wndIndex].isPlayback)
|
|
||||||
) {
|
|
||||||
channel = event.target.parentNode.getAttribute("channel") - 0;
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.querySelectorAll(".h5-play-wrap div")
|
|
||||||
.forEach(function (item, index) {
|
|
||||||
if (index === _wndIndex) {
|
|
||||||
item.style.borderColor = "rgb(255, 204, 0)";
|
|
||||||
if (
|
|
||||||
!(
|
|
||||||
playerInstance[_wndIndex] &&
|
|
||||||
playerInstance[_wndIndex].isPlayback
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
if (onlineChannel.indexOf(channel) > -1) {
|
|
||||||
document
|
|
||||||
.querySelector(
|
|
||||||
'#h5_channel_list li[channel="' + channel + '"]'
|
|
||||||
)
|
|
||||||
.classList.add("fn-fontRed");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
WndIndex = _wndIndex;
|
|
||||||
setVideoDom();
|
|
||||||
} else {
|
|
||||||
item.style.borderColor = "rgb(125, 125, 125)";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
$ip = $("#h5_ip");
|
|
||||||
$port = $("#h5_port");
|
|
||||||
$user = $("#h5_user");
|
|
||||||
$password = $("#h5_password");
|
|
||||||
$loginState = $("#h5_loginState");
|
|
||||||
$stream = $("#h5_stream");
|
|
||||||
$volume = $("#h5_volume");
|
|
||||||
$video_wrap = document.querySelector(".h5-play-wrap");
|
|
||||||
setVideoDom();
|
|
||||||
|
|
||||||
let inputArr = document.querySelectorAll("input[btn-for]");
|
|
||||||
for (let node of inputArr) {
|
|
||||||
node.addEventListener("click", bindClickEvent);
|
|
||||||
}
|
|
||||||
|
|
||||||
let selArr = document.querySelectorAll("select[sel-for]");
|
|
||||||
for (let node of selArr) {
|
|
||||||
node.addEventListener("change", bindChangeEvent);
|
|
||||||
}
|
|
||||||
[
|
|
||||||
"fullscreenchange",
|
|
||||||
"webkitfullscreenchange",
|
|
||||||
"mozfullscreenchange",
|
|
||||||
"msfullscreenchange",
|
|
||||||
].forEach((item, index) => {
|
|
||||||
document.addEventListener(item, fullscreenchange, false);
|
|
||||||
});
|
|
||||||
onPreview(false);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 切换宫格时重新设置当前视频dom
|
|
||||||
*/
|
|
||||||
const setVideoDom = () => {
|
|
||||||
$canvas = $("#h5_canvas_" + WndIndex);
|
|
||||||
$video = $("#h5_video_" + WndIndex);
|
|
||||||
$canvas_ivs = $("#h5_ivs_" + WndIndex);
|
|
||||||
$videoLoading = $("#h5_loading_" + WndIndex);
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
/**
|
|
||||||
* @description 预览
|
|
||||||
* @param {boolean} isPlayback 是否是回放
|
|
||||||
* @param {string} url 回放视频的url
|
|
||||||
* @param {number} playbackIndex 回放视频的索引
|
|
||||||
* @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
|
|
||||||
*/
|
|
||||||
const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
|
|
||||||
if (
|
|
||||||
playerInstance[WndIndex] &&
|
|
||||||
onlineChannel.indexOf(channel) > -1 &&
|
|
||||||
!isChangeStream
|
|
||||||
) {
|
|
||||||
alert("通道" + (channel + 1) + "已存在！");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let ip = window.location.href.split("?")[2];
|
|
||||||
let channel = window.location.href.split("?")[1];
|
|
||||||
onStopPreview();
|
|
||||||
var player = null;
|
|
||||||
let options = {
|
|
||||||
wsURL: "ws://" + ip + ":" + "8200" + "/rtspoverwebsocket",
|
|
||||||
rtspURL:
|
|
||||||
"rtsp://" +
|
|
||||||
ip +
|
|
||||||
":" +
|
|
||||||
"8200" +
|
|
||||||
`/cam/realmonitor?channel=${channel}` +
|
|
||||||
"&subtype=0" +
|
|
||||||
"&proto=Private3",
|
|
||||||
username: "admin",
|
|
||||||
password: "pyss2017",
|
|
||||||
lessRateCanvas: true,
|
|
||||||
playback: isPlayback,
|
|
||||||
isPrivateProtocol: false,
|
|
||||||
realm: RPC.realm, //设备登录返回的realm
|
|
||||||
playbackIndex: playbackIndex,
|
|
||||||
};
|
|
||||||
player = new PlayerControl(options);
|
|
||||||
|
|
||||||
player.on("MSEResolutionChanged", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
});
|
|
||||||
player.on("PlayStart", function (e) {
|
|
||||||
console.log(e);
|
|
||||||
$videoLoading.style.display = "none";
|
|
||||||
if (!player.isPlayback) {
|
|
||||||
onlineChannel.push(channel);
|
|
||||||
updateChannelList();
|
|
||||||
// if(curWndType !== 1) {
|
|
||||||
// clickNextWnd();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
player.on("GetFrameRate", function (e) {
|
|
||||||
console.log("GetFrameRate: " + e);
|
|
||||||
});
|
|
||||||
player.on("FrameTypeChange", function (e) {
|
|
||||||
console.log("FrameTypeChange: " + e);
|
|
||||||
});
|
|
||||||
player.on("Error", function (e) {
|
|
||||||
//console.log('Error: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("IvsDraw", function (e) {
|
|
||||||
//console.log('IvsDraw: ' + JSON.stringify(e))
|
|
||||||
});
|
|
||||||
player.on("WorkerReady", function () {
|
|
||||||
player.connect();
|
|
||||||
});
|
|
||||||
player.init($canvas, $video);
|
|
||||||
$canvas.parentNode.setAttribute("channel", channel);
|
|
||||||
$videoLoading.style.display = "";
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 更新通道列表
|
|
||||||
*/
|
|
||||||
const updateChannelList = () => {
|
|
||||||
document.querySelectorAll("#h5_channel_list li").forEach((item) => {
|
|
||||||
item.classList.remove("fn-fontBlue");
|
|
||||||
item.classList.remove("fn-fontRed");
|
|
||||||
if (onlineChannel.indexOf(item.getAttribute("channel") - 0) > -1) {
|
|
||||||
item.classList.add("fn-fontBlue");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 停止预览
|
|
||||||
*/
|
|
||||||
const onStopPreview = () => {
|
|
||||||
if (playerInstance[WndIndex]) {
|
|
||||||
playerInstance[WndIndex].stop();
|
|
||||||
playerInstance[WndIndex].close();
|
|
||||||
playerInstance[WndIndex] = null;
|
|
||||||
let _index = onlineChannel.indexOf(channel);
|
|
||||||
onlineChannel.splice(_index, 1);
|
|
||||||
updateChannelList();
|
|
||||||
let dom = $canvas;
|
|
||||||
if (dom.style.display === "none") {
|
|
||||||
dom = $video;
|
|
||||||
}
|
|
||||||
dom.style.display = "none";
|
|
||||||
if (talkInstance[WndIndex]) {
|
|
||||||
talkInstance[WndIndex].talk("off");
|
|
||||||
talkInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
if (recordInstance[WndIndex]) {
|
|
||||||
recordInstance[WndIndex].startRecord(false);
|
|
||||||
recordInstance[WndIndex] = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
/**
|
|
||||||
* @description 自定义选择器
|
|
||||||
* @param {string} str dom元素
|
|
||||||
*/
|
|
||||||
function $(str) {
|
|
||||||
if (str.charAt(0) == "#") {
|
|
||||||
return document.getElementById(str.substring(1));
|
|
||||||
} else if (str.charAt(0) == ".") {
|
|
||||||
return document.getElementsByClassName(str.substring(1));
|
|
||||||
} else {
|
|
||||||
return document.getElementsByTagName(str);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 设置样式
|
|
||||||
* @param {object} obj dom元素
|
|
||||||
* @param {*} json css样式
|
|
||||||
*/
|
|
||||||
function setStyle(obj, json) {
|
|
||||||
for (let i in json) {
|
|
||||||
obj.style[i] = json[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定click事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindClickEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("btn-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* @description 绑定change事件
|
|
||||||
* @param {object} event event对象
|
|
||||||
*/
|
|
||||||
function bindChangeEvent(event) {
|
|
||||||
let $el = event.target,
|
|
||||||
method = $el.getAttribute("sel-for"),
|
|
||||||
disabled = $el.getAttribute("disabled");
|
|
||||||
if (!disabled) {
|
|
||||||
eval(method + "()");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function fullscreenchange() {
|
|
||||||
if (getFull()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init();
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#app {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: transparent;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background: transparent;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 100vh;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
/* background: transparent; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script></script>
|
|
||||||
<style lang="less">
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#app {
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
padding-top: 15px;
|
|
||||||
padding-left: 13px;
|
|
||||||
padding-bottom: 13px;
|
|
||||||
padding-right: 13px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: #04134c;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
/* background: transparent; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {},
|
|
||||||
mounted() {
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
let json = event.data;
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background: transparent; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {},
|
|
||||||
mounted() {
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
let json = event.data;
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
/* background: transparent; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {},
|
|
||||||
mounted() {
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
let json = event.data;
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
/* background: transparent; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {},
|
|
||||||
mounted() {
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
let json = event.data;
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
/* background: transparent; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {},
|
|
||||||
mounted() {
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
let json = event.data;
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
/* background: transparent; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {},
|
|
||||||
mounted() {
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
let json = event.data;
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png),
|
|
||||||
url(../../assets/img/遮罩上.png), url(../../assets/img/下遮罩.png);
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {},
|
|
||||||
mounted() {
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
let json = event.data;
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png);
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return{
|
|
||||||
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
if (that.$route.path == "/area/nyjcd/pds") {
|
|
||||||
let json = event.data;
|
|
||||||
if (json == "无操作标识") {
|
|
||||||
that.$store.commit("SetNoOperation", json);
|
|
||||||
} else {
|
|
||||||
that.$store.commit("SetNoOperation", "无操作标识");
|
|
||||||
}
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
/* background: #fff; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="app"> <router-view /> </div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import autofit from "autofit.js";
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// autofit.init(
|
|
||||||
// {
|
|
||||||
// dh: 3240,
|
|
||||||
// dw: 7680,
|
|
||||||
// el: "#app",
|
|
||||||
// resize: true,
|
|
||||||
// },
|
|
||||||
// false
|
|
||||||
// );
|
|
||||||
|
|
||||||
if (window.vuplex) {
|
|
||||||
this.addMessageListener();
|
|
||||||
} else {
|
|
||||||
window.addEventListener("vuplexready", this.addMessageListener);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addMessageListener() {
|
|
||||||
let that = this;
|
|
||||||
window.vuplex.addEventListener("message", function (event) {
|
|
||||||
if (that.$route.path == "/area/nyjcd/pds") {
|
|
||||||
let json = event.data;
|
|
||||||
if (json == "无操作标识") {
|
|
||||||
that.$store.commit("SetNoOperation", json);
|
|
||||||
} else {
|
|
||||||
that.$store.commit("SetNoOperation", "无操作标识");
|
|
||||||
}
|
|
||||||
that.$router.push({
|
|
||||||
name: "pds1",
|
|
||||||
query: {
|
|
||||||
type: json,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
autofit.off();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-family: "MicrosoftYaHei" !important;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
#app {
|
|
||||||
width: 7680px;
|
|
||||||
height: 3240px;
|
|
||||||
/* width: 100vw;
|
|
||||||
height: 100vh; */
|
|
||||||
overflow: hidden;
|
|
||||||
/* background-image: url(./assets/img/左遮罩.png), url(./assets/img/右遮罩.png),
|
|
||||||
url(./assets/img/遮罩上.png), url(./assets/img/下遮罩.png); */
|
|
||||||
/* background: #fff; */
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 获取品牌
|
|
||||||
export function loadBrand (limit) {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 获取品牌
|
|
||||||
export function loadBrand (limit) {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `https://img2020.cnblogs.com/blog/2600859/202110/2600859-20211025144758994-1769294655.png`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 获取品牌
|
|
||||||
export function loadBrand (limit) {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `https://st0.dancf.com/market-operations/market/side/1693884270949.png?x-oss-process=image/resize,w_260/sharpen,80/interlace,1,image/format,webp`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 获取品牌
|
|
||||||
export function loadBrand (limit) {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `https://st0.dancf.com/market-operations/market/side/169388420949.png?x-oss-process=image/resize,w_260/sharpen,80/interlace,1,image/format,webp`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 获取品牌
|
|
||||||
export function loadBrand (limit) {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `https://st0.dancf.com/market-operations/market/side/1693880949.png?x-oss-process=image/resize,w_260/sharpen,80/interlace,1,image/format,webp`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 获取品牌
|
|
||||||
export function loadBrand (limit) {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `https://st0.dancf.com/market-operations/market/side/169388420949.png?x-oss-process=image/resize,w_260/sharpen,80/interlace,1,image/format,webp`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 获取品牌
|
|
||||||
export function loadBrand (limit) {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `https://img2020.cnblogs.com/blog/2600859/202110/2600859-20211025144758994-1769294655.png`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
//
|
|
||||||
export function loadBrand (limit) {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 负荷管理
|
|
||||||
export function GetFhgl () {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 负荷管理
|
|
||||||
export function GetFhgl () {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 负荷分析
|
|
||||||
export function GetFhfx () {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 负荷管理
|
|
||||||
export function GetFhgl () {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 负荷分析
|
|
||||||
export function GetFhfx () {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 变压器负载率
|
|
||||||
export function GetFzl () {
|
|
||||||
return request({
|
|
||||||
// url: 'brand',
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 负荷管理
|
|
||||||
export function GetFhgl () {
|
|
||||||
return request({
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 负荷分析
|
|
||||||
export function GetFhfx () {
|
|
||||||
return request({
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 变压器负载率
|
|
||||||
export function GetByqfzl () {
|
|
||||||
return request({
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
import request from '@/utils/request'
|
|
||||||
|
|
||||||
// 负荷管理
|
|
||||||
export function GetFhgl () {
|
|
||||||
return request({
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 负荷分析
|
|
||||||
export function GetFhfx () {
|
|
||||||
return request({
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 变压器负载率
|
|
||||||
export function GetByqfzl () {
|
|
||||||
return request({
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// 负荷分类
|
|
||||||
export function GetFhfl () {
|
|
||||||
return request({
|
|
||||||
url: `brand?limit=${limit}`,
|
|
||||||
method: 'GET'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue