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