249 lines
8.4 KiB
HTML
249 lines
8.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>火灾视频</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="../js/core/layui2.7.6/css/layui.css"/>
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
width: 97%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.layui-btn-normal {
|
|||
|
|
background-color: rgb(11 85 95);
|
|||
|
|
color: white;
|
|||
|
|
width: 91px;
|
|||
|
|
height: 43px;
|
|||
|
|
/* margin-right: 0%; */
|
|||
|
|
font-size: 18px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="content">
|
|||
|
|
<button id="videoBtn" hidden></button>
|
|||
|
|
<button id="snap" hidden=""></button>
|
|||
|
|
<video id="video1"></video>
|
|||
|
|
<canvas id="huaImg" style="display: none"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
<script type="text/javascript" src="../js/core/jquery-3.6.0.js"></script>
|
|||
|
|
<script type="text/javascript" src="../js/core/layui2.7.6/layui.js"></script>
|
|||
|
|
<script src="../js/includeQx.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="../js/video/qx/conf.js"></script>
|
|||
|
|
<script type="text/javascript" src="../js/core/public.js"></script>
|
|||
|
|
<script src="../js/video/qx/utility/flv.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script src="../js/video/qx/utility/talk.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script src="../js/video/qx/video-7.19.1.min.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script src="../js/video/connection_twoToken_two.js" type="text/javascript" charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="../js/management/managementFrom.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var token = localStorage.getItem("video_token");
|
|||
|
|
var urlParams = new URLSearchParams(window.location.search);
|
|||
|
|
var dataStr = urlParams.get('uuid');
|
|||
|
|
// var data = JSON.parse(decodeURIComponent(dataStr));
|
|||
|
|
var puid = "";
|
|||
|
|
var type = localStorage.getItem("alarmType");
|
|||
|
|
var selectedScreen = 'video1';
|
|||
|
|
|
|||
|
|
$(function () {
|
|||
|
|
getAlarmVideo();
|
|||
|
|
})
|
|||
|
|
function getAlarmVideo() {
|
|||
|
|
// if (isEmpty(puid3)) {
|
|||
|
|
// if (isEmpty(puid2)) {
|
|||
|
|
// puid = puid1.split("-")[0];
|
|||
|
|
// } else {
|
|||
|
|
// puid = puid2.split("-")[0];
|
|||
|
|
// }
|
|||
|
|
// } else {
|
|||
|
|
// puid = puid3.split("-")[0];
|
|||
|
|
// }
|
|||
|
|
puid = dataStr.split('-')[0];
|
|||
|
|
//播放视频按钮
|
|||
|
|
var btn = document.getElementById('videoBtn')
|
|||
|
|
btn.addEventListener('click', function () {
|
|||
|
|
qxPlayVideo(puid, "0");
|
|||
|
|
});
|
|||
|
|
document.getElementById('videoBtn').click();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveImage(canvas, filename) {
|
|||
|
|
let image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
|
|||
|
|
|
|||
|
|
fetch(dataUrl + "index/updatePhotoPath", {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json',
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
image: image,
|
|||
|
|
puid: puid,
|
|||
|
|
register: dataStr
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// $.ajax({
|
|||
|
|
// type: 'POST',
|
|||
|
|
// url: dataUrl + "index/updatePhotoPath",
|
|||
|
|
// data: {
|
|||
|
|
// image : image,
|
|||
|
|
// puid : puid
|
|||
|
|
// },
|
|||
|
|
// dataType: 'json',
|
|||
|
|
// // async:false,
|
|||
|
|
// success: function(res) {
|
|||
|
|
// if(res.resMsg = "数据获取成功"){
|
|||
|
|
// puid = res.obj.puid;
|
|||
|
|
// var btn = document.getElementById('videoBtn')
|
|||
|
|
// btn.addEventListener('click', function() {
|
|||
|
|
// qxPlayVideo(puid,"0");
|
|||
|
|
// });
|
|||
|
|
// document.getElementById('videoBtn').click();
|
|||
|
|
//
|
|||
|
|
// }else{
|
|||
|
|
// layer.msg("当前没有在线球机",{icon:0,time:2000});
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 播放视频
|
|||
|
|
* @param puId
|
|||
|
|
* @param idx
|
|||
|
|
*/
|
|||
|
|
function qxPlayVideo(puId, idx) {
|
|||
|
|
setTimeout(function () {
|
|||
|
|
readyPlay(puId, idx);
|
|||
|
|
}, 500);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var myPlayer = null;
|
|||
|
|
//开始播放视频
|
|||
|
|
function readyPlay(puId, idx) {
|
|||
|
|
//若是清晰平台，删除连接对象
|
|||
|
|
// mySet.delete(selectedScreen);
|
|||
|
|
let url = _cf.q2http_url + "stream.flv?puid=" + puId + "&idx=0&stream=0&token=" + token;
|
|||
|
|
//循环视频播放列表
|
|||
|
|
try {
|
|||
|
|
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('video1'));
|
|||
|
|
myPlayer.load();
|
|||
|
|
setTimeout(function () {
|
|||
|
|
myPlayer.play();
|
|||
|
|
}, 200);
|
|||
|
|
} catch (e) {
|
|||
|
|
alert("该视频不在线。。。");
|
|||
|
|
}
|
|||
|
|
$('#video' + selectedScreen + '_html5_api').css("width", "100%");
|
|||
|
|
$('#video' + selectedScreen + '_html5_api').css("height", "100%");
|
|||
|
|
$('#video1').css("width", "85%");
|
|||
|
|
$('#video1').css("height", "100%");
|
|||
|
|
$('#video1').css("margin-left", "7%");
|
|||
|
|
$('#video1').css("margin-top", "2%");
|
|||
|
|
$('#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%");
|
|||
|
|
|
|||
|
|
//抓拍按钮
|
|||
|
|
setTimeout(function () {
|
|||
|
|
var btn = document.getElementById('snap')
|
|||
|
|
btn.addEventListener('click', function () {
|
|||
|
|
var canvas = document.getElementById("huaImg");
|
|||
|
|
var video = document.getElementById(selectedScreen);
|
|||
|
|
let ctx = canvas.getContext('2d');
|
|||
|
|
canvas.width = 1080;
|
|||
|
|
canvas.height = 720;
|
|||
|
|
ctx.drawImage(video, 0, 0, 1080, 720); // 将video中的数据绘制到canvas里
|
|||
|
|
saveImage(canvas, new Date().getTime() + '.png'); // 存储图片到本地
|
|||
|
|
});
|
|||
|
|
document.getElementById('snap').click();
|
|||
|
|
}, 5000);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.onbeforeunload = function (e) {
|
|||
|
|
myPlayer.pause();
|
|||
|
|
myPlayer.unload();
|
|||
|
|
myPlayer.detachMediaElement();
|
|||
|
|
myPlayer.destroy();
|
|||
|
|
myPlayer = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
*
|
|||
|
|
* @param {*} player 播放控件对象
|
|||
|
|
* @param {*} index playBallList 下标，第几个
|
|||
|
|
* @param {*} type 类型 1切换窗口关闭视频，2主动关闭视频
|
|||
|
|
*/
|
|||
|
|
function stopVideo(player, index, type) {
|
|||
|
|
if (type == 1) {
|
|||
|
|
player.unload();
|
|||
|
|
player.detachMediaElement();
|
|||
|
|
player.destroy();
|
|||
|
|
player = null;
|
|||
|
|
playBallList.splice(index, 1);
|
|||
|
|
} else {
|
|||
|
|
$.each(playBallList, function (index, item) {
|
|||
|
|
if (!isEmpty(item)) {
|
|||
|
|
if (selectedScreen === item.selectedScreen) {
|
|||
|
|
let start = item.start;
|
|||
|
|
let player = item.myPlayer;
|
|||
|
|
if (start && player !== null) {
|
|||
|
|
player.unload();
|
|||
|
|
player.detachMediaElement();
|
|||
|
|
player.destroy();
|
|||
|
|
player = null;
|
|||
|
|
playBallList.splice(index, 1);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openAlarm() {
|
|||
|
|
layer.alert('请确认是否开启人员道闸进口?', {
|
|||
|
|
skin: 'layui-layer-molv' // 样式类名
|
|||
|
|
}, function () {
|
|||
|
|
open(type);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|