tr_webui: update stream, add shutdown function

Author: bjsowa

tr_webui/www/index.html

@@ -34,10 +34,16 @@
         <input id="ang-slider" type="text"/>
       </div>
     </div>
+
+    <div class="row my-4">
+      <div class="col d-flex justify-content-center">
+        <video id="stream" class="p-1 bg-dark"/>
+      </div>
+    </div>
 
     <div class="row my-4">
       <div class="col">
-          <div class="d-flex" style="width: 210px; height: 210px;">
+          <div class="d-flex justify-content-center" style="width: 210px; height: 210px;">
               <div id="joystick"></div>
           </div>
       </div>
@@ -79,11 +85,6 @@
       </div>
       <div class="col-md-10"></div>
     </div>
-
-
-    <div class="stream-wrapper">
-      <video id="stream"/>
-    </div>
 
     <script src="scripts/jquery-3.3.1.slim.min.js"></script>
     <script src="scripts/bootstrap.min.js"></script>

tr_webui/www/scripts/stream.js

@@ -54,8 +54,10 @@ Stream.prototype.createPeerConnection = function() {
     this.peerConnection.ontrack = (event) => {
         console.log("[stream] remote stream added:", event.streams[0]);
         let remoteVideoElement = document.getElementById('stream');
-        remoteVideoElement.srcObject = event.streams[0];
-        remoteVideoElement.play();
+        if(remoteVideoElement.paused) {
+            remoteVideoElement.srcObject = event.streams[0];
+            remoteVideoElement.play();
+        }
     }
 
     this.peerConnection.onremovestream = () => console.log('[stream] remove');
@@ -75,7 +77,7 @@ Stream.prototype.offer = function() {
         }
     };
     this.websocket.send(JSON.stringify(command));
-    console.log("[stream] offer(), command=" + JSON.stringify(command));
+    console.debug("[stream] offer(), command=" + JSON.stringify(command));
 }
 
 Stream.prototype.open = function() {
@@ -88,7 +90,7 @@ Stream.prototype.addIceCandidates = function () {
     this.iceCandidates.forEach((candidate) => {
         this.peerConnection.addIceCandidate(candidate,
             function() {
-                console.log("[stream] IceCandidate added: " + JSON.stringify(candidate));
+                console.debug("[stream] IceCandidate added: " + JSON.stringify(candidate));
             },
             function(error) {
                 console.error("[stream] addIceCandidate error: " + error);
@@ -103,7 +105,7 @@ Stream.prototype.message = function(event) {
     var msg = JSON.parse(event.data);
     var what = msg.what;
     var data = msg.data;
-    console.log("[stream] message =" + what);
+    console.debug("[stream] message =" + what);
 
     switch (what) {
         case "offer":
@@ -158,15 +160,15 @@ Stream.prototype.message = function(event) {
 
 
 Stream.prototype._onRemoteSdpSuccess = function() {
-    console.log('[stream] onRemoteSdpSucces()');
+    console.debug('[stream] onRemoteSdpSucces()');
     this.remoteDesc = true;
     this.peerConnection.createAnswer((sessionDescription) => {
             this.peerConnection.setLocalDescription(sessionDescription);
             let request = JSON.stringify({
                 what: "answer",
                 data: JSON.stringify(sessionDescription)
             });
-            console.log('[stream] sdp success', request);
+            console.debug('[stream] sdp success', request);
 
             this.websocket.send(request);
 

tr_webui/www/scripts/webui.js

@@ -9,6 +9,8 @@ var cmdVelPub;
 var servoPub;
 var servoAngles;
 var stream;
+var twistIntervalID;
+var servoIntervalID;
 
 function initROS() {
 
@@ -207,6 +209,15 @@ function publishServos() {
     servoPub.publish(servoMsg);
 }
 
+function shutdown() {
+    clearInterval(twistIntervalID);
+    clearInterval(servoIntervalID);
+    cmdVelPub.unadvertise();
+    servoPub.unadvertise();
+    ros.close();
+    stream.stop();
+}
+
 window.onload = function () {
 
     initROS();
@@ -218,9 +229,9 @@ window.onload = function () {
         $('#firmware-ver').text(result.firmware_ver);
     });
 
-    setInterval(() => publishTwist(), 50);
+    twistIntervalID = setInterval(() => publishTwist(), 50);
 
-    setInterval(() => publishServos(), 50);
+    servoIntervalID = setInterval(() => publishServos(), 50);
 
     setInterval(function() {
         batteryClient.callService(new ROSLIB.ServiceRequest(), function(result) {
@@ -229,6 +240,7 @@ window.onload = function () {
     }, 1000);
 
     stream = new Stream();
-    window.onbeforeunload = () => stream.stop();
     stream.start();
+
+    window.addEventListener("beforeunload", () => shutdown());
 }