hendrik
/
roberto
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

mjpeg frontend

main
Hendrik Langer 4 years ago
parent
d222e93159
commit
55badad96b
2 changed files with 202 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      raspberry/roberto/views/frontend/routes.py
  2. 198
      raspberry/roberto/views/frontend/templates/index_mjpeg.html

4
raspberry/roberto/views/frontend/routes.py
View File

@ -11,6 +11,10 @@ from flask import Response
def index(): def index():
return render_template('index.html') return render_template('index.html')
@frontend_blueprint.route('/index_mjpeg.html')
def index_mjpeg():
return render_template('index_mjpeg.html')
def gen(camera): def gen(camera):
"""Video streaming generator function.""" """Video streaming generator function."""
while True: while True:

198
raspberry/roberto/views/frontend/templates/index_mjpeg.html
View File

@ -0,0 +1,198 @@
<!doctype html>
<html lang="en">
<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">
<style>
body {
background: black;
}
#stream, #textoverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
#controls_l {
position: absolute;
bottom: 75px;
left: 0;
width: 40%;
height: 33%;
pointer-events: all;
}
#controls_r {
position: absolute;
bottom: 75px;
right: 0;
width: 40%;
height: 33%;
pointer-events: all;
}
p {
position: relative;
z-index: 1;
}
#controls2 {
position: absolute;
z-index: 1;
top: 20px;
right: 50px;
text-align: right;
}
.stats-box {
display: none;
position: absolute;
left: 10px;
top: 100px;
color: white;
opacity: 0.6;
z-index: 1;
}
#chat {
position: absolute;
right: 20px;
top: 100px;
color: white;
opacity: 0.6;
z-index: 1;
}
#textoverlay, .stats-box {
pointer-events: none;
}
</style>
</head>
<body>
<h1>Video Streaming Demonstration</h1>
{# <!--<img src="{{ url_for('frontend.video_feed') }}">--> #}
<div id="video">
<img id="stream" src="{{ url_for('frontend.video_feed') }}">
<canvas id="textoverlay"></canvas>
<div id="controls_l"></div>
<div id="controls_r"></div>
</div>
<div id="controls2">
<button id="goFS">&#x26f6;</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 id="chat"></div>
<!--<h2 id="start">Press a button on your controller to start</h2>-->
<!-- jQuery and Bootstrap -->
<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
<!--<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>-->
<script src="{{ url_for('static', filename='js/nipplejs.js') }}"></script>
<script type="text/javascript">
'use strict';
var wsUrl = "wss://" + window.location.hostname + ":" + window.location.port;
var socket = io.connect(wsUrl, { autoConnect: true, transports: [ 'websocket' ] });
var webrtcPeerConnection;
var webrtcConfiguration;
var reportError;
socket.on('connect', function(){
console.log("Connected...!", socket.connected)
});
socket.on('data', (data) => {
console.log('Data received: ',data);
});
socket.on('battery', (data) => {
console.log('Data received: ',data);
var canvas = document.getElementById("textoverlay");
var ctx = canvas.getContext("2d");
ctx.font = "14px Arial";
ctx.fillStyle = "blue";
ctx.clearRect(3*canvas.width/4, 0, canvas.width/4, 30);
ctx.fillText(data, 3*canvas.width/4, 30);
});
socket.on('text', (data) => {
console.log('Text received: ',data);
var chatlog = document.getElementById("chat");
var new_message = document.createElement('p');
new_message.innerHTML = data.data;
chatlog.append(new_message);
if (chatlog.children.length > 10) {
chatlog.children[0].remove();
}
});
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);
}
window.onload = function() {
var vidstream = document.getElementById("stream");
var canvas = document.getElementById("textoverlay");
var ctx = canvas.getContext("2d");
ctx.font = "24px Arial";
ctx.fillStyle = "blue";
//ctx.fillText("Hello World", canvas.width/3, 30);
$('form#message').submit(function(event) {
socket.emit('text', {data: $('#message_data').val()});
$('#message_data').val("");
return false;
});
};
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);
</script>
<script src="{{ url_for('frontend.gamepad_js') }}"></script>
</body>
</html>
Write Preview
Loading…
Cancel
Save