source: py-tcpmultiplexer/htdocs/browser.html@ 319

Last change on this file since 319 was 319, checked in by Rick van der Zwet, 13 years ago

Browser controls multiple camera's
Default img is static, else it will not stop loading this picture.

  • Property svn:mime-type set to text/html
File size: 1.6 KB
RevLine 
[315]1<html>
2<head>
[319]3<title>py-tcpmultiplexer Webcam Control </title>
[315]4<link href="css/style.css" type="text/css" rel="stylesheet"/>
5<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
6<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
[319]7<script type="text/javascript">
8function createAudio(wav_uri)
9{
10 $("#jplayer").jPlayer({
11 ready: function () {
12 $(this).jPlayer("setMedia", { wav: wav_uri }).jPlayer("play");
13 },
14 ended: function (event) {
15 $(this).jPlayer("play");
16 },
17 swfPath: "",
18 supplied: "wav"
19 });
20 $("#jplayer").after($("<p>In-browser audio is running.</p>"));
21}
22
23function changeVideo(mjeg_uri)
24{
25 $("#player").attr("src",mjeg_uri);
26 $("#player").attr("alt","Video Feed: " + mjeg_uri);
27}
28</script>
[315]29</head>
30<body>
[319]31<h1>py-tcpmultiplexer webcam server</h1>
[315]32
[319]33<input type="button" onclick="changeVideo('/cam1/video')" value="Click to display Cam1" />
34<input type="button" onclick="changeVideo('/cam2/video')" value="Click to display Cam2" /><br />
35<img id="player" src="img/logo.png" alt="Video feeds"/><br/>
[315]36
37<div id="jplayer"><br/><input type="button" onclick="createAudio('/cam1/audio')" value="Click here to play audio with browser"/><br>
38</div>
39
40
[319]41
[315]42<hr />
[319]43<p>Tested browsers: <a href="http://www.firefox.com">Mozilla Firefox</a>, <a href="http://www.google.com/chrome">Google Chrome</a> (<em>If no video appear below, you are using unsupported browser</em>)<br />
44<small>Source Code at: <a href="http://rickvanderzwet.nl/svn/personal/py-tcpmultiplexer/">http://rickvanderzwet.nl/svn/personal/py-tcpmultiplexer/</a></small>
[315]45
46</body>
47</html>
Note: See TracBrowser for help on using the repository browser.