✨ Mimetype guessing for the webcam test

Related to OctoPrint#3207

Author: foosel

setup.py

@@ -61,7 +61,8 @@
 	"monotonic>=1.5,<1.6",
 	"frozendict>=1.2,<1.3",
 	"sentry-sdk==0.7.7",
-	"typing>=3.6.6,<4"
+	"typing>=3.6.6,<4",
+	"filetype>=1.0.5,<2"
 ]
 
 if sys.platform == "darwin":

src/octoprint/server/api/__init__.py

@@ -464,7 +464,17 @@ def as_dict(self):
 			response_result = dict(headers=dict(response.headers),
 			                       content_type=content_type)
 
+			if not content_type and data.get("content_type_guess") in valid_boolean_trues:
+				content = response.content
+				content_type = util.guess_mime_type(bytearray(content))
+
+			if not content_type:
+				content_type = "application/octet-stream"
+
+			response_result = dict(assumed_content_type=content_type)
+
 			parsed_content_type = util.parse_mime_type(content_type)
+
 			in_whitelist = content_type_whitelist is None or any(
 				map(lambda x: util.mime_type_matches(parsed_content_type, x), content_type_whitelist))
 			in_blacklist = content_type_blacklist is not None and any(

src/octoprint/static/js/app/viewmodels/settings.js

@@ -361,7 +361,8 @@ $(function() {
                 response: "bytes",
                 timeout: self.webcam_snapshotTimeout(),
                 validSsl: self.webcam_snapshotSslValidation(),
-                content_type_whitelist: ["image/*"]
+                content_type_whitelist: ["image/*"],
+                content_type_guess: true
             })
                 .done(function(response) {
                     if (!response.result) {
@@ -385,7 +386,7 @@ $(function() {
                     }
 
                     var content = response.response.content;
-                    var contentType = response.response.content_type
+                    var contentType = response.response.assumed_content_type;
 
                     var mimeType = "image/jpeg";
                     if (contentType) {
@@ -395,7 +396,7 @@ $(function() {
                     var text = gettext("If you see your webcam snapshot picture below, the entered snapshot URL is ok.");
                     showMessageDialog({
                         title: gettext("Snapshot test"),
-                        message: $('<p>' + text + '</p><p><img src="data:' + mimeType + ';base64,' + content + '" /></p>'),
+                        message: $('<p>' + text + '</p><p><img src="data:' + mimeType + ';base64,' + content + '" style="border: 1px solid black" /></p>'),
                         onclose: function() {
                             self.testWebcamSnapshotUrlBusy(false);
                         }

src/octoprint/util/__init__.py

@@ -867,6 +867,10 @@ def server_reachable(host, port, timeout=3.05, proto="tcp", source=None):
 	except:
 		return False
 
+def guess_mime_type(data):
+	import filetype
+	return filetype.guess_mime(data)
+
 def parse_mime_type(mime):
 	import cgi