readme

BMD-Camera-Control.js

@@ -186,16 +186,16 @@ class BMDCamera {
     updateUIPresets() {
         var presetsList = document.getElementById("presetsDropDown");
 
+        presetsList.innerHTML = "";
+
         this.presets.forEach((presetItem) => {
             let presetName = presetItem.split('.', 1);
 
-            if (!presetsList.contains(document.getElementsByName("presetOption"+presetName)[0])) {
+            let textNode = document.createTextNode(presetName);
-                let textNode = document.createTextNode(presetName);
+            let optionNode = document.createElement("option");
-                let optionNode = document.createElement("option");
+            optionNode.setAttribute("name", "presetOption"+presetName);
-                optionNode.setAttribute("name", "presetOption"+presetName);
+            optionNode.appendChild(textNode);
-                optionNode.appendChild(textNode);
+            document.getElementById("presetsDropDown").appendChild(optionNode);
-                document.getElementById("presetsDropDown").appendChild(optionNode);
-            }
         });
     }
 
@@ -248,6 +248,10 @@ class BMDCamera {
 
     updateUINDStop() {
         document.getElementById("ndFilterSpan").innerHTML = this.NDStop;
+        if (this.UnimplementedFunctionality.includes("/video/ndFilter")) {
+            document.getElementById("ndFilterSpan").innerHTML = 0;
+            document.getElementById("ndFilterSpan").disabled = true;
+        }
     }
 
     updateUIshutter() {

README.md

@@ -1,2 +1,85 @@
 # BM Camera Control WebUI
- A demonstration of the Blackmagic Camera Control protocols via an extensible web interface
+This web app is a demonstration of the [Blackmagic Design](https://blackmagicdesign.com) Camera Control REST API via an extensible web interface. Modeled after the interface of ATEM Software Control, most of the major functions of the camera that can be controlled by the API are available here.
+
+>This program was written based on the official REST API documentation from Blackmagic, which can be found [here](https://documents.blackmagicdesign.com/DeveloperManuals/RESTAPIforBlackmagicCameras.pdf)
+
+Using this tool, you can control many features of your Blackmagic studio and cinema cameras *without any extra hardware!* Use it for remote monitoring, color correction, focus pulling, or keeping tabs on your eqiupment. The `BMD-Camera-Control.js` file is also useful if you want to write your own web app using the REST API.
+
+![Screenshot 1](screenshots/WebUI1.png)
+
+# Getting Started
+
+## Camera Setup
+In order for the camera's API to be active, network connectivity must be enabled in **Blackmagic Camera Setup**, and the camera should be connected to the same network as your computer with an ethernet cable.
+<br>
+If your camera does not have an ethernet port, use a USB-C to ethernet adapter.
+
+>Make sure that your camera has been updated to the latest firmware! (8.6+)
+
+![BM Camera Setup](screenshots/BMCameraSetup2.png)
+
+## Launching the App
+The app is a self-contained, offline web page. (No installation, dependencies, or Node.js installations to worry about!) Simply open the `index.html` file in your browser of choice, enter the hostname of your camera, and press "Connect".
+<br><br>
+If you don't know the hostname of your camera, you can find and/or change it in **Blackmagic Camera Setup**.
+<br>
+(The hostname is the camera's name with spaces replaced with dashes, and `.local` appended to the end)
+<br><br>
+Not all camera and lens combinations are supported by the API (Some cameras have ND filters, some don't. Some electronic zoom lenses work, some don't.)
+
+# Using the App
+
+### Data Synchronization
+The app polls data from the camera every ten seconds (you'll see "Refreshing..." in the corner). When you change a setting in the browser, it relays that to the camera and verifies the change. If you make a change that reverts after a few seconds, that means the camera rejected it. The page can be manually refreshed with the button in the bottom left corner.
+
+### Arrows, Buttons, and Text Boxes
+Many controls work both with sliders/buttons, but if you want to enter a specific value then click on the number and enter the value manually.
+<br>
+(Sometimes this might take a couple of tries).
+<br>
+
+### Media Management
+To view files on the drives of your camera, follow the link in the bottom-right corder for the **Web Media Manager**. This will take you to *your camera's* internal web server where you can view, download, and upload video files over the network.
+
+### Manual API Calls
+The page allows for the sending of manual API calls to the camera. Use the text boxes to do that, after consulting the documentation.
+
+### Layout
+I have done my best to make the page responsive, but every screen is different. If something looks off, adjust the zoom/scale of the window in your browser and that should fix things.
+
+# Compatibility
+This app (as of June 2024), should be compatible with the following Blackmagic cameras:
+| Camera Name | Default Hostname | Notes |
+|-|-|-|
+| Pocket Cinema Camera 4K | `Pocket-Cinema-Camera-4K.local` | FW 8.6+ Required |
+| Pocket Cinema Camera 6K | `Pocket-Cinema-Camera-6K.local` | FW 8.6+ Required |
+| Pocket Cinema Camera 6K Pro | `Pocket-Cinema-Camera-6K-Pro.local` | FW 8.6+ Required |
+| Cinema Camera 6K | `Cinema-Camera-6K.local` | |
+| URSA Broadcast G2 | `URSA-Broadcast-G2.local`$^1$ | |
+| Micro Studio Camera 4K G2 | `Micro-Studio-Camera-4K-G2.local`$^1$ | |
+| Studio Camera 4K Plus | `Studio-Camera-4K-Plus.local` | |
+| Studio Camera 4K Pro | `Studio-Camera-4K-Pro.local` | |
+| Studio Camera 4K Plus G2 | `Studio-Camera-4K-Plus-G2.local`$^1$ | |
+| Studio Camera 4K Pro G2 | `Studio-Camera-4K-Pro-G2.local`$^1$ | |
+| Studio Camera 6K Pro | `Studio-Camera-6K-Pro.local` | |
+
+$^1:$ Unverified best guess <br>
+If any of this information is incorrect, please let me know in the Issues section of this repository.
+
+# Issues and To-Dos
+## Known Issues
+- Page responsiveness
+- Editable spans are hard to use
+
+## Unknown Issues
+Please report issues to the repo's issue tracker so I can fix them!
+<br>
+If you're having trouble and don't know why, check the browser console.
+
+## To-Do
+- Use WebSockets instead of polling to keep the page in sync
+- Make a better UI for color correction
+- Add audio settings
+- Add codec/format switching settings
+- Improve responsiveness
+- Improved error handling

index.html

@@ -192,7 +192,7 @@
                                 <tr>
                                     <td>Hostname</td>
                                     <td>
-                                        <input type="text" value="Studio-Camera-6K-Pro.local" id="hostnameInput">
+                                        <input type="text" placeholder="Studio-Camera-6K-Pro.local" id="hostnameInput">
                                         <button onclick='initCamera(document.getElementById("hostnameInput").value, ci)'>Connect</button>
                                         <span id="connectionErrorSpan"></span>
                                     </td>
@@ -213,7 +213,7 @@
                                 </tr>
                                 <tr>
                                     <td colspan="2">
-                                        <p id="manualRequestResponseP">Send manual API requests using the above controls. See documentation for details.</p>
+                                        <p id="manualRequestResponseP">Send manual API requests using the above controls. See <a href="https://documents.blackmagicdesign.com/DeveloperManuals/RESTAPIforBlackmagicCameras.pdf?_v=1696143610000" target="_blank" style="color: #6e6e6e;">documentation</a> for details.</p>
                                     </td>
                                 </tr>
                             </table>

style.css

@@ -1,5 +1,16 @@
 /* ============= WHOLE PAGE STYLES ================== */
 
+/* Handle vertical screens */
+@media screen and (max-width: 1000px) {
+    #cameraControlsContainer {
+        width: 100vw!important;
+    }
+
+    #cameraControlsContainerExpanded {
+        display: none;
+    }
+}
+
 /* Load NotoSansDisplay Font from resources */
 @font-face {
     font-family: 'NotoSansDisplay';

web-ui.js

@@ -3,6 +3,7 @@ var cameras = [];
 var ci = 0;
 var WBMode = 0; // 0: balance, 1: tint
 
+
 function bodyOnLoad() {
     let intervalIDOne = setInterval(timerCallFunction1, 1000); // Tem second timer for refreshing everything
     let intervalIDTen = setInterval(timerCallFunction10, 10000); // Tem second timer for refreshing everything
@@ -18,6 +19,7 @@ function initCamera(hostname, ind) {
     sendRequest("GET", "http://"+hostname+"/control/api/v1/system","").then((response) => {
         if (response.status < 300) {
             cameras[ci] = new BMDCamera(hostname, ind);
+            document.getElementById("connectionErrorSpan").innerHTML = "";
         } else {
             document.getElementById("connectionErrorSpan").innerHTML = response.statusText;
         }
@@ -64,6 +66,7 @@ function switchCamera(index) {
     }
 
     document.getElementById("cameraNumberLabel").innerHTML = "CAM"+(ci+1);
+    document.getElementById("cameraName").innerHTML = "CAMERA NAME";
 }
 
 function setCCMode(mode) {
@@ -233,95 +236,38 @@ function resetCC(which) {
     } else if (which == 3) {
         cameras[ci].setCCOffset({"red": 0.0, "green": 0.0, "blue": 0.0, "luma": 0.0});
     } else if (which == 4) {
-        cameras[ci].setCCContrast({"pivot": 0.0, "adjust": 1.0});
+        cameras[ci].setCCContrast({"pivot": 0.5, "adjust": 1.0});
     } else if (which == 5) {
         cameras[ci].setCCColor({"hue": 0.0, "saturation": 1.0});
         cameras[ci].setCCLumaContribuion({"lumaContribution": 1.0});
     }
 }
 
-function makeFakeCamera() {
+
-    cam = new BMDCamera("Studio-Camera-6K-Pro.local",0) 
+/* Cookie Setting functions from StackOverflow :P */
-    return Object.assign(cam,{
+function createCookie(name, value, days) {
-        "name": "Studio Camera 6K Pro",
+    var expires;
-        "hostname": "Studio-Camera-6K-Pro.local",
+    if (days) {
-        "APIAddress": "http://Studio-Camera-6K-Pro.local/control/api/v1",
+        var date = new Date();
-        "index": 0,
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-        "transportMode": {
+        expires = "; expires=" + date.toGMTString();
-            "mode": "InputPreview"
+    } else {
-        },
+        expires="";
-        "playbackState": {
+    }
-            "loop": false,
+    document.cookie = name + "=" + value + expires + "; path=/";
-            "position": 0,
+}
-            "singleClip": false,
+
-            "speed": 0,
+function getCookie(c_name) {
-            "type": "Play"
+    if (document.cookie.length > 0) {
-        },
+        c_start = document.cookie.indexOf(c_name + "=");
-        "recordState": {
+        if (c_start != -1) {
-            "recording": false
+            c_start = c_start + c_name.length + 1;
-        },
+            c_end = document.cookie.indexOf(";", c_start);
-        "timecode": {
+            if (c_end == -1) {
-            "clip": 0,
+                c_end = document.cookie.length;
-            "timecode": 289550880,
+            }
-            "source": "Clip"
+            return unescape(document.cookie.substring(c_start, c_end));
-        },
+        }
-        "presets": {
+    }
-            "presets": []
+    return "";
-        },
-        "activePreset": "default",
-        "apertureStop": 4.400000095367432,
-        "apertureNormalised": 0.021739130839705467,
-        "zoomMM": 18,
-        "zoomNormalised": 0,
-        "focusNormalised": 0.5,
-        "ISO": 400,
-        "gain": 0,
-        "NDStop": 0,
-        "NDMode": "Fraction",
-        "shutter": {
-            "continuousShutterAutoExposure": false,
-            "shutterSpeed": 50
-        },
-        "AutoExposureMode": {
-            "mode": "Off",
-            "type": ""
-        },
-        "CClift": {
-            "blue": 0,
-            "green": 0,
-            "luma": 0,
-            "red": 0
-        },
-        "CCgamma": {
-            "blue": 0,
-            "green": 0,
-            "luma": 0,
-            "red": 0
-        },
-        "CCgain": {
-            "blue": 1,
-            "green": 1,
-            "luma": 1,
-            "red": 1
-        },
-        "CCoffset": {
-            "blue": 0,
-            "green": 0,
-            "luma": 0,
-            "red": 0
-        },
-        "CCcontrast": {
-            "adjust": 1,
-            "pivot": 0.5
-        },
-        "CCcolor": {
-            "hue": 0,
-            "saturation": 1
-        },
-        "CClumacontribution": {
-            "lumaContribution": 1
-        },
-        "WhiteBalance": 5600,
-        "WhiteBalanceTint": 0
-    })
 }