v1.2

HTTPS support

BMDevice.js

@@ -22,6 +22,9 @@ class BMDevice {
     hostname;
     APIAddress;
 
+    // Are we using HTTPS?
+    useHTTPS;
+
     // WebSocket items
     ws;
     availableProperties;
@@ -39,10 +42,13 @@ class BMDevice {
     updateUI() {};
 
     // ============= CONSTRUCTOR ================
-    constructor(hostname) {
+    constructor(hostname, secure=false) {
+        // Set Security
+        this.useHTTPS = secure;
+
         // Set name properties
         this.hostname = hostname;
-        this.APIAddress = "http://"+hostname+"/control/api/v1";
+        this.APIAddress = (this.useHTTPS ? "https://" : "http://")+hostname+"/control/api/v1";
         this.name = this.hostname.replace(".local","").replaceAll("-"," ");
 
         // Initialize WebSocket

README.md

@@ -20,6 +20,8 @@ If your camera does not have an ethernet port, use a USB-C to ethernet adapter.
 
 ![BM Camera Setup](screenshots/BMCameraSetup2.png)
 
+> If you're using the GitHub Pages site, the API must be accessed with HTTPS rather than HTTP. You can enable this on the camera in **Blackmagic Camera Setup** by clicking the "Generate Certificate" button.
+
 ## Launching the App
 The app is a self-contained, offline web page. (No installation, dependencies, or servers to worry about!) Simply open the `index.html` file in your browser of choice, enter the hostname of your camera, and press "Connect".
 

index.html

@@ -196,6 +196,8 @@
                                     <td>
                                         <input type="text" placeholder="Studio-Camera-6K-Pro.local" id="hostnameInput">
                                         <button onclick="initCamera()">Connect</button>
+                                        <input type="checkbox" id="secureCheckbox">
+                                        <span id="secureCheckboxLabel">Use HTTPS</span>
                                         <span id="connectionErrorSpan"></span>
                                     </td>
                                 </tr>
@@ -331,7 +333,7 @@
         <!-- Footer Div -->
         <div class="flexContainerH" id="footerContainer">
             <div id="footerLeft">
-                <span class="">(v 1.1)</span>
+                <span class="">(v 1.2)</span>
                 <span id="activeElementSpan"></span>
             </div>
             <div id="footerLinks">

style.css

@@ -131,6 +131,10 @@ input[type=file]:focus {
     border: 1px solid rgb(150, 58, 0);
 }
 
+#secureCheckboxLabel {
+    margin-right: 1vw;
+}
+
 /* Horizontal Container Styles */
 #headerContainer {
     background: #181818;

web-ui.js

@@ -26,14 +26,15 @@ function bodyOnLoad() {
 function initCamera() {
     // Get hostname from Hostname text field
     let hostname = document.getElementById("hostnameInput").value;
+    let security = document.getElementById("secureCheckbox").checked;
 
     try {
         // Check if the hostname is valid
-        let response = sendRequest("GET", "http://"+hostname+"/control/api/v1/system","");
+        let response = sendRequest("GET", (security ? "https://" : "http://")+hostname+"/control/api/v1/system","");
 
         if (response.status < 300) {
             // Success, make a new camera, get all relevant info, and populate the UI
-            cameras[ci] = new BMCamera(hostname);
+            cameras[ci] = new BMCamera(hostname, security);
 
             cameras[ci].updateUI = updateUIAll;
 
@@ -286,8 +287,8 @@ function updateUIAll() {
     }
 
     // ============ Footer Links ===============
-    document.getElementById("documentationLink").href = "http://"+cameras[ci].hostname+"/control/documentation.html";
+    document.getElementById("documentationLink").href = (cameras[ci].useHTTPS ? "https://" : "http://")+cameras[ci].hostname+"/control/documentation.html";
-    document.getElementById("mediaManagerLink").href = "http://"+cameras[ci].hostname;
+    document.getElementById("mediaManagerLink").href = (cameras[ci].useHTTPS ? "https://" : "http://")+cameras[ci].hostname;
 }