2022-03-02 12:25:19 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>监控</title>
|
|
|
|
|
<link rel="stylesheet" href="/layui/css/layui.css">
|
|
|
|
|
<link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
|
|
|
|
|
<meta charset="utf-8"/>
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
|
|
<div id="header"></div>
|
|
|
|
|
<div class="layui-body" style="left: 200px;overflow:auto;">
|
|
|
|
|
<div id="side"></div>
|
|
|
|
|
<div class="myDiy">
|
2022-03-02 14:43:04 +08:00
|
|
|
<div class="myVideo">
|
|
|
|
|
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
|
|
|
|
|
width="1080"
|
|
|
|
|
height="708" data-setup='{}'>
|
|
|
|
|
<source id="source" src="/nas/door/cctv.do" type="application/x-mpegURL">
|
|
|
|
|
</video>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="myButtons">
|
|
|
|
|
|
|
|
|
|
<button id="reboot" type="button"
|
|
|
|
|
class="button layui-btn layui-btn layui-btn-normal">
|
|
|
|
|
重 启
|
|
|
|
|
</button>
|
|
|
|
|
<button id="down" type="button"
|
|
|
|
|
class="button layui-btn layui-btn-normal">
|
|
|
|
|
减 焦
|
|
|
|
|
</button>
|
|
|
|
|
<button id="up" type="button" class="button layui-btn layui-btn-normal">
|
|
|
|
|
增 焦
|
|
|
|
|
</button>
|
|
|
|
|
<div style="margin-top: 10px"></div>
|
|
|
|
|
<button id="warning" type="button" class="button layui-btn layui-btn-normal">
|
|
|
|
|
报 警
|
|
|
|
|
</button>
|
2022-03-02 16:26:04 +08:00
|
|
|
<button id="af" type="button" class="button layui-btn layui-btn-normal">
|
|
|
|
|
对 焦
|
|
|
|
|
</button>
|
2022-03-02 14:43:04 +08:00
|
|
|
</div>
|
|
|
|
|
|
2022-03-02 12:25:19 +08:00
|
|
|
</div>
|
|
|
|
|
<div id="footer"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
<script src="/layui/layui.js"></script>
|
|
|
|
|
<script src="/js/jquery-3.2.1.js"></script>
|
|
|
|
|
<script src="/js/myjs.js"></script>
|
|
|
|
|
<script src="/js/recordmp3.js"></script>
|
|
|
|
|
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
|
|
|
|
|
<script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
$('#header').load("/html/header.html");
|
|
|
|
|
$('#footer').load("/html/footer.html");
|
|
|
|
|
$('#side').load("/html/body/nas/side.html");
|
|
|
|
|
let token = getParam('token');
|
|
|
|
|
|
2022-03-02 14:43:04 +08:00
|
|
|
let myVideo = videojs('myVideo', {
|
2022-03-02 12:25:19 +08:00
|
|
|
|
|
|
|
|
bigPlayButton: true,
|
|
|
|
|
|
|
|
|
|
textTrackDisplay: false,
|
|
|
|
|
|
|
|
|
|
posterImage: false,
|
|
|
|
|
|
|
|
|
|
errorDisplay: false,
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
2022-03-02 14:43:04 +08:00
|
|
|
$('#reboot').click(function () {
|
|
|
|
|
config('reboot')
|
|
|
|
|
})
|
|
|
|
|
$('#up').mousedown(function () {
|
|
|
|
|
config('up')
|
2022-03-02 12:25:19 +08:00
|
|
|
})
|
2022-03-02 14:43:04 +08:00
|
|
|
$('#down').mouseup(function () {
|
|
|
|
|
config('down')
|
2022-03-02 12:25:19 +08:00
|
|
|
})
|
2022-03-02 14:43:04 +08:00
|
|
|
$('#warning').mouseup(function () {
|
|
|
|
|
config('warning')
|
2022-03-02 12:25:19 +08:00
|
|
|
})
|
2022-03-02 16:26:04 +08:00
|
|
|
$('#af').mouseup(function () {
|
|
|
|
|
config('af')
|
|
|
|
|
})
|
2022-03-02 12:25:19 +08:00
|
|
|
|
2022-03-02 14:43:04 +08:00
|
|
|
function config(status) {
|
|
|
|
|
$.post("/door/set.do", {status: status}, function (json) {
|
|
|
|
|
layer.msg(json.msg)
|
2022-03-02 12:25:19 +08:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2022-03-02 14:43:04 +08:00
|
|
|
let audio_context;
|
2022-03-02 12:25:19 +08:00
|
|
|
|
|
|
|
|
function startUserMedia(stream) {
|
|
|
|
|
var input = audio_context.createMediaStreamSource(stream);
|
|
|
|
|
__log('Media stream created.');
|
|
|
|
|
__log("input sample rate " + input.context.sampleRate);
|
|
|
|
|
|
|
|
|
|
// Feedback!
|
|
|
|
|
//input.connect(audio_context.destination);
|
|
|
|
|
__log('Input connected to audio context destination.');
|
|
|
|
|
|
|
|
|
|
__log('Recorder initialised.');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function __log(log) {
|
|
|
|
|
console.log(log)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.onload = function init() {
|
|
|
|
|
try {
|
|
|
|
|
// webkit shim
|
|
|
|
|
window.AudioContext = window.AudioContext || window.webkitAudioContext;
|
|
|
|
|
navigator.getUserMedia = (navigator.getUserMedia ||
|
|
|
|
|
navigator.webkitGetUserMedia ||
|
|
|
|
|
navigator.mozGetUserMedia ||
|
|
|
|
|
navigator.msGetUserMedia);
|
|
|
|
|
window.URL = window.URL || window.webkitURL;
|
|
|
|
|
|
|
|
|
|
audio_context = new AudioContext;
|
|
|
|
|
__log('Audio context set up.');
|
|
|
|
|
__log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
|
|
|
|
|
} catch (e) {
|
|
|
|
|
alert('No web audio support in this browser!');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
navigator.getUserMedia({audio: true}, startUserMedia, function (e) {
|
|
|
|
|
__log('No live audio input: ' + e);
|
|
|
|
|
});
|
|
|
|
|
myVideo.load()
|
|
|
|
|
myVideo.play() // 视频播放
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
.myDiy {
|
2022-03-02 14:43:04 +08:00
|
|
|
width: 100%;
|
2022-03-02 12:25:19 +08:00
|
|
|
height: 300px;
|
|
|
|
|
margin-top: 10px;
|
2022-03-02 16:26:04 +08:00
|
|
|
margin-left: 1%;
|
2022-03-02 14:43:04 +08:00
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.myVideo {
|
|
|
|
|
width: 70%;
|
2022-03-02 16:26:04 +08:00
|
|
|
float: right;
|
2022-03-02 14:43:04 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.myButtons {
|
|
|
|
|
width: 30%;
|
2022-03-02 16:26:04 +08:00
|
|
|
float: left;
|
2022-03-02 12:25:19 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
2022-03-02 14:43:04 +08:00
|
|
|
|
2022-03-02 12:25:19 +08:00
|
|
|
font-size: 1em;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
</html>
|
