mjpeg frontend

4 years ago · 55badad96b
2 changed files with 202 additions and 0 deletions
--- a/raspberry/roberto/views/frontend/routes.py
+++ b/raspberry/roberto/views/frontend/routes.py
@ -11,6 +11,10 @@ from flask import Response
 def index():
    return render_template('index.html')

+@frontend_blueprint.route('/index_mjpeg.html')
+def index_mjpeg():
+    return render_template('index_mjpeg.html')
+
 def gen(camera):
    """Video streaming generator function."""
    while True:
--- a/raspberry/roberto/views/frontend/templates/index_mjpeg.html
+++ b/raspberry/roberto/views/frontend/templates/index_mjpeg.html
@ -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>