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