新增监控
This commit is contained in:
200
web/html/body/nas/cctv.html
Normal file
200
web/html/body/nas/cctv.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<!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">
|
||||
<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>
|
||||
<button id="myButton" type="button" class="button layui-btn-radius layui-btn layui-btn-lg layui-btn-normal">
|
||||
开 门
|
||||
</button>
|
||||
<button id="myRecord" type="button" class="button layui-btn-radius layui-btn layui-btn-lg layui-btn-normal">
|
||||
语 音
|
||||
</button>
|
||||
</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,
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
$('#myButton').click(function () {
|
||||
|
||||
$.get('/door/set.do?status=open', function (ret) {
|
||||
if (ret === "1") {
|
||||
let index = layer.load(2, {shade: [0.45, '#57606f']});
|
||||
load(index)
|
||||
}
|
||||
})
|
||||
})
|
||||
$('#myRecord').mousedown(function () {
|
||||
console.log("down")
|
||||
startRecording()
|
||||
})
|
||||
$('#myRecord').mouseup(function () {
|
||||
console.log("up")
|
||||
stopRecording()
|
||||
})
|
||||
|
||||
function load(index) {
|
||||
$.get("/door/status.do", function (ret) {
|
||||
if (ret === "1") {
|
||||
layer.close(index)
|
||||
layer.msg("已开门")
|
||||
} else {
|
||||
load(index)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var audio_context;
|
||||
var recorder;
|
||||
|
||||
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.');
|
||||
|
||||
recorder = new Recorder(input, {
|
||||
numChannels: 1
|
||||
});
|
||||
__log('Recorder initialised.');
|
||||
}
|
||||
|
||||
function startRecording() {
|
||||
recorder && recorder.record();
|
||||
__log('Recording...');
|
||||
}
|
||||
|
||||
function stopRecording() {
|
||||
recorder && recorder.stop();
|
||||
__log('Stopped recording.');
|
||||
|
||||
// create WAV download link using audio data blob
|
||||
createDownloadLink();
|
||||
|
||||
recorder.clear();
|
||||
}
|
||||
|
||||
function createDownloadLink() {
|
||||
console.log("check audio...")
|
||||
recorder && recorder.exportWAV(function (blob) {
|
||||
console.log('get vudio')
|
||||
|
||||
var formData = new FormData()
|
||||
console.log(Object.prototype.toString.call(blob))
|
||||
formData.append('audio', blob, new Date().toISOString() + '.wav')
|
||||
$.ajax({
|
||||
url: '/door/audio.do',
|
||||
type: 'POST',
|
||||
//contentType: 'application/octet-stream',
|
||||
contentType: false,
|
||||
processData: false, // 增加这一行，不处理参数
|
||||
data: formData,
|
||||
success: function (result) {
|
||||
console.log(result)
|
||||
}
|
||||
})
|
||||
// var url = URL.createObjectURL(blob);
|
||||
// var hf = document.createElement('a');
|
||||
// hf.href = url;
|
||||
// hf.download = new Date().toISOString() + '.wav';
|
||||
// hf.innerHTML = hf.download;
|
||||
// hf.click()
|
||||
// console.log(url)
|
||||
});
|
||||
}
|
||||
|
||||
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: 20%;
|
||||
height: 300px;
|
||||
margin-top: 10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user