diff --git a/css/video/video.css b/css/video/video.css
index 75b9699..e09b229 100644
--- a/css/video/video.css
+++ b/css/video/video.css
@@ -157,9 +157,9 @@ body {
}
#left-top-two {
- width: 100%;
+ width: 92%;
height: 26%;
- justify-content: space-evenly;
+ justify-content: space-between;
}
#jj-box,
@@ -307,7 +307,7 @@ body {
/*视频框样式*/
.ball-content {
- width: 96%;
+ width: 98%;
height: 94%;
margin: 4% 1% 0 1%;
pointer-events: none;
@@ -368,4 +368,37 @@ body {
justify-content: end;
}
-/* 右侧样式 start */
\ No newline at end of file
+/* 右侧样式 start */
+
+/* dtree 样式 start */
+.dtree-nav-item {
+ background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(35, 161, 161, 0.5) 49%, rgba(153, 255, 255, 0) 100%);
+ border-radius: 0px 0px 0px 0px;
+ margin: 10px 0 10px 0;
+}
+
+.dtree-laySimple-item:hover {
+ background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(50, 251, 251, 0.6) 49%, rgba(153, 255, 255, 0) 100%) !important;
+ border-radius: 0px 0px 0px 0px;
+}
+
+.dtree-laySimple-item-this {
+ background: linear-gradient(90deg, rgba(153, 255, 255, 0) 0%, rgba(50, 251, 251, 0.6) 49%, rgba(153, 255, 255, 0) 100%) !important;
+ border-radius: 0px 0px 0px 0px;
+ color: rgba(50, 251, 251, 0.6) !important;
+}
+
+.dtree-laySimple-item cite {
+ font-size: 16px !important;
+}
+
+.dtree-laySimple-item:hover cite {
+ color: rgba(50, 251, 251, 0.6) !important;
+}
+
+.dtree-laySimple-ficon {
+ font-size: 14px !important;
+ color: #fff !important;
+}
+
+/* dtree 样式 start */
\ No newline at end of file
diff --git a/img/video/voi_photo2.png b/img/video/voi_photo2.png
new file mode 100644
index 0000000..7773467
Binary files /dev/null and b/img/video/voi_photo2.png differ
diff --git a/img/video/voi_photo3.png b/img/video/voi_photo3.png
new file mode 100644
index 0000000..4a03bba
Binary files /dev/null and b/img/video/voi_photo3.png differ
diff --git a/img/video/voi_photo4.png b/img/video/voi_photo4.png
new file mode 100644
index 0000000..abcd3dd
Binary files /dev/null and b/img/video/voi_photo4.png differ
diff --git a/js/pages/video/video.js b/js/pages/video/video.js
index dd29df2..35833e7 100644
--- a/js/pages/video/video.js
+++ b/js/pages/video/video.js
@@ -1,15 +1,61 @@
-let layer, form;
+let layer, form, util, dtree, videoTree;
let winDom = 'videoPlayer1';
-layui.use(['layer', 'form'], function () {
+layui.config({
+ base: "../../plugin/layui-v2.9.7/layui/dtree/", //此处路径请自行处理, 可以使用绝对路径
+}).extend({
+ dtree: 'dtree'
+}).use(['layer', 'form', 'dtree', 'util'], function () {
form = layui.form;
layer = layui.layer;
- $("#voi-photo").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
- $("body").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
- console.log("选中的标段编码：" + parent.$('#bidPro').val())
+ dtree = layui.dtree;
+ util = layui.util;
initVideo();
- setTimeout(() => {
- QXPlayVideo('201115200124261007', '0', winDom)
- }, 2000);
-
loadVideoTree();
+ $("body").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+ $("#voi-photo").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+ $("#video-tree").niceScroll({ cursorborder: "", cursorcolor: "#c0c4cc", boxzoom: true });
+ dtree.on("node('video-tree')", function (obj) {
+ if (obj.param.level === '1') {
+ return parent.layer.msg('请选择球机', { icon: 7 });
+ }
+ const nodeId = obj.param.nodeId;
+ let puid = nodeId.replace('QJ', '');
+ if (puid) {
+ parent.layer.msg("视频加载中,请稍候...", { icon: 16, scrollbar: false, time: 1000, });
+ QXPlayVideo(puid, '0', winDom)
+ playControl();
+ videoObject.devCode = puid;
+ } else {
+ return parent.layer.msg('请选择球机', { icon: 7 });
+ }
+ });
+
+ util.event('lay-active', {
+ // 本地抓拍
+ photoLocal: function () {
+ screenshot();
+ },
+ // 远程录像
+ videoRemote: function () {
+ if (videoObject.playState) {
+ if (isEmpty(videoObject.remoteId)) {
+ // $(this).attr("src", "../../img/video/videoRemote-select.png");
+ remoteVideo(videoObject.devCode, 0);
+ } else {
+ // $(this).attr("src", "../../img/video/videoRemote.png");
+ stopRemote(videoObject.remoteId, 0)
+ }
+ } else {
+ parent.layer.msg("请先播放视频。。。", { icon: 7 });
+ }
+ },
+ // 远程抓拍
+ photoRemote: function () {
+ if (videoObject.playState) {
+ remoteVideo(videoObject.devCode, 1);
+ } else {
+ parent.layer.msg("请先播放视频。。。", { icon: 7 });
+ }
+ }
+ });
});
diff --git a/js/pages/video/videoAjax.js b/js/pages/video/videoAjax.js
index 5aae72b..326d1a0 100644
--- a/js/pages/video/videoAjax.js
+++ b/js/pages/video/videoAjax.js
@@ -1,14 +1,14 @@
/* 球机树 */
function loadVideoTree() {
const bidCode = parent.$('#bidPro').val();
- const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId;
+ const keyWord = $('#keyWord').val();
+ const paramData = 'bidCode=' + bidCode + '&roleCode=' + roleCode + '&orgId=' + orgId + '&userId=' + userId + '¶m=' + keyWord;
let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData);
const url = commonUrl + 'screen/largeScreen/video/getVideoTree?params=' + montageParam;
ajaxRequestGet(url, "GET", true, function () {
}, function (result) {
- console.log(result);
if (result.code === 200) {
- // setData(result.data);
+ setData(result.data);
} else if (result.code === 500) {
console.error('视频树' + result.msg);
} else if (result.code === 401) {
@@ -18,4 +18,31 @@ function loadVideoTree() {
error(xhr, status, error)
}, aqEnnable);
+ function setData(data) {
+ let totalNum = 0, onlineNum = 0, offLineNum = 0;
+ $.each(data, function (index, item) {
+ if (item.id !== '0') {
+ totalNum++;
+ if (item.onLine === '1') {
+ onlineNum++;
+ item.title = '
' + item.title + ''
+ } else {
+ offLineNum++;
+ item.title = '
' + item.title + ''
+ }
+ }
+ })
+ videoTree = dtree.render({
+ elem: "#video-tree",
+ width: "96%", // 指定树的宽度
+ data: data,
+ dataFormat: "list",
+ skin: "laySimple",
+ line: false, // 显示树线
+ });
+ // 设备在线情况
+ $('.device-status').eq(0).html('全部（' + totalNum + '）')
+ $('.device-status').eq(1).html('在线（' + onlineNum + '）')
+ $('.device-status').eq(2).html('离线（' + offLineNum + '）')
+ }
}
\ No newline at end of file
diff --git a/js/pages/video/videoConnect.js b/js/pages/video/videoConnect.js
index d0f429a..4a6b991 100644
--- a/js/pages/video/videoConnect.js
+++ b/js/pages/video/videoConnect.js
@@ -74,7 +74,6 @@ function getQXConnect() {
* @param dom 窗口id
*/
function QXPlayVideo(puId, idx, dom) {
-
//播视频接口
destoryVideo(flvPlayer);
let url = qxUrl + "stream.flv?puid=" + puId + "&idx=" + idx + "&stream=0&token=" + qxToken;
@@ -108,7 +107,7 @@ function QXPlayVideo(puId, idx, dom) {
flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (errorType, errorDetail, errorInfo) => {
if (flvPlayer) {
videoObject.playState = true;
- $('.noVideoMask').css('background-image', 'none')
+ // $('.noVideoMask').css('background-image', 'none')
//视频断流、延迟处理
$('#' + dom).attr("ontimeupdate", "progress(event)")
recordVideo();
@@ -222,10 +221,10 @@ function remoteVideo(puid, type) {
requestPost("CSS/C_CSS_StartManualStorage" + "?token=" + qxToken, params, function (data) {
if (data.responseJSON.Error === '0') {
if (type === 0) {
- layer.msg("开始录像成功", { icon: 1 });
+ parent.layer.msg("开始录像成功", { icon: 1 });
videoObject.remoteId = data.responseJSON.Param.ID
} else {
- layer.msg("抓拍成功", { icon: 1 });
+ parent.layer.msg("抓拍成功", { icon: 1 });
setTimeout(function () {
stopRemote(data.responseJSON.Param.ID, 1)
}, 3000);
@@ -250,7 +249,7 @@ function stopRemote(id, type) {
requestPost("CSS/C_CSS_StopManualStorage" + "?token=" + qxToken, params, function (data) {
if (!isEmpty(data)) {
if (type === 0) {
- layer.msg("停止录像成功", { icon: 1 });
+ parent.layer.msg("停止录像成功", { icon: 1 });
videoObject.remoteId = null;
}
}
@@ -307,7 +306,7 @@ function destoryVideo(flvPlayer) {
*/
function recordVideo() {
let video = $("#videoPlayer1")[0];
- let encodeType = "video/webm;codecs=vp9";
+ let encodeType = "video/webm;codecs=vp9,opus";
let chunks = [];
//创建MediaRecorder，设置媒体参数
let stream = video.captureStream();
@@ -322,17 +321,15 @@ function recordVideo() {
$('#videoLocal')[0].onclick = function () {
if (start) {
videoObject.recordVideoState = true;
- layer.msg("开启本地录像", { icon: 0 });
+ parent.layer.msg("开启本地录像", { icon: 0 });
chunks = [];
recorder.start(10);
- $(this).attr("src", "../../img/video/videoLocal-select.png");
start = false;
} else {
- layer.msg("关闭本地录像", { icon: 0 });
+ parent.layer.msg("关闭本地录像", { icon: 0 });
videoObject.recordVideoState = false;
recorder.stop();
download();
- $(this).attr("src", "../../img/video/videoLocal.png");
start = true;
}
}
@@ -340,12 +337,22 @@ function recordVideo() {
//下载录制内容
function download() {
let blob = new Blob(chunks, { type: 'video/webm' });
- let file = new window.File([blob], new Date().getTime() + ".webm", { type: 'video/webm' })
- console.log(file);
- let formData = new FormData();
- formData.append("multipartFile", file)
- let loadingMsg = layer.msg('视频加载中,请稍候...', { icon: 16, scrollbar: false, time: 0 });
- $.ajax({
+ const a = document.createElement('a');
+ document.body.appendChild(a)
+ a.style.display = 'none'
+ const url = window.URL.createObjectURL(blob);
+ a.href = url;
+ a.download = '视频.webm'; //视频下载后的名称
+ a.click();
+ document.body.removeChild(a)
+ window.URL.revokeObjectURL(url);
+
+ // let file = new window.File([blob], new Date().getTime() + ".webm", { type: 'video/webm' })
+ // console.log(file);
+ // let formData = new FormData();
+ // formData.append("multipartFile", file)
+ // let loadingMsg = layer.msg('视频加载中,请稍候...', { icon: 16, scrollbar: false, time: 0 });
+ /* $.ajax({
url: dataUrl + 'system/sys/video/webmToMp4?token=' + token,
type: 'POST',
headers: {
@@ -367,7 +374,7 @@ function recordVideo() {
},
error: function (result) {
}
- });
+ }); */
}
}
@@ -376,7 +383,7 @@ function recordVideo() {
*/
function screenshot() {
let video = $("#videoPlayer1")[0];
- let canvas = $('#canvasPlayer1')[0];
+ let canvas = document.getElementById("canvas");;
let ctx = canvas.getContext('2d');
let H = window.innerHeight;
let W = window.innerWidth;
@@ -475,4 +482,35 @@ function uploadRectFile(obj) {
xhr.send();
}
+function playControl() {
+ let key;
+ //点击事件
+ let btn = $('[lay-event=control]');
+ btn.unbind();
+ btn.mousedown(function (event) {
+ if (videoObject.playState) {
+ key = qxControlType[$(this).attr('id')];
+ if (key[2]) {
+ turnControl(key[0], videoObject.devCode).then(r => {
+ });
+ } else {
+ qxControl(videoObject.devCode, key[1])
+ }
+ }
+ event.stopPropagation();
+ }).mouseup(function (event) {
+ if (videoObject.playState) {
+ key = qxControlType[$(this).attr('id')];
+ if (key[2]) {
+ turnControl(key[3], videoObject.devCode).then(r => {
+ });
+ } else {
+ qxControl(videoObject.devCode, key[3])
+ }
+ } else {
+ parent.layer.msg("请先播放视频....", { icon: 7 });
+ }
+ event.stopPropagation();
+ });
+}
diff --git a/pages/video/video.html b/pages/video/video.html
index ec7f8a0..1d38e4c 100644
--- a/pages/video/video.html
+++ b/pages/video/video.html
@@ -6,6 +6,8 @@
+
+
@@ -27,35 +29,35 @@
@@ -63,47 +65,49 @@
-
全部（100）
-
在线（20）
-
离线（80）
+
全部（0）
+
在线（0）
+
离线（0）
+
+
-
+
+ 
@@ -139,7 +143,7 @@
