forked from waveform80/pistreaming
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (72 loc) · 2.54 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=${WIDTH}, initial-scale=1"/>
<title>jsmpeg streaming</title>
<style type="text/css">
body {
background: ${BGCOLOR};
text-align: center;
margin-top: 1%;
}
#videoCanvas {
/* Always stretch the canvas to WIDTHxHEIGHT, regardless of its
internal size. */
width: ${WIDTH}px;
height: ${HEIGHT}px;
}
</style>
</head>
<body>
<!-- The Canvas size specified here is the "initial" internal resolution. jsmpeg will
change this internal resolution to whatever the source provides. The size the
canvas is displayed on the website is dictated by the CSS style.
-->
<canvas id="videoCanvas" width="${WIDTH}" height="${HEIGHT}">
<p>
Please use a browser that supports the Canvas Element, like
<a href="http://www.google.com/chrome">Chrome</a>,
<a href="http://www.mozilla.com/firefox/">Firefox</a>,
<a href="http://www.apple.com/safari/">Safari</a> or Internet Explorer 10
</p>
</canvas>
<script type="text/javascript" src="jsmpg.js"></script>
<script type="text/javascript">
// Show loading notice
var canvas = document.getElementById('videoCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '${COLOR}';
ctx.fillText('Loading...', canvas.width/2-30, canvas.height/3);
// Setup the WebSocket connection and start the player
var client = new WebSocket('ws://' + window.location.hostname + ':${WS_PORT}/');
var player = new jsmpeg(client, {canvas:canvas});
</script>
<div style="width:${WIDTH}px; margin:0 auto;" >
<div>
<form action="" method="post">
<input type="submit" name="left" value="Left" style="width:25%;float:left;height:50px"/>
</form>
<form action="" method="post">
<input type="submit" name="forward" value="Forward" style="width:50%;float:left;height:50px"/>
</form>
<form action="" method="post">
<input type="submit" name="right" value="Right" style="width:25%;float:left;height:50px"/>
</form>
</div>
<form action="" method="post">
<input type="submit" name="halt" value="Halt" style="width:100%;height:75px"/>
</form>
<div>
<form action="" method="post">
<input type="submit" name="dock" value="Dock" style="width:25%;float:left;height:50px"/>
</form>
<form action="" method="post">
<input type="submit" name="back" value="Back" style="width:50%;float:left;height:50px"/>
</form>
<form action="" method="post">
<input type="submit" name="power" value="Power" style="width:25%;float:left;height:50px"/>
</form>
</div>
</div>
</body>
</html>