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> |