cam2web/src/web/admin.html at master · cvsandbox/cam2web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="jquery.mobile.css" />
    <link rel="icon" type="image/png" href="cam2web.png" />
    <script src="jquery.js"></script>
    <script>
    $(document).bind('mobileinit', function () {
        $.mobile.activeBtnClass = 'unused';
    });
    </script>
    <script src="jquery.mobile.js"></script>
</head>
<body>

<div data-role="page">

<div data-role="header" data-theme="b">
    <img width="32" height="32" src="cam2web_white.png" style="float:left;display:inline;margin-left:10px;margin-top:5px"/>
    <h1 id="title">cam2web Administration</h1>
</div>

<div data-role="content">

<div id="statuscontainer">

<button type="button" id="statusButton" onclick="switchStreaming()">Start streaming</button>

</div>

</div>

<div data-role="footer" data-theme="b">
    <div id="copyright"><a href="https://github.com/cvsandbox/cam2web" target="_blank">cam2web - camera web streamer</a><span id="version"></span> :: Copyright © 2017-2018 cvsandbox<div>
</div>

</div>

<script>
var isStreaming = false;

function getVersionInfo( )
{
    $.ajax( {
        type        : "GET",
        url         : "/version",
        contentType : "application/json; charset=utf-8",
        async       : true,
        success: function( data )
        {
            if ( ( data.status == "OK" ) && ( data.config.version ) )
            {
                $('#version').html( " :: " + data.config.version );
            }
        }
    } );
}

function getStreamingStatus( )
{
    $.ajax( {
        type        : "GET",
        url         : "/status",
        contentType : "application/json; charset=utf-8",
        async       : true,
        success: function( data )
        {
            if ( ( data.status == "OK" ) && ( data.config.running ) )
            {
                var newStatus = ( data.config.running == "1" );

                if ( newStatus != isStreaming )
                {
                    isStreaming = newStatus;

                    $('#statusButton').text( ( isStreaming ) ? "Stop streaming" : "Start streaming" );
                }
            }
        }
    } );
}

function updateStreamingStatus( )
{
    getStreamingStatus( );
    setTimeout( updateStreamingStatus, 1000 );
}

// get version of the streamer and monitor for status updates
getVersionInfo( );
updateStreamingStatus( );

function switchStreaming( )
{
    var variablesMap = { };
    variablesMap["running"] = ( isStreaming ) ? 0 : 1;

    $.ajax( {
        type        : "POST",
        url         : "/status",
        data        : JSON.stringify( variablesMap ),
        contentType : "application/json; charset=utf-8",
        dataType    : "json",
        async       : true,
        success: function( data )
        {
            if ( data.status != "OK" )
            {
                console.log( "Failed switching camera streaming" );
            }
        },
        failure: function( errMsg )
        {
            console.log( errMsg );
        }
    } );
}

</script>
</body>
</html>