node-gotapi-plugin-onvif
Version:
This module is an ONVIF Plug-In for the node-gotapi.
107 lines (102 loc) • 4.72 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ONVIF Network Camera Manager</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- -->
<link href="style.css" rel="stylesheet">
<script src="../gotapi-client.js"></script>
<script src="onvif.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<h1><a class="navbar-brand" href="https://github.com/futomi/node-onvif" target="_blank">ONVIF Network Camera Manager</a></h1>
</div>
</div>
</div>
<div class="container theme-showcase" role="main" id="main-wrapper">
<form class="form-horizontal" id="connect-form">
<div class="form-group">
<label for="device" class="col-sm-2 control-label">Device</label>
<div class="col-sm-10">
<div class="input-group">
<select class="form-control" id="device" name="device" disabled>
<option>now searching...</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="button" name="discover">Discover</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label for="user" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="user" name="user" disabled>
</div>
</div>
<div class="form-group">
<label for="pass" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pass" name="pass" disabled>
</div>
</div>
<button type="button" class="form-control btn btn-primary" name="connect" disabled>Connect</button>
</form>
<div id="connected-device">
<p><img class="snapshot" src=""></p>
<div class="device-info-box"><span class="name"></span> (<span class="address"></span>)</div>
<div class="ptz-ctl-box">
<div class="ptz-pad-box">
<span class="left glyphicon glyphicon-menu-left"></span>
<span class="right glyphicon glyphicon-menu-right"></span>
<span class="up glyphicon glyphicon-menu-up"></span>
<span class="down glyphicon glyphicon-menu-down"></span>
</div>
<button type="button" class="ptz-goto-home"><span class="glyphicon glyphicon-home"></span></button>
</div>
<div class="ptz-spd-ctl-box">
<span class="label">PTZ speed for keyboard</span>
<div class="btn-group btn-group-sm" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="ptz-speed" value="0.5"> slow</label>
<label class="btn btn-default"><input type="radio" name="ptz-speed" value="0.75"> medium</label>
<label class="btn btn-default active"><input type="radio" name="ptz-speed" value="1.0" checked> fast</label>
</div>
</div>
<div class="ptz-zom-ctl-box btn-group btn-group-lg" role="group" aria-label="Zoom">
<button type="button" class="ptz-zom ptz-zom-ot btn btn-default"><span class="glyphicon glyphicon-zoom-out"></span></button>
<button type="button" class="ptz-zom ptz-zom-in btn btn-default"><span class="glyphicon glyphicon-zoom-in"></span></button>
</div>
<div class="disconnect-box">
<button type="button" class="form-control btn btn-default" name="disconnect">Disconnect</button>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="message-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p class="modal-message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>