Compare commits
2 Commits
727304652b
...
0d9ea4ee39
| Author | SHA1 | Date |
|---|---|---|
unknown
|
0d9ea4ee39 | |
|
unknown
|
2ee6885bae |
|
|
@ -0,0 +1,32 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
@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;
|
||||
}
|
||||
|
|
@ -0,0 +1,306 @@
|
|||
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();
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
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();
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
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();
|
||||
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
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
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
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
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
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
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
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
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
|
|
@ -14,7 +14,6 @@
|
|||
"element": "^0.1.4",
|
||||
"element-ui": "^2.15.14",
|
||||
"highcharts": "^11.2.0",
|
||||
"moment": "^2.29.4",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"save": "^2.9.0",
|
||||
|
|
@ -8630,14 +8629,6 @@
|
|||
"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
@ -19773,11 +19764,6 @@
|
|||
"integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
|
||||
"dev": true
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.29.4",
|
||||
"resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",
|
||||
"integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
|
||||
},
|
||||
"mrmime": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
"element": "^0.1.4",
|
||||
"element-ui": "^2.15.14",
|
||||
"highcharts": "^11.2.0",
|
||||
"moment": "^2.29.4",
|
||||
"postcss-pxtorem": "^6.0.0",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"save": "^2.9.0",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
ref="videos"
|
||||
></iframe>
|
||||
<p class="h_footer">
|
||||
<span class="time">{{ dates }}</span>
|
||||
<!-- <span class="time">{{ dates }}</span> -->
|
||||
<img
|
||||
src="../../assets/ZNYWJK/放大.png"
|
||||
alt=""
|
||||
|
|
@ -199,7 +199,6 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import moment from "moment";
|
||||
import screenfull from "screenfull";
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -386,43 +385,43 @@ export default {
|
|||
],
|
||||
sxtlist: [
|
||||
{
|
||||
channel: "D19",
|
||||
channel: "9",
|
||||
ip: "221.214.127.18",
|
||||
name: "3号煤磨在线监测",
|
||||
},
|
||||
{
|
||||
channel: "D14",
|
||||
channel: "12",
|
||||
ip: "221.214.127.18",
|
||||
name: "水泥散12#发货口",
|
||||
},
|
||||
{
|
||||
channel: "69",
|
||||
channel: "6",
|
||||
ip: "221.214.127.18",
|
||||
name: "1#回转窑",
|
||||
},
|
||||
{
|
||||
channel: "70",
|
||||
channel: "10",
|
||||
ip: "221.214.127.18",
|
||||
name: "辊压机",
|
||||
},
|
||||
{
|
||||
channel: "71",
|
||||
channel: "3",
|
||||
ip: "221.214.127.18",
|
||||
name: "2#窑",
|
||||
},
|
||||
|
||||
{
|
||||
channel: "63",
|
||||
channel: "13",
|
||||
ip: "221.214.127.18",
|
||||
name: "垃圾处理北门外",
|
||||
},
|
||||
{
|
||||
channel: "71",
|
||||
channel: "5",
|
||||
ip: "221.214.127.18",
|
||||
name: "2#窑",
|
||||
},
|
||||
],
|
||||
dates: new Date(),
|
||||
// dates: new Date(),
|
||||
isFullScreenTag: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -463,17 +462,7 @@ export default {
|
|||
// })
|
||||
// }
|
||||
},
|
||||
mounted() {
|
||||
setInterval(() => {
|
||||
moment.locale("zh-cn");
|
||||
// 获取当前时间
|
||||
const currentTime = moment();
|
||||
// 格式化时间为指定格式：年-月-日 星期几 时分秒
|
||||
const formattedTime = currentTime.format("YYYY-MM-DD dddd HH:mm:ss");
|
||||
// 输出格式化后的时间
|
||||
this.dates = formattedTime;
|
||||
}, 100);
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
|
|
@ -714,6 +703,7 @@ export default {
|
|||
width: 5px;
|
||||
height: 5px; // height对于纵向滚动条来说没有用，但是对于横向就有用了
|
||||
border-radius: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
// 滑块
|
||||
::-webkit-scrollbar-thumb {
|
||||
|
|
@ -726,7 +716,26 @@ export default {
|
|||
// 轨道
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
background: url(../../assets/ZNYWJK/滑动条.png);
|
||||
background-size: cover;
|
||||
background-color: #f00;
|
||||
}
|
||||
/* 选中滚动条按钮 */
|
||||
::-webkit-scrollbar-button{
|
||||
background-color: #f00;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 选中向上箭头 */
|
||||
::-webkit-scrollbar-button:start{
|
||||
display: none !important;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
/* 选中向下箭头 */
|
||||
::-webkit-scrollbar-button:end{
|
||||
display: none !important;
|
||||
height: 0px;
|
||||
}
|
||||
.spjk_one {
|
||||
width: 551px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue