This web app utilizes the [Blackmagic](https://blackmagicdesign.com) Camera Control REST API to control cameras with a vanilla JS web interface. Modeled after the interface of ATEM Software Control, most of the camera's functions 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 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 `BMDevice.js` file works on its own if you want to write your own web app using the REST API. If you're interested in an in-depth walkthrough, I have a series of tutorials where I build up this file, step by step, while explaining how each part works. You can find it on my [GitHub page for it](https://github.com/DylanSpeiser/BM-API-Tutorial).
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+)
> 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. You might have to convince your browser to trust the certificate by navigating to the API endpoint, overriding your browser's "this page isn't secure!" warnings, and then going back to the WebUI and connecting with HTTPS.
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".
You can also use the GitHub Pages version of the app, which is linked in the sidebar.
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.
Because the app is just a web page, you can open it in multiple browser windows at once. Resize the windows and you can monitor many cameras at the same time!
If you're having trouble seeing the bottom of the controls because of the footer (which can happen on tablets), just tap on the footer bar to hide it. Tap on the header bar to bring the footer back.
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:
It's open source, so feel free to modify the code to add new features or suit it to your setup. It's all vanilla JavaScript and HTML so it's super easy to work with and modify. Fork it and make something cool!
If you like this project and want it to improve, consider making a Pull Request and I'll give it a look. Or, if coding isn't your thing, open an Issue in the repo's issue tracker.
For more information about using the BMD REST API and how I wrote `BMDevice.js`, check out [my tutorial series](https://github.com/DylanSpeiser/BM-API-Tutorial/) that explains the basics of how to interact with the camera in JavaScript and Python.
Cameras are represented as BMCamera objects, instantiated with the `new` keyword and the constructor, which takes the hostname as a String argument. The constructor also (optionally) takes another boolean argument for whether or not to use HTTPS and WSS requests rather than their unsecre counterparts. In order to use the secure protocols, you must generate a certificate in **Blackmagic Camera Setup**.
If you are using this file to control a HyperDeck, instantiate it as a `BMDevice` object.
After instantiation, the constructor automatically subscribes to and pulls data from every available WebSocket property. If you don't like this, comment out lines 93-98 of `BMDevice.js`.
Each BMDevice object has an `active` property, whose sole purpose is to enable or disable the calling of `updateUI` after receiving a WebSocket message. By default, `active` is set to `false`. If you have your own UI and want to update it on every `ws.onmessage` event (like I do), after instantiating the device, pass a reference to _your_ UI updating function to `.updateUI` and set `active` to true, like so:
```JS
cameras[ci] = new BMCamera(hostname);
cameras[ci].updateUI = updateUIAll;
cameras[ci].active = true;
```
### Accessing Data
The JSON data from the device is stored in the `propertyData` field, indexed by the endpoint it came from. For example, here's how you would access the recording state of a `BMDevice` object named `device`:
Remember to consult the REST API documentation for more information about how this data is stored. Or, look in the developer console for this WebUI. You can access the currently selected camera in my WebUI as `cameras[ci]`.
### Sending Data
Data is sent to the camera with the `PUTdata(endpoint, data)` method. For example:
