319 lines
9.3 KiB
JavaScript
319 lines
9.3 KiB
JavaScript
/**
|
|
* @Author: zhangtq 2452618307@qq.com
|
|
* @Date: 2024-11-18 13:33:30
|
|
* @LastEditors: zhangtq 2452618307@qq.com
|
|
* @LastEditTime: 2024-11-18 17:51:28
|
|
* @FilePath: static/js/qx/qxVideo.js
|
|
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
|
*/
|
|
//播放球机集合
|
|
let playBallList = []
|
|
let playBallObj = {}
|
|
//默认选择视频框
|
|
var selectedScreen = 'video1'
|
|
//全屏or窗口
|
|
let status = 1
|
|
//平台在线的球机
|
|
var onLineBallList = []
|
|
let puid
|
|
let ballIndex
|
|
let qxToken
|
|
let q2Url
|
|
|
|
let touchStartX = 0;
|
|
let touchEndX = 0;
|
|
window.onload = getQueryParams
|
|
$(function() {
|
|
//获取前置传参 puid:球机id ballIndex:球机序号
|
|
getQueryParams()
|
|
|
|
let html = '<canvas id="canvas_video1" style="display:none;"></canvas>'
|
|
$('#canvasDiv').empty().append(html)
|
|
//默认加载一个视频
|
|
const startPlayButton = document.getElementById('startPlay')
|
|
startPlayButton.click()
|
|
doubleClick(1)
|
|
})
|
|
|
|
function getQueryParams() {
|
|
const params = new URLSearchParams(window.location.search)
|
|
puid = params.get('puid')
|
|
ballIndex = params.get('ballIndex')
|
|
qxToken = params.get('qxToken')
|
|
q2Url = params.get('q2Url')
|
|
}
|
|
|
|
function startPlayVideo() {
|
|
getQueryParams()
|
|
setTimeout(function() {
|
|
let ballFrom = '1'
|
|
if (!isEmpty(puid)) {
|
|
if (Object.keys(playBallObj).length > 0) {
|
|
playBallObj.myPlayer.unload()
|
|
playBallObj.myPlayer.detachMediaElement()
|
|
playBallObj.myPlayer.destroy()
|
|
playBallObj.myPlayer = null
|
|
playBallObj = {}
|
|
}
|
|
playBallObj = {
|
|
puid: puid,
|
|
selectedScreen: selectedScreen,
|
|
window: 1,
|
|
start: false,
|
|
type: ballFrom,
|
|
myPlayer: null
|
|
}
|
|
//播放视频
|
|
qxPlayVideo(puid, ballIndex)
|
|
}
|
|
}, 200)
|
|
}
|
|
|
|
/**
|
|
* 播放视频
|
|
* @param puId
|
|
* @param idx
|
|
*/
|
|
function qxPlayVideo(puId, idx) {
|
|
setTimeout(function() {
|
|
readyPlay(puId, idx)
|
|
}, 200)
|
|
}
|
|
|
|
//开始播放视频
|
|
function readyPlay(puId, idx) {
|
|
//若是清晰平台，删除连接对象
|
|
let url = q2Url + 'stream.flv?puid=' + puId + '&idx=' + idx + '&stream=0&token=' + qxToken
|
|
if (!isEmpty(playBallObj)) {
|
|
if (selectedScreen === playBallObj.selectedScreen) {
|
|
if (playBallObj.window !== null) {
|
|
try {
|
|
var myPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: url,
|
|
isLive: true,
|
|
hasAudio: false
|
|
}, {
|
|
enableWorker: false,
|
|
autoCleanupSourceBuffer: true, //清理缓冲区
|
|
enableStashBuffer: false,
|
|
stashInitialSize: 128, // 减少首桢显示等待时长
|
|
statisticsInfoReportInterval: 600
|
|
})
|
|
|
|
myPlayer.attachMediaElement(document.getElementById(playBallObj.selectedScreen))
|
|
myPlayer.load()
|
|
setTimeout(function() {
|
|
myPlayer.play()
|
|
}, 200)
|
|
playBallObj.myPlayer = myPlayer
|
|
playBallObj.start = true
|
|
} catch (e) {
|
|
alert('该视频不在线。。。')
|
|
}
|
|
}
|
|
}
|
|
}else{
|
|
uni.showToast({
|
|
title: '获取视频失败！',
|
|
icon: 'none'
|
|
})
|
|
uni.navigateBack()
|
|
}
|
|
$('#video' + selectedScreen + '_html5_api').css('width', '100%')
|
|
$('#video' + selectedScreen + '_html5_api').css('height', '100%')
|
|
$('#video' + selectedScreen).css('width', '100%')
|
|
$('#video' + selectedScreen).css('height', '100%')
|
|
$('#video' + selectedScreen + '_html5_api').css('background-color', 'black')
|
|
$('.vjs-text-track-display').hide()
|
|
$('.vjs-loading-spinner').hide()
|
|
$('.vjs-big-play-button').hide()
|
|
$('.vjs-control-bar').hide()
|
|
$('.vjs-error-display').hide()
|
|
$('.vjs-error-display').hide()
|
|
$('.vjs-modal-dialog').hide()
|
|
$('.vjs-poster').removeAttr('class')
|
|
$('.video' + selectedScreen + '-dimensions').css('width', '100%')
|
|
$('.video' + selectedScreen + '-dimensions').css('height', '100%')
|
|
}
|
|
|
|
/**
|
|
* 关闭/停止/销毁 视频
|
|
*/
|
|
function stopVideo() {
|
|
playBallObj.player.unload()
|
|
playBallObj.player.detachMediaElement()
|
|
playBallObj.player.destroy()
|
|
playBallObj.player = null
|
|
playBallObj.start = false
|
|
playBallObj = {}
|
|
}
|
|
|
|
//单机球机页面点击
|
|
var timer = null //定义一个变量存放定时器
|
|
function singleClick(t) {//
|
|
if (timer) { //取消上次延时未执行的方法
|
|
window.clearTimeout(timer)
|
|
timer = null
|
|
}
|
|
timer = window.setTimeout(function() {
|
|
ballScreen(t)
|
|
}, 300)
|
|
}
|
|
|
|
//添加单机视频框样式
|
|
function ballScreen(t) {
|
|
$.each($('.ballsplit'), function(index, item) {
|
|
$($('.ballsplit')[index]).removeClass('selectedContent')
|
|
})
|
|
selectedScreen = 'video' + t
|
|
$('#ball' + t).addClass('selectedContent')
|
|
let result = playBallList.some((item => {
|
|
if (item.selectedScreen === 'video' + t) {
|
|
return true
|
|
}
|
|
}))
|
|
|
|
}
|
|
|
|
//双击球机页面
|
|
function doubleClick(t) {
|
|
if (timer) { //取消上次延时未执行的方法
|
|
window.clearTimeout(timer)
|
|
}
|
|
var div = document.getElementById('ball' + t)
|
|
if (status == 1) { //全屏
|
|
$('#video' + t).css('-webkit-transform', 'rotate(90deg)')
|
|
$('#video' + t).css('transform', 'rotate(90deg)')
|
|
$('#video' + t).css('width', '100vh')
|
|
$('#video' + t).css('height', '100vw')
|
|
$('#video' + t).css('position', 'absolute')
|
|
$('#video' + t).css('top', '50%')
|
|
$('#video' + t).css('left', '50%')
|
|
$('#video' + t).css('transform-origin', 'center center')
|
|
$('#video' + t).css('transform', 'translate(-50%, -50%) rotate(90deg)')
|
|
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()
|
|
}
|
|
status = 2
|
|
} else if (status == 2) { //关闭全屏
|
|
$('#ball' + t).css('width', '100%')
|
|
$('#ball' + t).css('height', '27%')
|
|
$('#ball' + t).css('margin-top', '2%')
|
|
$('#video' + t).css('-webkit-transform', 'rotate(0)')
|
|
$('#video' + t).css('transform', 'rotate(0)')
|
|
$('#video' + t).css('position', '')
|
|
$('#video' + t).css('top', '')
|
|
$('#video' + t).css('left', '')
|
|
$('#video' + t).css('transform-origin', '')
|
|
$('#video' + t).css('width', '')
|
|
$('#video' + t).css('height', '')
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen()
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen()
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen()
|
|
} else if (document.webkitCancelFullScreen) {
|
|
document.webkitCancelFullScreen()
|
|
}
|
|
status = 1
|
|
}
|
|
}
|
|
|
|
|
|
/*********************云台控制****************/
|
|
function ptz(type) {
|
|
console.log("type="+type);
|
|
let pId = playBallObj.puid;
|
|
let idex = playBallObj.ballIndex;
|
|
if(type == 'TurnUp'){
|
|
turncontrol(pId,idex,'up');
|
|
}else if(type == 'TurnDown'){
|
|
turncontrol(pId,idex,'down');
|
|
}else if(type == 'TurnLeft'){
|
|
turncontrol(pId,idex,'left');
|
|
}else if(type == 'TurnRight'){
|
|
turncontrol(pId,idex,'right');
|
|
}else if(type == 'ZoomInPicture'){
|
|
//放大
|
|
zoomcontrol(pId,idex,'zoomin');
|
|
}else if(type == 'ZoomOutPicture'){
|
|
//缩小
|
|
zoomcontrol(pId,idex,'zoominout');
|
|
}else if(type == 'MakeFocusFar'){
|
|
//远焦
|
|
focuscontrol(pId,idex,'faraway');
|
|
}else if(type == 'MakeFocusNear'){
|
|
//近焦
|
|
focuscontrol(pId,idex,'near');
|
|
}else if(type == 'StopFocusMove'){
|
|
focuscontrol(pId,idex,'stop');
|
|
}else if(type == 'StopPictureZoom'){
|
|
zoomcontrol(pId,idex,'stop');
|
|
}else{
|
|
turncontrol(pId,idex,'stop');
|
|
}
|
|
};
|
|
//清新云台上下左右
|
|
//旋转平台功能
|
|
async function turncontrol(puid,idx,option) {
|
|
if (option == "up") {
|
|
// $("#balltop").css("background-image","url('../../../img/video/ydj/s.png')");
|
|
await requestPost('PTZ/C_PTZ_Turn?token=' + qxToken, {
|
|
puid: puid,
|
|
idx: idx,
|
|
motion: 'up'
|
|
}, async (rv) => {
|
|
});
|
|
} else if (option == "down") {
|
|
// $("#ballbuttom").css("background-image","url('../../../img/video/ydj/x.png')");
|
|
var number = "down";
|
|
await requestPost('PTZ/C_PTZ_Turn?token=' + qxToken, {
|
|
puid: puid,
|
|
idx: idx,
|
|
motion: 'down'
|
|
}, rv => {
|
|
});
|
|
} else if (option == "left") {
|
|
// $("#ballleft").css("background-image","url('../../../img/video/ydj/z.png')");
|
|
var number = "left";
|
|
await requestPost('PTZ/C_PTZ_Turn?token=' + qxToken, {
|
|
puid: puid,
|
|
idx: idx,
|
|
motion: 'left'
|
|
}, rv => {
|
|
});
|
|
} else if (option == "right") {
|
|
var number = "right";
|
|
// $("#ballright").css("background-image","url('../../../img/video/ydj/y.png')");
|
|
await requestPost('PTZ/C_PTZ_Turn?token=' + qxToken, {
|
|
puid: puid,
|
|
idx: idx,
|
|
motion: 'right'
|
|
}, rv => {
|
|
});
|
|
} else if (option == "stop") {
|
|
var number = "stop";
|
|
console.log("stop----------------");
|
|
requestPost('PTZ/C_PTZ_Turn?token=' + qxToken, {
|
|
puid: puid,
|
|
idx: idx,
|
|
motion: 'stop'
|
|
}, rv => {
|
|
console.log("stop++++++++++++++++");
|
|
// $("#balltop").css("background-image","url('../../../img/video/wdj/s.png')");
|
|
// $("#ballbuttom").css("background-image","url('../../../img/video/wdj/x.png')");
|
|
// $("#ballleft").css("background-image","url('../../../img/video/wdj/z.png')");
|
|
// $("#ballright").css("background-image","url('../../../img/video/wdj/y.png')");
|
|
});
|
|
}
|
|
};
|