First attempt at a webcam video element - see OctoPrint#2001

keyz182 · Jul 24, 2018 · ff87324 · ff87324
1 parent 4963a4b
commit ff87324
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 3 deletions.
diff --git a/src/octoprint/server/api/settings.py b/src/octoprint/server/api/settings.py
@@ -99,6 +99,7 @@ def getSettings():
 		},
 		"webcam": {
 			"streamUrl": s.get(["webcam", "stream"]),
+			"streamVideo": s.get(["webcam", "video"]),
 			"streamRatio": s.get(["webcam", "streamRatio"]),
 			"streamTimeout": s.getInt(["webcam", "streamTimeout"]),
 			"snapshotUrl": s.get(["webcam", "snapshot"]),
@@ -381,6 +382,7 @@ def _saveSettings(data):
 
 	if "webcam" in data.keys():
 		if "streamUrl" in data["webcam"]: s.set(["webcam", "stream"], data["webcam"]["streamUrl"])
+		if "streamVideo" in data["webcam"]: s.set(["webcam", "video"], data["webcam"]["streamVideo"])
 		if "streamRatio" in data["webcam"] and data["webcam"]["streamRatio"] in ("16:9", "4:3"): s.set(["webcam", "streamRatio"], data["webcam"]["streamRatio"])
 		if "streamTimeout" in data["webcam"]: s.setInt(["webcam", "streamTimeout"], data["webcam"]["streamTimeout"])
 		if "snapshotUrl" in data["webcam"]: s.set(["webcam", "snapshot"], data["webcam"]["snapshotUrl"])

diff --git a/src/octoprint/settings.py b/src/octoprint/settings.py
@@ -202,6 +202,7 @@ def settings(init=False, basedir=None, configfile=None):
 	},
 	"webcam": {
 		"stream": None,
+		"video": False,
 		"streamRatio": "16:9",
 		"streamTimeout": 5,
 		"snapshot": None,

diff --git a/src/octoprint/static/js/app/viewmodels/control.js b/src/octoprint/static/js/app/viewmodels/control.js
@@ -382,7 +382,12 @@ $(function() {
             if (self.webcamDisableTimeout != undefined) {
                 clearTimeout(self.webcamDisableTimeout);
             }
-            var webcamImage = $("#webcam_image");
+
+            var selector = '#webcam_image';
+            if(self.settings.webcam_streamVideo()){
+                selector = '#webcam_video';
+            }
+            var webcamImage = $(selector);
             var currentSrc = webcamImage.attr("src");
 
             // safari bug doesn't release the mjpeg stream, so we just set it up the once

diff --git a/src/octoprint/static/js/app/viewmodels/settings.js b/src/octoprint/static/js/app/viewmodels/settings.js
@@ -118,6 +118,7 @@ $(function() {
         self.printer_defaultExtrusionLength = ko.observable(undefined);
 
         self.webcam_streamUrl = ko.observable(undefined);
+        self.webcam_streamVideo = ko.observable(undefined);
         self.webcam_streamRatio = ko.observable(undefined);
         self.webcam_streamTimeout = ko.observable(undefined);
         self.webcam_snapshotUrl = ko.observable(undefined);
@@ -317,7 +318,13 @@ $(function() {
             }
 
             var text = gettext("If you see your webcam stream below, the entered stream URL is ok.");
-            var image = $('<img src="' + self.webcam_streamUrl() + '">');
+
+            if(self.webcam_streamVideo){
+                var image = $('<video controls src="' + self.webcam_streamUrl() + '">');
+            }else{
+                var image = $('<img src="' + self.webcam_streamUrl() + '">');
+            }
+
             var message = $("<p></p>")
                 .append(text)
                 .append(image);

diff --git a/src/octoprint/templates/snippets/settings/webcam/webcamStreamUrl.jinja2 b/src/octoprint/templates/snippets/settings/webcam/webcamStreamUrl.jinja2
@@ -7,4 +7,11 @@
         </div>
         <span class="help-inline">{% trans %}Needs to be reachable from the browser displaying the OctoPrint UI, used to embed the webcam stream into the page.{% endtrans %}</span>
     </div>
+
+    <div class="controls">
+        <label class="checkbox">
+            <input type="checkbox" data-bind="checked: webcam_streamVideo" id="settings-webcamStreamVideo"> {{ _('Is Video') }}
+        </label>
+        <span class="help-inline">{% trans %}Use an HTML5 &lt;video&gt; element to display the stream instead of &lt;img&gt;.{% endtrans %}</span>
+    </div>
 </div>
diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
@@ -14,7 +14,8 @@
         <div id="webcam_rotator" data-bind="css: { webcam_rotated: settings.webcam_rotate90(), webcam_unrotated: !settings.webcam_rotate90() }">
             <div class="webcam_fixed_ratio" data-bind="css: webcamRatioClass">
                 <div class="webcam_fixed_ratio_inner">
-                    <img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }, event: { load: onWebcamLoaded, error: onWebcamErrored }, visible: !webcamError()">
+                    <img id="webcam_image" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }, event: { load: onWebcamLoaded, error: onWebcamErrored }, visible: !webcamError() && !settings.webcam_streamVideo">
+                    <video controls id="webcam_video" data-bind="css: { flipH: settings.webcam_flipH(), flipV: settings.webcam_flipV() }, event: { load: onWebcamLoaded, error: onWebcamErrored }, visible: !webcamError() && settings.webcam_streamVideo"></video>
                 </div>
             </div>
         </div>