<!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">
                    重&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;启
                </button>
                <button id="down" type="button"
                        class="button  layui-btn layui-btn-normal">
                    减&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;焦
                </button>
                <button id="up" type="button" class="button layui-btn layui-btn-normal">
                    增&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;焦
                </button>
                <div style="margin-top: 10px"></div>
                <button id="warning" type="button" class="button  layui-btn layui-btn-normal">
                    报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;警
                </button>
                <button id="af" type="button" class="button  layui-btn layui-btn-normal">
                    对&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;焦
                </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>