<!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">
<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>
<button id="af" type="button" class="button layui-btn layui-btn-normal">
对 焦
</button>
</div>
</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');
let myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
$('#reboot').click(function () {
config('reboot')
})
$('#up').mousedown(function () {
config('up')
})
$('#down').mouseup(function () {
config('down')
})
$('#warning').mouseup(function () {
config('warning')
})
$('#af').mouseup(function () {
config('af')
})
function config(status) {
$.post("/door/set.do", {status: status}, function (json) {
layer.msg(json.msg)
});
}
let audio_context;
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 {
width: 100%;
height: 300px;
margin-top: 10px;
margin-left: 1%;
float: left;
}
.myVideo {
width: 70%;
float: right;
}
.myButtons {
width: 30%;
float: left;
}
.button {
font-size: 1em;
}
</style>
</html>