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) {
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
|