zgaetano/BM-Camera-Control-WebUI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

v1.3

Browse source 
Suggestions
This commit is contained in:
DylanSpeiser 2024-07-20 16:35:19 -04:00
parent 4d5e48527b
commit 7eea3a4f27
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1,6 +1,8 @@
# BM Camera Control WebUI
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.
Note that this is a tech demo, and may not be suitable for production use.
>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.

12
index.html
View file

@ -4,7 +4,7 @@
<html>
<head>
<!-- Page title and metadata -->
<title>Blackmagic Camera Control WebUI</title>
<title>Camera Control WebUI for Blackmagic Cameras</title>
<meta charset="UTF-8">
<meta name="description" content="JS-based web interface for controlling Blackmagic Design cameras via the official REST API">
<meta name="author" content="Dylan Speiser">
@ -21,7 +21,7 @@
<!-- Header Div -->
<div class="flexContainerH" id="headerContainer">
<h1>Blackmagic Camera Control WebUI</h1>
<h1>Camera Control WebUI for Blackmagic Cameras</h1>
</div>
<!-- Camera Select Bar -->
@ -180,7 +180,7 @@
<button class="circleButton" onclick="loopHandler('Single Clip')" title="Single Clip" id="singleClipButton">S</button>
<button class="circleButton" onclick="cameras[ci].seek(false)" title="Back">&#9204</button>
<button class="circleButton" onclick="cameras[ci].seek(true)" title="Forward">&#9205</button>
<button class="circleButton" onclick="cameras[ci].toggleRecord()" title="Record">&#9210</button>
<button class="circleButton" onclick="cameras[ci].toggleRecord()" title="Record" style="color: red;">&#9210</button>
<button class="circleButton" onclick="cameras[ci].play()" title="Play">&#9654</button>
<button class="circleButton" onclick="cameras[ci].stop()" title="Stop">&#9209</button>
</div>
@ -194,7 +194,7 @@
<tr>
<td>Hostname</td>
<td>
<input type="text" placeholder="Studio-Camera-6K-Pro.local" id="hostnameInput" onclick="hostnameInputHandler()" onkeydown="hostnameInputHandler()">
<input type="text" placeholder=" Camera-Name-Here.local" id="hostnameInput" onclick="hostnameInputHandler()" onkeydown="hostnameInputHandler()" style="text-align: left;">
<button onclick="initCamera()">Connect</button>
<input type="checkbox" id="secureCheckbox">
<span id="secureCheckboxLabel">Use HTTPS</span>
@ -333,13 +333,13 @@
<!-- Footer Div -->
<div class="flexContainerH" id="footerContainer">
<div id="footerLeft">
<span class="">(v 1.2)</span>
<span class="">(v 1.3)</span>
<span id="activeElementSpan"></span>
</div>
<div id="footerLinks">
<span><a id="documentationLink" href="#" target="_blank">YAML Documentation</a></span>
<span><a id="mediaManagerLink" href="#" target="_blank">Web Media Manager</a></span>
<span><a id="githubLink" href="#" target="https://github.com/DylanSpeiser/BM-Camera-Control-WebUI">GitHub</a></span>
<span><a id="githubLink" href="https://github.com/DylanSpeiser/BM-Camera-Control-WebUI" target="_blank">GitHub</a></span>
</div>
</div>
</body>