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 # 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. 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) >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. 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> <html>
<head> <head>
<!-- Page title and metadata --> <!-- Page title and metadata -->
<title>Blackmagic Camera Control WebUI</title> <title>Camera Control WebUI for Blackmagic Cameras</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="description" content="JS-based web interface for controlling Blackmagic Design cameras via the official REST API"> <meta name="description" content="JS-based web interface for controlling Blackmagic Design cameras via the official REST API">
<meta name="author" content="Dylan Speiser"> <meta name="author" content="Dylan Speiser">
@ -21,7 +21,7 @@
<!-- Header Div --> <!-- Header Div -->
<div class="flexContainerH" id="headerContainer"> <div class="flexContainerH" id="headerContainer">
<h1>Blackmagic Camera Control WebUI</h1> <h1>Camera Control WebUI for Blackmagic Cameras</h1>
</div> </div>
<!-- Camera Select Bar --> <!-- 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="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(false)" title="Back">&#9204</button>
<button class="circleButton" onclick="cameras[ci].seek(true)" title="Forward">&#9205</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].play()" title="Play">&#9654</button>
<button class="circleButton" onclick="cameras[ci].stop()" title="Stop">&#9209</button> <button class="circleButton" onclick="cameras[ci].stop()" title="Stop">&#9209</button>
</div> </div>
@ -194,7 +194,7 @@
<tr> <tr>
<td>Hostname</td> <td>Hostname</td>
<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> <button onclick="initCamera()">Connect</button>
<input type="checkbox" id="secureCheckbox"> <input type="checkbox" id="secureCheckbox">
<span id="secureCheckboxLabel">Use HTTPS</span> <span id="secureCheckboxLabel">Use HTTPS</span>
@ -333,13 +333,13 @@
<!-- Footer Div --> <!-- Footer Div -->
<div class="flexContainerH" id="footerContainer"> <div class="flexContainerH" id="footerContainer">
<div id="footerLeft"> <div id="footerLeft">
<span class="">(v 1.2)</span> <span class="">(v 1.3)</span>
<span id="activeElementSpan"></span> <span id="activeElementSpan"></span>
</div> </div>
<div id="footerLinks"> <div id="footerLinks">
<span><a id="documentationLink" href="#" target="_blank">YAML Documentation</a></span> <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="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>
</div> </div>
</body> </body>