249 lines
7.3 KiB
JavaScript
249 lines
7.3 KiB
JavaScript
|
//视频播放token
|
|||
|
|
let vToken;
|
|||
|
|
//播放视频类型 1实时 2历史
|
|||
|
|
let playType = 'video';
|
|||
|
|
//初始化对象
|
|||
|
|
let videos;
|
|||
|
|
//分屏数量
|
|||
|
|
let winNums = 1;
|
|||
|
|
//设备编码
|
|||
|
|
let currCode;
|
|||
|
|
let obj = {
|
|||
|
|
ak: ty.connParams.ak,
|
|||
|
|
sk: ty.connParams.sk
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function initVideo() {
|
|||
|
|
initLogin();
|
|||
|
|
window.videos = videos = new VideoObj("videoDemo", winNums, ty.connParams.address, ty.connParams.port, vToken, playType, 'callBack', 'false', ty.connParams.ak);//创建实例对象
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @param {Object} eventContext 回调函数
|
|||
|
|
* @param {Object} eventType
|
|||
|
|
*/
|
|||
|
|
window.callBack = function (eventType, eventContext) {
|
|||
|
|
console.log('这是回调函数');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 登录获取token
|
|||
|
|
*/
|
|||
|
|
function initLogin() {
|
|||
|
|
$.ajax({
|
|||
|
|
data: JSON.stringify(obj),
|
|||
|
|
type: "POST",
|
|||
|
|
contentType: 'application/json',
|
|||
|
|
dataType: "json",
|
|||
|
|
url: ty.basePath + "uvp-backend-common/api/v1/authorization",
|
|||
|
|
success: function (result) {
|
|||
|
|
vToken = result.resultValue.token; // 拿到token
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 播放视频
|
|||
|
|
* @param {Object} winNum
|
|||
|
|
* @param {Object} devCode
|
|||
|
|
* @param {Object} devName
|
|||
|
|
*/
|
|||
|
|
function playVideo(winNum, devCode, devName) {
|
|||
|
|
currCode = devCode;
|
|||
|
|
/**
|
|||
|
|
* 需判断所选视频是否正在播放
|
|||
|
|
* 关闭视频方法
|
|||
|
|
* videos.closeAllVideo();
|
|||
|
|
*/
|
|||
|
|
videos.videoPlay(winNum, "h264", devCode, '', devName, '1');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 云台控制
|
|||
|
|
* @param key
|
|||
|
|
*/
|
|||
|
|
function playControl() {
|
|||
|
|
let key;
|
|||
|
|
if (!isEmpty(currCode)) {
|
|||
|
|
//点击事件
|
|||
|
|
let control = $('[lay-event=control]');
|
|||
|
|
control.unbind();
|
|||
|
|
control.mousedown(function (event) {
|
|||
|
|
key = controlType[$(this).attr('id')][0]
|
|||
|
|
videos.videoControl(currCode, key, 5, 5);
|
|||
|
|
event.stopPropagation();
|
|||
|
|
}).mouseup(function (event) {
|
|||
|
|
key = controlType[$(this).attr('id')][1]
|
|||
|
|
videos.videoControl(currCode, key, 5, 5);
|
|||
|
|
event.stopPropagation();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 录制视频
|
|||
|
|
*/
|
|||
|
|
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');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据设备编码获取设备近期上下线详细信息
|
|||
|
|
* @param devCodes 设备编码（一个或者多个设备编码）
|
|||
|
|
* @param startTime 开始时间(格式：yyyy-mm-dd)，默认为当天
|
|||
|
|
* @param endTime 结束时间(格式：yyyy-mm-dd)，默认为当天
|
|||
|
|
*/
|
|||
|
|
function queryDevStatusDescriptionInfo(devCodes, startTime, endTime) {
|
|||
|
|
Ajax().post({
|
|||
|
|
url: videoUrl + '/uvp-backend-maintenance/api/v1/dev/queryDevStatusDescriptionInfo',
|
|||
|
|
data: {
|
|||
|
|
devCodes: devCodes,
|
|||
|
|
startTime: startTime,
|
|||
|
|
endTime: endTime
|
|||
|
|
},
|
|||
|
|
success: function (data) {
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据设备编码查询历史图片
|
|||
|
|
* @param devCode 设备编码
|
|||
|
|
* @param startTime 检索图片产生的时间范围的开始时间；格式为yyyy-mm-dd
|
|||
|
|
* @param endTime 检索图片产生的时间范围的结束时间；格式为yyyy-mm-dd
|
|||
|
|
*/
|
|||
|
|
function queryImageByDevice(devCode, startTime, endTime) {
|
|||
|
|
Ajax().post({
|
|||
|
|
url: videoUrl + '/uvp-backend-imagesurveillance/api/v1/image/queryImageByDevice',
|
|||
|
|
data: {
|
|||
|
|
devCode: devCode,
|
|||
|
|
startDate: startTime,
|
|||
|
|
endDate: endTime,
|
|||
|
|
pageNo: 1,
|
|||
|
|
pageSize: 6
|
|||
|
|
},
|
|||
|
|
success: function (data) {
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|