hb_zhgd_screen/js/pages/video/videoConnect.js

595 lines
18 KiB
JavaScript
Raw Normal View History

2025-10-13 09:33:54 +08:00
let qxToken;
let qxUrl;
let tyToken;
let flvPlayer;
let remoteId;
let videoObject = {
//设备编码
devCode: '',
//远程录像ID
remoteId: '',
//播放状态
playState: false,
//视频播放通道
videoType: '',
recordVideoState: false
}
function initVideo() {
getQXConnect();
}
/**
* @param {Object} eventContext 回调函数
* @param {Object} eventType
*/
window.callBack = function (eventType, eventContext) {
switch (eventType) {
case "104":
//全屏
window.videos.fullScreen()
break;
case "105":
//退出全屏
window.videos.exitScreen();
break;
default:
console.log("这是回调函数!!!")
break;
}
}
/**
* 创建清新平台连接
*/
function getQXConnect() {
var allDataParams = "address=" + _cf.connParams.address + "&port=" + _cf.connParams.port +
"&user=" + _cf.connParams.user + "&password=" + _cf.connParams.password + "&epid=" + _cf.connParams.epid + "&fixaddr=" + _cf.connParams.bfix;
let params = {
"params": videoEncrypt(allDataParams)
}
posts(_cf.q2http_url, 'login2', 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;
if (!isEmpty(result.token)) {
qxUrl = _cf.q2http_url;
qxToken = result.token;
}
}
});
}
/**
* 清新播放视频
* @param puId
* @param idx
* @param dom 窗口id
*/
function QXPlayVideo(puId, idx, dom) {
//播视频接口
destoryVideo(flvPlayer);
let url = qxUrl + "stream.flv?puid=" + puId + "&idx=" + idx + "&stream=0&token=" + qxToken;
console.log(url);
if (flvjs.isSupported()) {
let videoElement = document.getElementById(dom);
if (videoElement) {
flvPlayer = flvjs.createPlayer({
type: 'flv', // => 媒体类型 flv 或 mp4m3u8
isLive: true, // => 是否为直播流
hasAudio: false, // => 是否开启声音
url: url, // => 视频流地址
stashInitialSize: 128 // 减少首桢显示等待时长
}, {
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url用于随后的请求如查找、重新连接等。
autoCleanupSourceBuffer: true, //自动清除缓存
fixAudioTimestampGap: false//false才会音视频同步
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
//init3D();
flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
if (flvPlayer) {
//播放失败销毁窗口
destoryVideo(flvPlayer);
videoObject.playState = false;
}
});
flvPlayer.on(flvjs.Events.SCRIPTDATA_ARRIVED, (errorType, errorDetail, errorInfo) => {
if (flvPlayer) {
videoObject.playState = true;
// $('.noVideoMask').css('background-image', 'none')
//视频断流、延迟处理
$('#' + dom).attr("ontimeupdate", "progress(event)")
recordVideo();
}
});
// 【重要事件监听】http请求建立好后该事件会一直监听flvjs实例
flvPlayer.on(flvjs.Events.STATISTICS_INFO, (res) => {
if (this.leaveRouter || this.changeLampPost) { // 离开路由或切换设备
// 销毁实例
destoryVideo(flvPlayer);
videoObject.playState = false;
}
});
flvPlayer.play();
}
}
}
function init3D() {
try {
localStorage.setItem("threeD", false);
initDrawReact('windowbox', (ops) => {//播放视频时添加
var Sx = ops.beginPoint.x;
var Sy = ops.beginPoint.y;
var Ex = ops.endPoint.x;
var Ey = ops.endPoint.y;
$.ajax({
url: dataUrl + "proteam/pot/video/set3DyunConfig?token=" + token,
type: "POST",
data: {
Sx: Sx,
Sy: Sy,
Ex: Ex,
Ey: Ey,
puid: puidParam
},
success: function (data) {
var drawReact = document.getElementById(ops.id + '_box'); // 获取矩形框元素
drawReact.style.display = 'none'; // 进入画布按下鼠标显示默认矩形框
},
error: function (error) {
var drawReact = document.getElementById(ops.id + '_box'); // 获取矩形框元素
drawReact.style.display = 'none'; // 进入画布按下鼠标显示默认矩形框
}
});
})
} catch (e) {
console.error(e.toString())
}
}
/**
* post 请求
* @param router
* @param params
* @param callback
*/
function requestPost(router, params, callback) {
$.ajax({
type: 'post',
url: qxUrl + router,
data: params,
traditional: true,
dataType: 'json',
async: true,
complete: function (rv) {
if (typeof callback == 'function') callback(rv)
}
})
}
/**
* post 请求
* @param url
* @param router
* @param params
* @param callback
*/
function posts(url, router, params, callback) {
$.ajax({
type: 'post',
url: url + router,
data: params,
traditional: true,
dataType: 'json',
complete: function (rv) {
if (typeof callback == 'function') callback(rv)
}
})
}
/**
* 远程录像/抓拍
* @param puid 球机puid
* @param type 操作类型
* @param typeBall 平台类型
*/
function remoteVideo(puid, type) {
//清晰
let params = {
idx: 0,
puid: puid,
type: type,
duration: 5
}
requestPost("CSS/C_CSS_StartManualStorage" + "?token=" + qxToken, params, function (data) {
if (data.responseJSON.Error === '0') {
if (type === 0) {
parent.layer.msg("开始录像成功", { icon: 1 });
videoObject.remoteId = data.responseJSON.Param.ID
} else {
parent.layer.msg("抓拍成功", { icon: 1 });
setTimeout(function () {
stopRemote(data.responseJSON.Param.ID, 1)
}, 3000);
}
}
}
)
}
/**
*
* @param id 流播放ID
* @param type
* @param typeBall
*/
function stopRemote(id, type) {
//清晰
let params = {
id: id
}
requestPost("CSS/C_CSS_StopManualStorage" + "?token=" + qxToken, params, function (data) {
if (!isEmpty(data)) {
if (type === 0) {
parent.layer.msg("停止录像成功", { icon: 1 });
videoObject.remoteId = null;
}
}
});
}
/**
* 平台操作
* @param puid
* @param url
*/
function qxControl(puid, url) {
let params = {
puid: puid,
idx: 0
}
requestPost(url + '?token=' + qxToken, params, rv => {
})
}
/**
* 球机旋转
* @param option
* @param puid
* @returns {Promise<void>}
*/
async function turnControl(option, puid) {
let params = {
puid: puid,
idx: 0,
motion: option
};
if (option != null) {
requestPost('PTZ/C_PTZ_Turn?token=' + qxToken, params)
}
}
/**
* 销毁断流方法
* @param flvPlayer
*/
function destoryVideo(flvPlayer) {
if (!isEmpty(flvPlayer)) {
//flvPlayer.pause();
flvPlayer.unload();
flvPlayer.detachMediaElement();
//flvPlayer.destroy();
flvPlayer = null;
}
}
/**
* 录制视频
*/
function recordVideo() {
let video = $("#videoPlayer1")[0];
let encodeType = "video/webm;codecs=vp9,opus";
let chunks = [];
//创建MediaRecorder设置媒体参数
let stream = video.captureStream();
let start = true;
let recorder = new MediaRecorder(stream, {
mimeType: encodeType
});
//收集录制数据
recorder.ondataavailable = e => {
chunks.push(e.data);
};
$('#videoLocal')[0].onclick = function () {
if (start) {
videoObject.recordVideoState = true;
parent.layer.msg("开启本地录像", { icon: 0 });
chunks = [];
recorder.start(10);
start = false;
} else {
parent.layer.msg("关闭本地录像", { icon: 0 });
videoObject.recordVideoState = false;
recorder.stop();
download();
start = true;
}
}
//下载录制内容
function download() {
let blob = new Blob(chunks, { type: 'video/webm' });
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: {
"encrypt": sm3(JSON.stringify(formData))
},
data: formData,
dataType: 'json',
processData: false,// ⑧告诉jQuery不要去处理发送的数据
contentType: false, // ⑨告诉jQuery不要去设置Content-Type请求头
beforeSend: function () {
},
success: function (result) {
if (result.code === 200) {
layer.close(loadingMsg);
uploadRectFile(result.data);
} else {
layer.msg('视频下载发生异常,请稍后重试', { icon: 16, scrollbar: false, time: 2000 });
}
},
error: function (result) {
}
}); */
}
}
/**
* 录制视频
*/
function recordVideo2() {
let video = $("#videoPlayer1")[0];
let encodeType = "video/webm;codecs=vp9,opus";
let chunks = [];
//创建MediaRecorder设置媒体参数
let stream = video.captureStream();
let start = true;
let recorder = new MediaRecorder(stream, {
mimeType: encodeType
});
//收集录制数据
recorder.ondataavailable = e => {
chunks.push(e.data);
};
// $('#videoLocal')[0].onclick = function () {
$('#videoLocal22')[0].onclick = function () {
if (start) {
videoObject.recordVideoState = true;
parent.layer.msg("开启远程录像", { icon: 0 });
chunks = [];
recorder.start(10);
start = false;
} else {
parent.layer.msg("关闭远程录像", { icon: 0 });
videoObject.recordVideoState = false;
recorder.stop();
download();
start = true;
}
}
//下载录制内容
function download() {
let blob = new Blob(chunks, { type: 'video/webm' });
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: {
"encrypt": sm3(JSON.stringify(formData))
},
data: formData,
dataType: 'json',
processData: false,// ⑧告诉jQuery不要去处理发送的数据
contentType: false, // ⑨告诉jQuery不要去设置Content-Type请求头
beforeSend: function () {
},
success: function (result) {
if (result.code === 200) {
layer.close(loadingMsg);
uploadRectFile(result.data);
} else {
layer.msg('视频下载发生异常,请稍后重试', { icon: 16, scrollbar: false, time: 2000 });
}
},
error: function (result) {
}
}); */
}
}
/**
* 本地抓拍
*/
function screenshot() {
let video = $("#videoPlayer1")[0];
let canvas = document.getElementById("canvas");;
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 e
*/
function progress(e) {
let bf = e.srcElement.buffered;
let currentTime = e.srcElement.currentTime;
if (bf.length > 0) {
let end = bf.end(0);
if (end - currentTime > 1.5) {
e.srcElement.currentTime = end - 0.1;
}
}
}
/**
* 球机页面双击全屏
* @param t
*/
function ballScreenBig(t) {
let div = $('.noVideoMask')[0];
let fullscreenElement =
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement;
if (fullscreenElement) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
} else {
if (div.requestFullscreen) {
div.requestFullscreen();
} else if (div.msRequestFullscreen) {
div = document.body;
div.msRequestFullscreen();
} else if (div.mozRequestFullScreen) {
div.mozRequestFullScreen();
} else if (div.webkitRequestFullScreen) {
div.webkitRequestFullScreen();
}
}
}
/*下载整改文件*/
function uploadRectFile(obj) {
let loadingMsg = layer.msg('视频下载中,请稍候...', { icon: 16, scrollbar: false, time: 0 });
let url = dataUrl + 'proteam/pot/video/uploadRectFile?' + setData(obj) + '&token=' + token;
let xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob"; // 转换流
xhr.onload = function () {
layer.close(loadingMsg);
if (this.status === 200) {
let blob = this.response;
let url = window.URL.createObjectURL(blob);
let link = document.createElement("a");
link.href = url;
link.download = obj.titleName;
link.style.display = "none";
document.body.appendChild(link);
link.click();
link.remove();
} else if (this.status === 401) {
localStorage.removeItem("token");
backLogin();
} else {
layer.msg('视频下载发生异常,请稍后重试', { icon: 16, scrollbar: false, time: 2000 });
}
};
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();
});
}