Quote:
Originally Posted by raystubbs
I got the video to work, I used dmaciel10123's idea to get it to work, it may not be very fast, I have no idea how it will work since I have only tested it on an emulator. Feedback is appreciated.
|
I just use a simple html document that loads the feed and if it times out then it displays a message, all with jQuery
Just load the html file into a string and replace {jquery} with the contents of a jquery library file and also replace {te} and {am} with teamNum / 100, teamNum % 100, and also replace width and height with the web views width and height and wallah!
Code:
<html>
<head>
<script type="text/javascript">{jquery}</script>
<script type="text/javascript">
var timeout;
$(function() {
$("#errordiv").click(reload);
$("#stream").click(reload);
reload();
});
function reload()
{
$("#error").text("Loading Camera...");
$("#stream").attr("src", "http://10.{te}.{am}.11/mjpg/video.mjpg?resolution=640x480&fps=30");
timeout = setTimeout(function() {
//Cam did not load
$("#error").html("Error Loading Camera<br/>Tap to Refresh");
$("#stream").css({"display":"none"});
$("#errordiv").css({"display":"block"});
}, 4000);
$("#stream").load(function() {
$("#stream").css({"display":"block"});
$("#errordiv").css({"display":"none"});
clearTimeout(timeout);
}).error(function() {
$("#error").html("Error Loading Camera<br/>Tap to Refresh");
$("#stream").css({"display":"none"});
$("#errordiv").css({"display":"block"});
clearTimeout(timeout);
});
}
</script>
</head>
<body style="padding: 0; margin: 0;">
<div id="errordiv" style="display: none; background: lightgray; height: 100%; text-align: center;">
<label id="error" style="position: relative; top: 40%;">Tap to refresh camera</label>
</div>
<img id="stream" width="{width}" height="{height}"/>
</body>
</html>