|
|
|
@ -3,6 +3,8 @@ |
|
|
|
<head> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
|
<meta name="mobile-web-app-capable" content="yes"> |
|
|
|
<link rel="manifest" href="/manifest.json"> |
|
|
|
<title>Roberto</title> |
|
|
|
<!-- Bootstrap --> |
|
|
|
<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet"> |
|
|
|
@ -39,7 +41,7 @@ |
|
|
|
position: relative; |
|
|
|
z-index: 1; |
|
|
|
} |
|
|
|
#message { |
|
|
|
#controls2 { |
|
|
|
position: absolute; |
|
|
|
z-index: 1; |
|
|
|
top: 20px; |
|
|
|
@ -68,10 +70,13 @@ |
|
|
|
<div id="controls_l"></div> |
|
|
|
<div id="controls_r"></div> |
|
|
|
</div> |
|
|
|
<div id="controls2"> |
|
|
|
<button id="goFS">⛶</button> |
|
|
|
<form id="message" method="POST" action='#'> |
|
|
|
<input type="text" name="message_data" id="message_data" placeholder="Message"> |
|
|
|
<input type="submit" value="Send"> |
|
|
|
</form> |
|
|
|
</div> |
|
|
|
<div class="stats-box"></div> |
|
|
|
|
|
|
|
<!--<h2 id="start">Press a button on your controller to start</h2>--> |
|
|
|
@ -170,6 +175,20 @@ socket.on('battery', (data) => { |
|
|
|
ctx.fillText(data, 3*canvas.width/4, 30); |
|
|
|
}); |
|
|
|
|
|
|
|
function displayText(text, left, top) { |
|
|
|
var canvas = document.getElementById("textoverlay"); |
|
|
|
var ctx = canvas.getContext("2d"); |
|
|
|
ctx.font = "16px Arial"; |
|
|
|
ctx.fillStyle = "blue"; |
|
|
|
ctx.fillText(text, left, top); |
|
|
|
} |
|
|
|
|
|
|
|
function clearText() { |
|
|
|
var canvas = document.getElementById("textoverlay"); |
|
|
|
var ctx = canvas.getContext("2d"); |
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
|
|
} |
|
|
|
|
|
|
|
function playStream(videoElement, hostname, port, path, configuration, reportErrorCB) { |
|
|
|
var l = window.location; |
|
|
|
var wsHost = (hostname != undefined) ? hostname : l.hostname; |
|
|
|
@ -203,9 +222,52 @@ socket.on('battery', (data) => { |
|
|
|
$('#message_data').val(""); |
|
|
|
return false; |
|
|
|
}); |
|
|
|
|
|
|
|
vidstream.addEventListener("play", function() { |
|
|
|
clearText(); |
|
|
|
}, true); |
|
|
|
vidstream.addEventListener("pause", function() { |
|
|
|
displayText("PAUSED", canvas.width/3, canvas.height/2); |
|
|
|
}, true); |
|
|
|
displayText("PAUSED", canvas.width/3, canvas.height/2); |
|
|
|
/* |
|
|
|
var promise = document.getElementById('stream').play(); |
|
|
|
if (promise !== undefined) { |
|
|
|
promise.then(_ => { |
|
|
|
// Autoplay started! |
|
|
|
displayText("playing", canvas.width/2, canvas.height/2); |
|
|
|
}).catch(error => { |
|
|
|
// Autoplay was prevented. |
|
|
|
// Show a "Play" button so that user can start playback. |
|
|
|
displayText("PAUSED", canvas.width/3, canvas.height/2); |
|
|
|
}); |
|
|
|
} |
|
|
|
*/ |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
function toggleFullScreen() { |
|
|
|
var doc = window.document; |
|
|
|
var docEl = doc.documentElement; |
|
|
|
|
|
|
|
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen; |
|
|
|
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen; |
|
|
|
|
|
|
|
if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) { |
|
|
|
requestFullScreen.call(docEl); |
|
|
|
} |
|
|
|
else { |
|
|
|
cancelFullScreen.call(doc); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
var goFS = document.getElementById("goFS"); |
|
|
|
goFS.addEventListener("click", function() { |
|
|
|
toggleFullScreen(); |
|
|
|
document.getElementById("goFS").style.display = "none"; |
|
|
|
}, false); |
|
|
|
|
|
|
|
|
|
|
|
function getConnectionStats() { |
|
|
|
if (webrtcPeerConnection) { |
|
|
|
webrtcPeerConnection.getStats(null).then(stats => { |
|
|
|
|
