632 lines
21 KiB
JavaScript
632 lines
21 KiB
JavaScript
var loginName = "admin";
|
||
var password = "bns@Admin1";
|
||
var webSocket;
|
||
var tokens;
|
||
var token = localStorage.getItem("token");
|
||
$(function () {
|
||
//键盘监听事件——本地截屏
|
||
document.onkeydown = function (event) {
|
||
let e = event || window.event || arguments.callee.caller.arguments[0];
|
||
if (e && e.code === "KeyB") { // Ctrl_B
|
||
if (playBallList.length === 0) {
|
||
layer.msg("请先播放视频", {icon: 2});
|
||
} else {
|
||
screenshot(selectedScreen);
|
||
}
|
||
|
||
}
|
||
};
|
||
//初始化菜单
|
||
$.contextMenu({
|
||
selector: '.flv_video',
|
||
build: function ($trigger, e) {
|
||
let remoteVideo = "开启云录像";
|
||
let threeD = "开启3D云平台";
|
||
let localVideo = "开启本地录像";
|
||
let id = $trigger.closest("div").attr("id");
|
||
ballScreen(id);
|
||
$.each(playBallList, function (index, item) {
|
||
if (!isEmpty(item)) {
|
||
if (id === item.selectedScreen) {
|
||
if (!isEmpty(item.id)) {
|
||
remoteVideo = "关闭云录像";
|
||
} else {
|
||
remoteVideo = "开启云录像";
|
||
}
|
||
}
|
||
}
|
||
})
|
||
$.each(playBallList, function (index, item) {
|
||
if (!isEmpty(item)) {
|
||
if (id === item.selectedScreen)
|
||
if (!isEmpty(item.recordVideo)) {
|
||
if (item.recordVideo) {
|
||
localVideo = "开启本地录像";
|
||
} else {
|
||
localVideo = "关闭本地录像";
|
||
}
|
||
}
|
||
}
|
||
})
|
||
let threeDState = localStorage.getItem(id + "_3d")
|
||
if (threeDState === "true") {
|
||
threeD = "关闭3D云平台";
|
||
threeDState = false;
|
||
} else {
|
||
threeD = "开启3D云平台";
|
||
threeDState = true;
|
||
}
|
||
return {
|
||
callback: function (key, options) {
|
||
let videoId = $(this).closest("div").attr("id");
|
||
$.each(playBallList, function (index, item) {
|
||
if (!isEmpty(item)) {
|
||
if (videoId === item.selectedScreen) {
|
||
switch (key) {
|
||
case "stop":
|
||
H5Live.DestoryWindows(item.selectedScreen);
|
||
if (item.flvJs) {
|
||
destoryVideo(item.flvJs);
|
||
item.flvJs = null;
|
||
} else {
|
||
H5Live.DestoryWindows(item.selectedScreen);
|
||
}
|
||
$.each(videoList, function (index, item) {
|
||
if (videoId === item.selectedScreen) {
|
||
item.playState = false;
|
||
}
|
||
});
|
||
playBallList.splice(index, 1);
|
||
$("#" + videoId).html("");
|
||
break;
|
||
case "details":
|
||
let height = getDefaultHeight().toFixed(0) + 'px';
|
||
let width = getDefaultWidth().toFixed(0) + 'px';
|
||
layer.open({
|
||
title: false,
|
||
type: 2,
|
||
content: '../video/videoDetails.html?puid=' + item.puid,
|
||
skin: 'my-skin detail-skin',
|
||
area: [width, height],
|
||
maxmin: false,
|
||
move: false,
|
||
offset: ['8%', '25%'],
|
||
shadeClose: true,
|
||
shade: 0.5,
|
||
success: function (layero, index) {
|
||
$(window).resize(function () {
|
||
if (autoResizeWidth) {
|
||
autoResizeWidth(index);
|
||
}
|
||
if (autoResizeHeight) {
|
||
autoResizeHeight(index);
|
||
}
|
||
})
|
||
}
|
||
});
|
||
break;
|
||
case "localCapture":
|
||
screenshot(videoId);
|
||
break;
|
||
case "3D":
|
||
localStorage.setItem(selectedScreen + "_3d", threeDState);//默认开启
|
||
break;
|
||
case "localVideo":
|
||
document.getElementById("localVideoBtn").click();
|
||
break;
|
||
case "remoteCapture":
|
||
document.getElementById("remoteSnapBtn").click();
|
||
break;
|
||
case "remoteVideo":
|
||
document.getElementById("remoteVideoBtn").click();
|
||
break;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
});
|
||
|
||
},
|
||
items: {
|
||
"stop": {
|
||
name: "停止播放"
|
||
},
|
||
"stopAll": {
|
||
name: "停止所有播放",
|
||
callback: function (key, options) {
|
||
$.each(playBallList, function (indexs, item) {
|
||
if (!isEmpty(item)) {
|
||
if (item.flvJs) {
|
||
destoryVideo(item.flvJs);
|
||
item.flvJs = null;
|
||
} else {
|
||
H5Live.DestoryWindows(item.selectedScreen);
|
||
}
|
||
}
|
||
$("#" + item.selectedScreen).html("");
|
||
});
|
||
playBallList = [];
|
||
$.each(videoList, function (index, item) {
|
||
if (index < num) {
|
||
item.playState = false;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
"details": {
|
||
name: "球机详情"
|
||
},
|
||
"3D": {
|
||
name: threeD
|
||
},
|
||
"localCapture": {
|
||
name: "本地抓拍"
|
||
},
|
||
"localVideo": {
|
||
name: localVideo
|
||
},
|
||
"remoteCapture": {
|
||
name: "云抓拍"
|
||
},
|
||
"remoteVideo": {
|
||
name: remoteVideo
|
||
}
|
||
}
|
||
};
|
||
},
|
||
|
||
|
||
});
|
||
});
|
||
|
||
|
||
/**
|
||
* 获取创世websocket地址
|
||
*/
|
||
function getCSWebSocket() {
|
||
$.ajax({
|
||
url: dataUrl + "video/getCSWebSocket?token=" + token,
|
||
type: "POST",
|
||
data: {name: loginName, passwd: password, token: token},
|
||
success: function (data) {
|
||
if (data.resMsg === 'success') {
|
||
var jsons = JSON.parse(data.obj);
|
||
webSocket = jsons.content.Addr;
|
||
if (webSocket.indexOf("127.0.0.1") != -1) {
|
||
webSocket = webSocket.replace("127.0.0.1", "112.30.98.105");
|
||
}
|
||
}
|
||
}, error: function (error) {
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 创建清新平台连接
|
||
*/
|
||
function getQXConnect() {
|
||
let params = {
|
||
"address": _cf.connParams.address,
|
||
"port": _cf.connParams.port,
|
||
"user": _cf.connParams.user,
|
||
"password": _cf.connParams.password,
|
||
"epid": _cf.connParams.epid,
|
||
"fixaddr": _cf.connParams.bfix
|
||
}
|
||
requestPost('login', params, function (rv) {
|
||
let result = {
|
||
errcode: -1,
|
||
token: ''
|
||
}
|
||
let respJSON = JSON.parse(rv.responseText);
|
||
if (respJSON.hasOwnProperty('errcode')) {
|
||
result.errcode = respJSON.errcode;
|
||
}
|
||
if (respJSON.hasOwnProperty('token')) {
|
||
result.token = respJSON.token;
|
||
result.errcode = 0;
|
||
tokens = result.token;
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* post 请求
|
||
* @param router
|
||
* @param params
|
||
* @param callback
|
||
*/
|
||
function requestPost(router, params, callback) {
|
||
$.ajax({
|
||
type: 'post',
|
||
url: _cf.q2http_url + router,
|
||
data: params,
|
||
traditional: true,
|
||
dataType: 'json',
|
||
async: true,
|
||
complete: function (rv) {
|
||
if (typeof callback == 'function') callback(rv)
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 创世云台控制
|
||
* @param puid
|
||
* @param {Object} type
|
||
*/
|
||
/*function csBallPTZ(puid, type) {
|
||
$.ajax({
|
||
url: ctxPath + "/base/getCSBallPTZControl",
|
||
type: "POST",
|
||
data: {
|
||
puid: puid,
|
||
type: type,
|
||
token: token
|
||
},
|
||
success: function (data) {
|
||
},
|
||
error: function (error) {
|
||
}
|
||
});
|
||
}*/
|
||
|
||
/**
|
||
*操作记录
|
||
*/
|
||
function record(puid, details, module) {
|
||
$.ajax({
|
||
url: ctxPath + "/logs/addBallLogs?token=" + token,
|
||
type: "GET",
|
||
data: {
|
||
puid: puid,
|
||
details: details,
|
||
module: module,
|
||
token: token
|
||
},
|
||
success: function (data) {
|
||
},
|
||
error: function (error) {
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
/**
|
||
* 远程录像/抓拍
|
||
* @param puid 球机puid
|
||
* @param type 操作类型
|
||
* @param typeBall 平台类型
|
||
*/
|
||
function remote(puid, type, typeBall) {
|
||
if (typeBall === 0) {
|
||
//创世
|
||
type = type === 0 ? "REALTIME" : "PICTURE";
|
||
$.ajax({
|
||
url: ctxPath + "/base/remote",
|
||
type: "POST",
|
||
data: {
|
||
puid: puid,
|
||
type: type,
|
||
action: "ManualStartPlateformStorage",
|
||
token: token
|
||
},
|
||
success: function (data) {
|
||
if (type === "REALTIME") {
|
||
layer.msg("开始录像成功", {icon: 1});
|
||
$.each(playBallList, function (index, item) {
|
||
if (selectedScreen === item.selectedScreen) {
|
||
item.id = true;
|
||
}
|
||
});
|
||
record(puid, document.title, "远程11录像")
|
||
} else {
|
||
layer.msg("抓拍成功", {icon: 1});
|
||
setTimeout("stopRemote(\"" + puid + "\",null, 1,0)", 2000);
|
||
record(puid, document.title, "远程抓拍")
|
||
}
|
||
},
|
||
error: function (error) {
|
||
}
|
||
});
|
||
|
||
} else {
|
||
//清晰
|
||
let params = {
|
||
idx: 0,
|
||
puid: puid,
|
||
type: type,
|
||
duration: 5
|
||
}
|
||
requestPost("CSS/C_CSS_StartManualStorage" + "?token=" + tokens, params, function (data) {
|
||
if (data.responseJSON.Error === '0') {
|
||
if (type === 0) {
|
||
layer.msg("开始录像成功", {icon: 1});
|
||
record(puid, document.title, "远程录像")
|
||
$.each(playBallList, function (index, item) {
|
||
if (selectedScreen === item.selectedScreen) {
|
||
item.id = data.responseJSON.Param.ID;
|
||
}
|
||
});
|
||
} else {
|
||
layer.msg("抓拍成功", {icon: 1});
|
||
setTimeout("stopRemote(null,\"" + data.responseJSON.Param.ID + "\", 1,1);", 2000);
|
||
record(puid, document.title, "远程抓拍")
|
||
}
|
||
|
||
}
|
||
}
|
||
)
|
||
}
|
||
|
||
}
|
||
|
||
/**
|
||
*
|
||
* @param puid
|
||
* @param id 流播放ID
|
||
* @param type
|
||
* @param typeBall
|
||
*/
|
||
function stopRemote(puid, id, type, typeBall) {
|
||
if (typeBall === 0) {
|
||
//创世
|
||
type = type === 0 ? "REALTIME" : "PICTURE";
|
||
$.ajax({
|
||
url: ctxPath + "/base/remote",
|
||
type: "POST",
|
||
data: {
|
||
puid: puid,
|
||
type: type,
|
||
action: "ManualStopPlateformStorage",
|
||
token: token
|
||
},
|
||
success: function (data) {
|
||
if (type === "REALTIME") {
|
||
layer.msg("停止录像成功", {icon: 1});
|
||
$.each(playBallList, function (index, item) {
|
||
if (selectedScreen === item.selectedScreen) {
|
||
item.id = null;
|
||
}
|
||
})
|
||
}
|
||
},
|
||
error: function (error) {
|
||
}
|
||
});
|
||
} else {
|
||
//清晰
|
||
let params = {
|
||
id: id
|
||
}
|
||
requestPost("CSS/C_CSS_StopManualStorage" + "?token=" + tokens, params, function (data) {
|
||
if (!isEmpty(data)) {
|
||
if (type === 0) {
|
||
layer.msg("停止录像成功", {icon: 1});
|
||
$.each(playBallList, function (index, item) {
|
||
if (selectedScreen === item.selectedScreen) {
|
||
item.id = null;
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
});
|
||
}
|
||
record(puid, document.title, "停止远程录像")
|
||
}
|
||
|
||
/**
|
||
* 云台操作
|
||
*/
|
||
function operate(ballType, puid, type) {
|
||
if (ballType === 0) {
|
||
csBallPTZ(puid, type);
|
||
} else {
|
||
switch (type) {
|
||
case "TurnUp":
|
||
qxBallPTZ('up', puid);
|
||
break;
|
||
case "TurnDown":
|
||
qxBallPTZ('down', puid);
|
||
break;
|
||
case "TurnLeft":
|
||
qxBallPTZ('left', puid);
|
||
break;
|
||
case "TurnRight":
|
||
qxBallPTZ('right', puid);
|
||
break;
|
||
case "AugmentAperture":
|
||
/* zoomcontrol('zoomin', puid);*/
|
||
break;
|
||
case "MinishAperture":
|
||
// zoomcontrol('zoominout', puid);
|
||
break;
|
||
case "ZoomInPicture":
|
||
zoomcontrol('zoomin', puid);
|
||
break;
|
||
case "ZoomOutPicture":
|
||
zoomcontrol('zoominout', puid);
|
||
break;
|
||
case "MakeFocusFar":
|
||
focuscontrol('faraway', puid);
|
||
break;
|
||
case "MakeFocusNear":
|
||
focuscontrol('near', puid);
|
||
break;
|
||
case "StopFocusMove":
|
||
focuscontrol('stop', puid);
|
||
break;
|
||
case "StopPictureZoom":
|
||
focuscontrol('stop', puid);
|
||
break;
|
||
default:
|
||
qxBallPTZ('stop', puid);
|
||
break;
|
||
}
|
||
}
|
||
switch (type) {
|
||
case "TurnUp":
|
||
record(puid, document.title, "球机移动(上)")
|
||
break;
|
||
case "TurnDown":
|
||
record(puid, document.title, "球机移动(下)")
|
||
break;
|
||
case "TurnLeft":
|
||
record(puid, document.title, "球机移动(左)")
|
||
break;
|
||
case "TurnRight":
|
||
record(puid, document.title, "球机移动(右)")
|
||
break;
|
||
case "ZoomInPicture":
|
||
record(puid, document.title, "球机操作(放大)")
|
||
break;
|
||
case "ZoomOutPicture":
|
||
record(puid, document.title, "球机操作(缩小)")
|
||
break;
|
||
case "MakeFocusFar":
|
||
record(puid, document.title, "球机操作(远焦)")
|
||
break;
|
||
case "MakeFocusNear":
|
||
record(puid, document.title, "球机操作(近焦)")
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 销毁断流方法
|
||
* @param flvPlayer
|
||
*/
|
||
function destoryVideo(flvPlayer) {
|
||
if (flvPlayer) {
|
||
flvPlayer.pause();
|
||
flvPlayer.unload();
|
||
flvPlayer.detachMediaElement();
|
||
flvPlayer.destroy();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 录制视频
|
||
*/
|
||
function recordVideo(id) {
|
||
let video = $("#" + id + "_video")[0];
|
||
let canvas = $("#canvas_" + id)[0];
|
||
let width = $(video).width();
|
||
let height = $(video).height();
|
||
let encodeType = "video/webm;codecs=vp8";
|
||
let chunks = [];
|
||
let frameId = null;
|
||
//设置画布背景
|
||
let ctx = canvas.getContext('2d');
|
||
let H = window.innerHeight;
|
||
let W = window.innerWidth;
|
||
const pixelRatio = window.devicePixelRatio || 1;
|
||
const backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
|
||
ctx.mozBackingStorePixelRatio ||
|
||
ctx.msBackingStorePixelRatio ||
|
||
ctx.oBackingStorePixelRatio ||
|
||
ctx.backingStorePixelRatio || 1;
|
||
const ratio = pixelRatio / backingStoreRatio;
|
||
canvas.width = width * ratio;
|
||
canvas.height = height * ratio;
|
||
canvas.style.width = W + 'px';
|
||
canvas.style.height = H + 'px';
|
||
ctx.scale(ratio, ratio);
|
||
ctx.drawImage(video, 0, 0, width, height); // 将video中的数据绘制到canvas里
|
||
//创建MediaRecorder，设置媒体参数
|
||
let stream = canvas.captureStream();
|
||
let start = true;
|
||
let recorder = new MediaRecorder(stream, {
|
||
mimeType: encodeType
|
||
});
|
||
//收集录制数据
|
||
recorder.ondataavailable = e => {
|
||
chunks.push(e.data);
|
||
};
|
||
$('#localVideoBtn').click(function () {
|
||
if (playBallList.length === 0) {
|
||
layer.msg("请先播放视频", {icon: 2});
|
||
return;
|
||
}
|
||
if (selectedScreen !== $(video).closest("div").attr("id")) {
|
||
return;
|
||
}
|
||
if (start) {
|
||
layer.msg("开启本地录像", {icon: 0});
|
||
chunks = [];
|
||
recorder.start(10);
|
||
drawFrame();
|
||
$(this).css('background-image', 'url(../../img/video/no_check/local_video_no.png)')
|
||
start = false;
|
||
$.each(playBallList, function (index, item) {
|
||
if (item.selectedScreen === selectedScreen) {
|
||
item.recordVideo = start;
|
||
}
|
||
})
|
||
} else {
|
||
layer.msg("关闭本地录像", {icon: 0});
|
||
recorder.stop();
|
||
cancelAnimationFrame(frameId);
|
||
download();
|
||
$(this).css('background-image', 'url(../../img/video/no_check/local_video.png)')
|
||
start = true;
|
||
$.each(playBallList, function (index, item) {
|
||
if (item.selectedScreen === selectedScreen) {
|
||
item.recordVideo = start;
|
||
}
|
||
})
|
||
}
|
||
});
|
||
|
||
//播放视频
|
||
function drawFrame() {
|
||
ctx.drawImage(video, 0, 0, width, height);
|
||
frameId = requestAnimationFrame(drawFrame);
|
||
}
|
||
|
||
//下载录制内容
|
||
function download() {
|
||
let blob = new Blob(chunks, {type: 'video/webm'});
|
||
let url = window.URL.createObjectURL(blob);
|
||
let link = document.createElement("a");
|
||
link.href = url;
|
||
link.download = new Date().getTime() + ".mp4";
|
||
link.style.display = "none";
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
link.remove();
|
||
}
|
||
}
|
||
|
||
|
||
/**
|
||
* 本地抓拍
|
||
*/
|
||
function screenshot(selectedScreen, type) {
|
||
let video = $("#" + selectedScreen + "_video")[0];
|
||
let canvas = $('#canvas_' + selectedScreen)[0];
|
||
let ctx = canvas.getContext('2d');
|
||
let H = window.innerHeight;
|
||
let W = window.innerWidth;
|
||
const pixelRatio = window.devicePixelRatio || 1;
|
||
const backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
|
||
ctx.mozBackingStorePixelRatio ||
|
||
ctx.msBackingStorePixelRatio ||
|
||
ctx.oBackingStorePixelRatio ||
|
||
ctx.backingStorePixelRatio || 1;
|
||
const ratio = pixelRatio / backingStoreRatio;
|
||
canvas.width = $(video).width() * ratio;
|
||
canvas.height = $(video).height() * ratio;
|
||
canvas.style.width = W + 'px';
|
||
canvas.style.height = H + 'px';
|
||
ctx.scale(ratio, ratio);
|
||
ctx.drawImage(video, 0, 0, $(video).width(), $(video).height()); // 将video中的数据绘制到canvas里
|
||
let image = canvas.toDataURL('image/jpg').replace('image/jpg', 'image/octet-stream');
|
||
saveAs(image, new Date().getTime() + '.png' || new Date().getTime() + '.png');
|
||
}
|
||
|