More intelligent handling of disabling and re-enabling the webcam stream.

See #314

src/octoprint/static/js/app/dataupdater.js

@@ -40,9 +40,12 @@ function DataUpdater(loginStateViewModel, connectionViewModel, printerStateViewM
         if ($("#offline_overlay").is(":visible")) {
             $("#offline_overlay").hide();
             self.timelapseViewModel.requestData();
-            $("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime());
             self.loginStateViewModel.requestData();
             self.gcodeFilesViewModel.requestData();
+
+            if ($('#tabs li[class="active"] a').attr("href") == "#control") {
+                $("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime());
+            }
         }
     }
 

src/octoprint/static/js/app/main.js

@@ -51,14 +51,24 @@ $(function() {
             terminalViewModel.updateOutput();
         });
 
+        var webcamDisableTimeout;
         $('#tabs a[data-toggle="tab"]').on('show', function (e) {
             var current = e.target;
             var previous = e.relatedTarget;
 
             if (current.hash == "#control") {
-                $("#webcam_image").attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime());
+                clearTimeout(webcamDisableTimeout);
+                var webcamImage = $("#webcam_image");
+                var currentSrc = webcamImage.attr("src");
+                if (currentSrc === undefined || currentSrc.trim() == "") {
+                    webcamImage.attr("src", CONFIG_WEBCAM_STREAM + "?" + new Date().getTime());
+                }
             } else if (previous.hash == "#control") {
-                $("#webcam_image").attr("src", "#");
+                // only disable webcam stream if tab is out of focus for more than 5s, otherwise we might cause
+                // more load by the constant connection creation than by the actual webcam stream
+                webcamDisableTimeout = setTimeout(function() {
+                    $("#webcam_image").attr("src", "");
+                }, 5000);
             }
         });
 

src/octoprint/templates/index.jinja2

@@ -339,7 +339,7 @@
                         <div class="tab-pane" id="control">
                             {% if webcamStream %}
                             <div id="webcam_container">
-                                <img id="webcam_image" src="{{ webcamStream }}" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }">
+                                <img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }">
                             </div>
                             {% endif %}