200 lines
5.8 KiB
HTML
200 lines
5.8 KiB
HTML
|
<!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>
|